Codeblock.jsはWebブラウザ上でJavaScriptを実行し、その場で結果を確認できるソフトウェアです。

ブログなどでJavaScriptのコードサンプルを書いている記事は良くありますが、その実行結果は自分でコンソールに打ち込んだりしないといけません。これは面倒で、Codeblock.jsを使えばその場で実行できるようになります。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.54.47_thumb.1368595871.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.54.47.1368595871.png)
このJavaScriptコード部分が実行可能になります。runボタンを押すと実行されます。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.54.50_thumb.1368595878.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.54.50.1368595878.png)
これはコードが動き回るデモ。ボタンの横にデバッグメッセージを出すこともできます。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.54.59_thumb.1368595890.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.54.59.1368595890.png)
指定したDOMに対してcodeblock()を実行すると実行可能になります。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.55.03_thumb.1368595895.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.55.03.1368595895.png)
こんな感じに変化します。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.55.10_thumb.1368595903.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.55.10.1368595903.png)
編集可能にしたりとオプションも用意されています。

Codeblock.jsを使えば入力されているコードをそのままrunボタンで実行できます。デバッグメッセージもその場に出力できるので実行した人にとって分かりやすいでしょう。JavaScriptのライブラリ紹介ページで使うと便利そうです。

Codeblock.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

スマートフォン系のサービスを作っていたりして知ったのは、とにかくユーザというのは面倒な作業を嫌がります。ワンステップでも多ければ実際に試してくれる率は半分になります。さらにワンステップ増えれば1/4です。そのツールが優れているかどうかよりも、よりステップの少ないソフトウェアが好まれます。

そのため、デモがあったり、その場で試せるというのは大きな利点になります。JavaScriptはそうした点においてブラウザだけで実行できるというのはとても大きな利点になるはずです(だからこそ逆に気配りが必要になるのですが)。

Codeblock.js by Filepicker.io

Filepicker/codeblock.js · GitHub