Skip to content

Web上で手を動かしてJavaScriptを学べるサービスまとめ

Web上でプログラミングを学習できるサービスは数多くありますが、単なる座学で見ているだけではなかなか身につきません。プログラミングはやはり手を動かして学ぶ必要があるでしょう。

ということでWeb上で手を動かしてプログラミングを学習できるサービスを紹介します。

CodeCombat

ゲームを通じてプログラミングを学べるサービスです。幼稚園レベルから高校生まで3段階に分かれています。最初からコードを書いていくので、正しい構造で学べるのが利点とのことです。

CodeCombat – Learn how to code by playing a game

Progate

イラスト中心のスライドで学び、実際に手を動かして作りながら学びます。実践的な教材を採用することにより、現場で使える技術が身につくようになります。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

CODEPREP

穴埋め式ドリル形式になっているのでテンポ良く学べるようになっています。テキストが用意されており、それをベースに実際に記述しながら学んでいけるようになっています。

CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス

Thimble

Mozillaの作成したHTML/JavaScript/CSSが学べる環境になります。お題に合わせてHTMLを編集したり、JavaScriptを開発して進めていきます。

Thimble by Mozilla – An online code editor for learners & educators.

CodinGame

ゲームの開発を通じてプログラミングを学習できます。ゲーム自体はかなり本格的なものになっていますので、ゲーム開発についても深く理解ができるでしょう。

Coding Games and Programming Challenges to Code Better

シラバス(Cyllabus)

マネして学べる、プログラミング学習サイトというコンセプトのWebサービスです。JavaScriptはありませんが、HTML/CSSを使ってWebサイトをレスポンシブに対応させるところまで学習できます。

シラバス(Cyllabus) – キュレーション型 eラーニングシステム


手を動かすことでちゃんと正解しながら一歩ずつステップアップしていけます。なんとなく通過してしまうことがないのできちんと身につくはずです。ぜひ初学者の方はこうした体験型サービスで学んでみてください。

ポップアップ/モーダル表示を行うポップアップライブラリの紹介(その3)「モーダル表示(ドラッグ)」

hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。

今回は表示したモーダルをドラッグで動かせるようにする方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。

使い方

まずpopup.jsとpopup.cssを読み込みます。

次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。

JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定して、最後に show() を実行すれば表示されます。この時、 draggable: true オプションを追加するのがポイントです。

実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。

ポップアップ

ポップアップ/モーダル表示を行うポップアップライブラリの紹介(その2)「モーダル表示(オーバーレイ表示なし)」

hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。

今回は背景が暗くならないようにする方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。

使い方

まずpopup.jsとpopup.cssを読み込みます。

次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。

JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定して、最後に show() を実行すれば表示されます。この時、 overlay: false オプションを追加するのがポイントです。

実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。

ポップアップ

HTML5でファイルアップロードを多機能にしてくれるライブラリ×9選

HTML5で表現力が豊かになり、APIが多数追加されたとあってもそれを活かすコードを書かなければ従来のWebと何ら変わりません。特にフォーム周りは多数の機能が追加されています。これらを使うこなすことでユーザビリティの高いフォーム機能が実現します。

今回はファイルアップロードに注目して役立つライブラリを紹介します。

JeremyFagis/dropify: Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify

ファイルをローカルコンピュータからドラッグ&ドロップしてアップロードできます。画像の場合、サムネイルを表示します。マウスオーバーするとアニメーションがかかったりするのでユーザがファイルをドロップする場所を迷わないで済みます。

JeremyFagis/dropify: Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify

FineUploader/fine-uploader: Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

複数のファイルアップロードが可能で、画像のプレビューも備わっています。アップロード時にはプログレスバーが表示されます。さらにAmazon S3やAzureへのアップロードも可能です。

ファイルは分割アップロードされ、一旦停止したりリジュームも可能です。

FineUploader/fine-uploader: Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

taylor/html5uploader: clone of http://code.google.com/p/html5uploader/

特定のDOMに対してファイルをドラッグ&ドロップでアップロードできるようになります。一旦リストにファイルを蓄積することも、すぐにファイルをアップロード開始することも可能です。

taylor/html5uploader: clone of http://code.google.com/p/html5uploader/

mihaild/jquery-html5-upload: It is a simple plugin for jQuery, which helps you to upload multiple files and to show progress of uploading.

jQueryに対応した複数ファイルのアップロードライブラリです。イベントも取れますし、途中のステータスも取得できます。jQueryなのでhifiveとの相性もいいはずです。

mihaild/jquery-html5-upload: It is a simple plugin for jQuery, which helps you to upload multiple files and to show progress of uploading.

Rovak/InlineAttachment: Easily paste and upload files/images in plain textareas

テキストエリアにファイルをドラッグ&ドロップできます。そしてファイルをAjaxでアップロードすれば、GitHubやはてなブログなどで実現されている機能相当になります。

Rovak/InlineAttachment: Easily paste and upload files/images in plain textareas

