ブロックチェーン・AI・システム開発の株式会社INDETAIL

JS開発でオススメツール!ブラウザ上で動作確認できる「JS.Bin」がとっても便利!

2016.02.29
rockd

Web系の開発でJavaScriptの動きをちょっとだけチェックしたいなと思ったことはありませんか?
最近、自分は便利な関数がいろいろと詰まったUnderscore.jsというライブラリを仕事でよく使っているのですが、ちょっとした関数を実際に動かしてテストしたいなと思うことがあります。

そんな時に便利なのがJS.Binというサービスです。

JS.Binを使えば、ブラウザ上でJavaScriptを動作させることができます。
他にも、jQueryや今話題のReact、AngularJSといったフレームワークなどのライブラリもプルダウンから選ぶだけで簡単に読み込むことができるので、とても便利です。

似たようなサービスはJS.Bin以外にもあるのですが(有名どころだとJSFiddleなど)、JS.Binはデザインがシンプルでコードの文字が大きく見やすい所や、Consoleなどを並べて1つの画面でスッキリ見られる所が個人的に気に入ってます。

では早速、JS.Binの使い方を紹介したいと思います。

JS.Binの使い方

まずJS.Binのサイトにアクセスすると、下記のような画面が表示されます。

jsbin_first

UIがシンプルなので、少し触れば勘のいい人だとすぐに分かると思うのですが、実際に説明を書いてみました。

jsbin_image

今回は冒頭に出てきた、Underscore.jsの関数を試してみたいと思います。
僕はいつも上部のメニューは非表示にして、JavaScriptとConsole画面を横並びに表示させます。

jsbin_hide3
上部を隠すとスッキリしましたね。

ライブラリを使ってコードを記述する

では、早速ライブラリを選びます。「Add library」をクリックしましょう。

jsbin_add

jsbin_added

underscoreを選択すると、HTML画面にscriptタグが追加されてるのが分かります。
では実際にJavaScript画面に関数を書いてみます。

jsbin_run

underscoreのsortByを使って、console.logで実行結果をConsole画面に表示させるようにしました。
実行はRunをクリックします。結果がConsole画面に出てるのが分かりますね。

作成したコードを他の人にシェアする

JS.Binで書いてるコードを他の人に見せたい場合はShareボタンをクリックするとリンク等のメニューが表示されます。

jsbin_share

実は画面に何かコードを書き始めた時から自動的にセーブされていて、
このURLを送るだけで今の画面の状態を見せることも可能です。

jsbin_url

実際にJS.Binで記述した画面を見たい方はこちら↓
https://jsbin.com/mabirilure/edit?html,js,console

画面は同期されているので、変更すると同じURLから開いてる画面の内容も変更されます。
その時だけの状態を見せたい場合は、先ほどのShareからSnapshotを選択して表示されるリンクURLを送りましょう。

他に、HTMLファイルとして記述したコードをダウンロードすることも可能です。

jsbin_download

最後に、HelpにあるJS.Binの便利なショートカットキーをいくつか紹介します。

JS.Binで使えるショートカット

※全てではなく抜粋しています。

ctrl + [num]
対応するパネルの表示、非表示を変更する。
[num]は対応した数字が入ります。
1:HTML、2:CSS、3:JavaScript、4:Console、5:Output

ctrl + enter
JavaScriptの実行。

Ctrl + l
コンソールのクリア。

ctrl + /
カーソル行をコメントアウトする。
文字列を選択している場合は、その文字列のみコメントアウト。

cmd + [
インデントを入れる。

cmd + ]
インデントを解除する。

tab
入力補完する。
JavaScriptのみ候補表示&入力補完。HTMLはタグ化、CSSは: ;を補完。

まとめ

いかがでしたでしょうか。JS.Binのメリットをまとめると以下の点になります。

  • JavaScriptのライブコーディングができる!
  • UIがシンプルですっきり!
  • 作成したコードをシェアできる!
  • ショートカット作業効率がアップ!

便利なJS.Bin、お気に入りに登録しておくだけで、ちょっとした時に作業がはかどります。
ぜひ、みなさんも使ってみてください!

関連タグ:

rockd

エンジニア。 最近はフロントエンドを担当することが多い。 たまにデザインをすることもある。 インドアな見た目とは裏腹に意外とアウトドア。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。