ちょっとしたHTML/Javascript/CSSを書いて、動作を検証したい時や、見つけたライブラリを簡単に試したい時など、いちいちHTMLファイルを用意するのは至極面倒なのでオンラインエディタを利用している。
で、類似サービスが色々あるけど…どれ使う？と言う話。
３行まとめ
- webサイトに埋め込みたい場合、jsbin
- 複数ファイルに分けたい時 plunker
- どやーってしたい時 codepen.io
jsbin
jsbinを開くと、エディタ画面が開き、すぐにコードを書き始める事が可能。
HTML,JavaScript,CSS,結果画面,コンソール といったタブがあり、それぞれON/OFF可能。エディターはCodeMirrorを利用していて、特に不自由なく書ける。
jsbinが他サービスと較べて秀でているのは、コードをWEBに埋め込んだ時、コードを表示,実行結果の確認のみならず、その場でコードを編集できる所。
書いたコードをシェアする場合、された側が即コード変更して結果を得られるので便利！
利用できる言語
- HTML
- Markdown
- Jade
- JavaScript
- Processing
- React(jsx)
- Traceur
- TypeScript
- CoffeeScript
- Babel
- CSS
- Less
- Myth
- Stylus
- Sass
JS Bin on jsbin.com
codepen.io
先ず、TOPページがエディター画面ではない！
ギャラリーとして、「俺、こんな事やっちゃたぜー！うぇーい」とか、主張したい時に使う。
“ハッカーにとってのDribbble“と言われていたのが印象的。
likeしたり、view回数確認できたりとSNS的機能があり、はてはジョブボードとして活用できたりと、サービスの主軸がコードを実行する環境ではないもよう。
利用できる言語
- HTML
- Markdown
- Jade
- Slim
- Haml
- JavaScript
- CoffeeScript
- LiveScript
- CSS
- Less
- Stylus
- Sass
埋め込むこんな感じ。(Pickから適当にピックアップ)
Plunker
Angular界隈でよく利用されている。複数ファイル作成可能なのが特徴。書いたコードはzipでダウンロードできる。
複雑なコードを書く場合、１つのファイルに全部纏めると可読性が非常に悪いので、分けられるのは便利。
Starを付けたりといったSNS的機能もあるので、コードよりなcodepen.io的に使う事もできそう。
利用できる言語
参考 公式の情報が見つからない…
- HTML
- Markdown
- Jade
- JavaScript
- CoffeeScript
- LiveScript
- TypeScript(?)
- CSS
- Less
- Stylus
- Sass
埋め込むとこんな感じ。
jsfiddle
少し前はjsfiddleがよく使われてた気がするけど、衰退したもよう。理由は不明…
恐らく、他サービスより前からあるものだけど、機能的に特に良くも悪くもない感じ。
利用できる言語
- HTML
- JavaScript
- CoffeeScript
- Babel
- CSS
- SCSS
埋め込むこんな感じ。
まとめ
他にも同じようなサービスは沢山あるけど、個人的に使っている(いた)サービスを見てみた。
今までは特に気にせず、それぞれ適当に使っていたけど、比べてみるとそれぞれ特徴があって面白い。
所感ではjsbinが一番軽快に動作し、埋め込み時の仕様も良いのでjsbinを使っていこうと思った次第。(機能が豊富でよくわかってないが、それでも使えるのが素晴らしいね)