flowjs/flow.js: A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.

HTML5のFile APIを使ってファイルを分割し、アップロードの再開、一時停止ができるようになります。サーバ側では送られてきた分割ファイルを後で結合する必要があるのでクライアント側だけでは完結しません。

flowjs/flow.js: A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.

enyo/dropzone: Dropzone is an easy to use drag’n’drop library. It supports image previews and shows nice progress bars.

指定されたDOMに画像ファイルをアップロードすれば、サムネイルの表示と良い感じのプログレスバーが表示されます。サーバ側は特に普通のファイルとして扱えますので、どんなシステムでも利用できます。

enyo/dropzone: Dropzone is an easy to use drag’n’drop library. It supports image previews and shows nice progress bars.

blueimp/jQuery-File-Upload: File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

ファイルを複数選択し、それらのサムネイルを確認した上でアップロードが開始できるようになっています。個別にアップロードもできます。大量の画像をアップロードする際(さらに一旦確認が必要な場合)に便利なUIです。こちらもアップロードの一時停止、再開に対応しています。

blueimp/jQuery-File-Upload: File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.


今回紹介したライブラリではHTML5のファイルのドラッグ&ドロップ、複数ファイルの指定、File APIによるファイル分割などが使われています。従来のフォームでは難しかったこういった機能もHTML5によって容易に実現できるようになっています。

ライブラリであればシステムへの導入も容易でしょう。ぜひご利用ください。

スクラッチで組み立てたい人向けのガントチャートライブラリ「Gantt-Chart」

今回は、D3.jsを利用したチャートライブラリGantt-Chartを紹介します。

Gantt-Chart概要

このガントチャートライブラリは、D3.jsをベースとしていますが、完全にそれをラップしていますので、D3そのものを学習する必要はありません。
学習コストも低く、描画部分をJavaScriptとCSSでできますので、ガントチャートをスクラッチで構築するならば、十分な選択技となるライブラリです。

GitHub: Gantt-Chart

とりあえず表示してみる

まずは単純なガントチャートを表示してみます。必要なライブラリとしてD3.jsが必要になります。

<body>
    http://./js/d3.v3.min.js
    http://./js/gantt-chart-d3.js
    http://./js/example1.js
</body>

example1.jsのソースコードです。

example();
function example() {

    var tasks = [
        {
            "startDate": new Date("2015/06/19 00:00:00"),
            "endDate": new Date("2015/06/23 00:00:00"),
            "taskName": "Task A",
            "status": "RUNNING"
        },
        {
            "startDate": new Date("2015/06/22 00:00:00"),
            "endDate": new Date("2015/06/27 00:00:00"),
            "taskName": "Task B",
            "status": "SUCCEEDED"
        }
    ];

    var taskNames = ["Task A", "Task B"];

    var format = "%m/%d";

    var gantt = d3.gantt().taskTypes(taskNames).tickFormat(format);
    gantt(tasks);

}

サンプル1の実行結果です。

サンプル1の実行結果
サンプル1の実行結果

データ記述方法

それでは、一つずつ、細かく見ていきます。まずはデータ記述方法を確認していきます。

データはオブジェクトの配列で設定します。オブジェクトには「startDate」「endDate」「taskName」「status」の4つだけと大変シンプルな構造になっています。

var tasks = [
    {
        "startDate": new Date("2015/06/19 00:00:00"),
        "endDate": new Date("2015/06/23 00:00:00"),
        "taskName": "Task A",
        "status": "RUNNING"
    }
];

startDate
日付をDateオブジェクトで設定します。
endDate
日付をDateオブジェクトで設定します。
taskName
Y軸のタスク名称を設定します。
status
そのグラフのステータスです。この名称はクラス名の参照にも使われます(後述)

Y軸のタスク名

タスク名称は、上記のデータオブジェクトにも記述しますが、並び順を決定するために、配列にて設定します。

var taskNames = ["Task A", "Task B"];

X軸の日付フォーマット

X軸のフォーマットはd3の日付フォーマットで記述します。以下に幾つか例を挙げます。

var format = "%m/%d"; // '06/10'
var format = "%m-%d"; // '06-10'
var format = "%H:%M"; // '12:30'

d3.jsの日付フォーマットはd3 Time Formattingを参照してください。

描画方法

最低限の描画は、次のように描画できます。taskTypesにY軸タスク名の配列、tickFormatにX軸日付フォーマットを設定します。最後に、データオブジェクトを渡せば描画されます。

var gantt = d3.gantt().taskTypes(taskNames).tickFormat(format);
gantt(tasks);

ステータス毎のスタイル設定

このライブラリで特徴的なものが、スタイルシートのクラス名の参照機能を持ち合わせていることです。これにより、tasksオブジェクトのstatusの値が、CSSのクラス名として参照されます。

以下はその記述方法です。

var tasks = [
    {
        …省略
        "status": "RUNNING"
    },
    {
        …省略
        "status": "SUCCEEDED"
    }
];

