javascriptオンラインエディタを比較せし(2014-11)

javascriptどどすこ toolとかappとかババモレ

ブラウザで手軽にjavascriptを実験したり開発したりするサービス、最近ではもう色々ある。昔はjsFiddleが有名で、なんとなくずっと使ってたんだけどviewport（というかheadのカスタマイズ）に対応してない。

stackoverflowに同じような質問があって、ハックみたいなことやってなんとか埋め込んだはいいけど、デフォルトのツールバーみたいなものが強制的に入ってやはりうまく表示されないので、他のを試してみることにした。

ポイントはこんな感じ

  • Emmet(ex:zen-coding)に対応してる
  • cssとかちゃんと補完してくれる
  • ライブラリがきれいに追加できる
  • UIがごちゃごちゃしていない
  • viewportの対応が簡単
jsFiddle

Create a new fiddle - JSFiddle
上に書いたけどviewport対応してないのと、スマホ用のフルスクリーンビューのURLにアクセスできる場所がわかりづらい（「share」のinput:textの中）。UIも書く場所とアウトプットがデザイン的に区別されておらず、あまりよろしくない。保存する度にバージョンごとのURLを発行してくれる反面、Set as baseを毎回クリックしないとバージョンなしのURLに反映されないので別デバイスなどでの頻繁な確認には不向き。Emmet対応や補完は優秀。

Codepen.io

CodePen - Front End Developer Playground & Code Editor in the Browser
エディタのカスタマイズ機能が優秀で、フォントサイズや見た目を自由に変えられる点がすばらしい。登録して開発環境のようにがっつり使うイメージだけど、手軽にも使える柔軟性がある。

補完機能があまり賢くなく、思ったように補完されることはまずない。text-align: center; と入力したくて text-al まで打って tab 押しても平気で text-transform: とかになる。Emmetには対応。

アウトプットは基本オートリロードで使いやすいのだけど、たまに更新に失敗することがある。スマホ対応はツールバーが出るが邪魔せずデザインもいいので使いやすい。外部CSSが読み込めたり、パネルレイアウトを選べたり、他にも機能満載。補完が致命的で本当に惜しい。

JSBin

JS Bin - Collaborative JavaScript Debugging
機能的には申し分なく、Emmet使え、Codepenと違って補完も優秀。htmlではhtml、headを含めたソース全体の記述ができる。ライブプレビューのオンオフが設定でき、自動でJSLintがかかるためミスに気づきやすい。コンソールビューが用意されているのも特徴。

フォントサイズ、テーマなどエディタのカスタマイズも可能。Saveごとにバージョンを保存してくれ、URLはバージョンなしで最新バージョンにアクセスできる。一見シンプルだけど本当によくできてるなあ。

cssDeck

CSSとあるがjsの記述も可能。JSBinが優秀すぎてまだ試してない・・
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck



他にもありそうだけど、とりあえず以上です。個人的にはJSBinかな。