JS開発にオススメ!ライブエディット可能なWebサービス「JsBin」



新しくリリースされたjavascriptやCSS等のライブラリのテストをしたい時はどうしていますか?

htmlのファイルを作って、そこでコーディングをしたり、
JSFIDDLEcodepen等のサービスを使ったり、色々と方法はあります。

そんな*フロントエンドのテストをしたい時にピッタリのWebサービス「JsBin」の紹介です。
( *フロントエンド: JS, CSS, HTML )

JsBin

* JsBinのTOP画像

JsBinは、ライブ プレビューしながら
HTML, CSS, Javascriptのコーディングが出来るWebサービスです。

エディット画面はカラム方式( 縦列 )を採用しており、コードを書くと
Output画面にリアルタイムに反映されます。( 表示・非表示も可能 )

便利なことに、Emmetにも対応していて、htmlやCSSの編集もスラスラ出来ます。

*試しに編集してみた画面

このサービスの面白いところは、エディット時にHTMLやJS、CSS以外の言語も扱えることです。

HTMLの代替として、Markdown, Jade。
その他にCSS部分ではSCSSやLESS、
JSの代わりとしてCoffeeScriptやTypeScript、ES6( Babel )で記述出来ます。


ライブエディットしながらコーディングが出来るサービスにcodepenが挙げられますが、
JsBinにはcodepenに無い機能も実装されています。

Liveアップデート機能が無料で使える事から始まり、JSX( React.js )ファイルにも対応。

Google Chromeのdevelopツール等に搭載されている様なConsole出力も可能で、
その他にGist Githubのコードスニペットサービス への保存、読み込みも出来ます。
( * gistとの連携の際はgithubアカウントでログインが必要 )

*外部ライブラリとCoffeeScriptで記述してみました

JsBinは、開発のツールとして十分な機能、使い勝手が備わっているので、
開発の補助としては申し分無い印象を受けました。

新しいライブラリ等を試したい時に、
フロントエンドデベロッパーは一度使ってみてはいかがでしょうか。

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