ブラウザ上で動作するjavascriptエディターの比較

衣替えしました。agoです。

最近使い始めて便利だなーと思ったので、ブラウザ上から入力されたjavascriptを実行してくれるオンラインjavascriptエディターを比較したいと思います。

jsdo.it

弊社運営のwonderflのJS版サイトです。

コードを書くにはまずログインする必要がありますが、認証にはOpenIDとOAuthをサポートしているため一般的なネットサービスを使用しているのであれば新規にアカウントを作成する必要はありません。

使い方は左にJS、CSS、htmlを記述し、右側でプレビューします。

その他細かい機能については弊社大塚の記事をご覧ください。
jsdo.it at jstudy

シンプルなのでぱっと見である程度使い方が分かると思います。

左側にJSを記述し、右側にhtmlを記述します。
（右側にscript要素を記述し、その中にJSを記述しても動作します）

基本的な流れはhtmlとJSを記述後「Preview」を押して動作を確認し、「Create public link」から固定URLを取得して公開することになります。
（固定URLは修正する毎に末尾の数字が増えていくので、過去の修正を追いかけることが出来ます）

JSは</body>の直前に展開されます。
（htmlに<script>%code%</script>と記述することでJSの記述場所を変更することが出来ます）

また、gistとの連携機能も持っており、http://jsbin.com/gist/407491と行った形でgistのIDを渡すことによりgist内のコードを読み込ませることが出来ます。

今回紹介する中では一番機能豊富です。

HTML、CSS、JavaScriptそれぞれに記述します。
（右側にscript要素を記述し、その中にJSを記述しても動作します）

こちらもJS Binと同じようにコードを記述した後「Run」で動作を確認し、「Save as new」で固定URLを取得します。
（保存後は「Update」でJS Binと同じように末尾に数字をつけたまま更新、「Save as new」でコードを保持したまま新しいURLを発行します）

JSは<head>内に記述され、select boxの「onDomReady」、「onLoad」を選択した場合、選択されているライブラリに合わせた記述でJavaScript部分が実行されます。

上記二つとは若干方向性が違いますが、ブラウザ上で動作するjavascriptエディターと言うことで紹介したいと思います。

htmlの記述や入力内容の保存は出来ないので、確認したいJSを入力してその場で結果を確認するためだけの使い方になります。

基本的にはJS BinやjsFiddleを使用すれば問題ありませんが、JS BinやjsFiddleはIE6で動作しないためIE6でJSの動きを確認したい場合には使用できると思います。

個人的にjsFiddleは高機能すぎて各種入力項目と結果の関連性が分からないため、JS Binが気に入っています。

IE6で問題が発生する場合、JavaScript Shellで確認しています。

また、紹介しているサンプルは万有引力 | wonderfl build flash onlineを元にさせていただきました。