プログラミングを習っている時に、じっくりとコードを書いていざ実行するとエラー表示というのを何度も繰り返すと嫌になってしまうものです。その場でリアルタイムにエラーが確認できるとモチベーションを保てることでしょう。 そこで使ってみたいのがLive Editorです。書いたコードがその場で実行される、グラフィックスライブラリコーディングツールです。

Live Editorの使い方

こちらはシンプルなデモ。最初はrectのみです。

書くとその場でコードが反映されます。

もうちょっと高度なツールもあります。こちらはドラッグ&ドロップでグラフィックスを描いていけます。

Live Editorは Khan Academy Computer Science curriculum というプログラミング学習サービスで作られています。学習する上でライブエディタは欠かせないということなのでしょう。技術的にはJSHint workerを使ってコードのチェックをし、エラーがない場合だけ実行するなど面白い形になっています。

Live EditorはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Live Editor Simple Demo Khan/live-editor