var taskStatus = {
    "SUCCEEDED": "bar",
    "FAILED": "bar-failed",
    "RUNNING": "bar-running",
    "KILLED": "bar-killed"
};

ganttのメソッドチェーンのtaskStatus()に、上記で設定したtaskStatusオブジェクトを引数として指定します。

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);

ステータスにCSSを指定した場合の実行結果です。

ステータスにCSSを指定した場合
ステータスにCSSを指定した場合

主なメソッド

既に気づいていると思いますが、このライブラリは、メソッドチェーンで各項目を設定できます。以下に主なメソッドを記載します。

メソッド 引数 概要
redraw なし 全体の再描画を行います。
width 数値(ピクセル) グラフの表示エリアの横幅を指定します。
height 数値(ピクセル) グラフの表示エリアの高さを指定します。
timeDomainMode “fit” or “fixed” fitで全期間を描画します。fixedはtimeDomainで指定した期間を描画します。
timeDomain Date配列[start, end] timeDomainModeがfixedの時に、その描画期間を指定します。

描画時の注意点

タスクを追加するなどのコントロールをするために redraw メソッドがありますが、データ全てを書き換えるので、大量のデータを書き換える場合は、描画パフォーマンスなどで考慮が必要になるでしょう。

また、日本語をそのまま利用すると文字化けしてしまうため、エンコードなどの工夫が必要になると思います。

あとがき

RESTなどでデータを外部から受信すれば、自由に取込んだり描画することができるでしょう。スクラッチでガントチャートを作成するならば、是非利用したいライブラリだと思います。

dk8996/Gantt-Chart

ポップアップ/モーダル表示を行うポップアップライブラリの紹介(その1)「モーダル表示」

hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。

実際に動いているデモはこちらにあります。アニメーションは次のようになります。

使い方

まずpopup.jsとpopup.cssを読み込みます。

次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。

JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定して、最後に show() を実行すれば表示されます。

実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。

ポップアップ

仮想DOMを使ったJavaScriptライブラリまとめ

ここ数年JavaScript界隈で注目を集めたのがVirtual DOM(仮想DOM)です。DOMをJavaScriptから操作する場合、その状態を管理するのが問題になりますが、Virtual DOMではDOMの描画から開放されるのでロジックとビューの分離が可能になります。

そんなVirtual DOMを提供するライブラリを紹介します。

React – A JavaScript library for building user interfaces

Virtual DOMを最初に広めたのがReactです。画期的な概念であり、JavaScriptプログラマにとって大きな変革になりました。次期バージョンからReact Fiberとなり、レンダリング処理などが高速化すると言われています。

元々Virtual DOMによってDOMとは切り離された技術になっていますので、React Nativeによってスマートフォンアプリの描画に使われたり、コミュニティベースではReact CanvasでCanvasへの描画、React Consoleというコンソールアプリケーション開発用のソフトウェアも作られています。

React – A JavaScript library for building user interfaces

Vue.js

Reactが独自のタグを定義するのに対してVue.jsでは元々のHTMLタグを活用したVirtual DOM利用ができます。そのため学習コストが低く、利用者が増えています。Reactと同じようにサーバサイドレンダリングにも対応しています。

シンプルな仕組みで、ランタイムもコンパクトです。Virtual DOMの仕組みも高速なのが売りです。

Vue.js

Maquette

ReactはJSXを覚える必要がありますが、Maquetteは純粋なJavaScriptだけで記述できます。以下はサンプルコードです。

GZip圧縮すると3KBになるというコンパクトなサイズも売りです。

Maquette

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Reactの代替と銘打っているライブラリです。React向けに作られているコンポーネントがそのまま使えるようになっているのがポイントです。

パフォーマンスやサイズに重点を置いており、Reactを使っている方の悩みを解決する存在と言えそうです。

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

WebReflection/hyperHTML: A Fast & Light Virtual DOM Alternative

hyperHTMLはシンプルなVirtual DOMライブラリとなっています。onclickなどは別な関数を定義して、そちらに飛ばす仕組みになっています。以下はサンプルコードです。

WebReflection/hyperHTML: A Fast & Light Virtual DOM Alternative

anthonyshort/deku: Render interfaces using pure functions and virtual DOM

Reduxと組み合わせて使うこともできるVirtual DOMライブラリです。軽量なReactといった雰囲気があります。ピュアなJavaScriptで記述できるのがポイントです。

Reactで書いた場合の半分くらいのサイズになるようです。

anthonyshort/deku: Render interfaces using pure functions and virtual DOM


Virtual DOMはWebアプリケーションが大型化していく中で見逃せない概念になっています。かといってReactやVue.jsで開発するのに苦痛を感じる方もいるでしょう。そうした時にはVirtual DOMのライブラリを採用するのも手でしょう。

DOMの状態管理が大変になってきていたら導入を検討してみてはいかがでしょう。