リアルタイムプレビューのついたWebベースのJavaScript/HTMLエディター「JS Bin」 // MOONGIFT Archived

JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。

JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。

デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。

レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。

右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。

HTMLにJavaScriptライブラリを追加できます。

jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。

保存すると固有のURLが付与されます。ここにアクセスすれば誰でも編集できます。

元のコードをクローンしたり、ダウンロードできます。

JS Binはリアルタイムコラボレーションの機能こそないものの、オンラインで編集できる仕組みになっているので動作の確認もすぐにできて便利です。コードハイライターも入っているので編集しやすいのが便利です。

JS BinはPHP製のオープンソース・ソフトウェア（GPL）です。

MOONGIFTはこう見る

Webベースの開発環境（IDE）というとなかなか現実的ではない状態ですが、JavaScriptを開発するためのIDEであればオンラインで提供されるのは良いのではないかと思っています。Webブラウザであればリアルタイムにプレビューできますし、デバッグもWebブラウザなら簡単です。

JS Binが実際に運用で使われているコードを引っ張ってこれたり、画像やCSSのパスが絶対パスになっていればプレビューもより正確なものになるでしょう。JS Binはオープンソース・ソフトウェアなので自分たちのサーバに組み込めるのが利点ではないかと思います。