Sublime Textから卒業？オンラインエディタのJS Binが便利すぎる
結構前からあるツールのようだが、便利だと思ったので書いておく。
ネットを見ていて「このコード試してみたいな」ということは良くある。で、その都度HTMLファイルを作成し、エディタで編集し、ブラウザで開くとしていると結構手間。
そんな手間を省いてくれるのがこのツール。その名も「JS Bin」。
HTML/CSS/JS用のオンラインエディタは結構存在すると思うが、以下の特徴がすばらしい。
JS Binのすばらしい特徴
各言語、コンソール、出力結果が1画面にまとまっている
僕にとって一番重要。いくつかの言語に対応していていも、それぞれ個別ページでの編集だと行ったり来たりに時間がかかる。その点JS Binは1画面に全てがまとまっているので、余計な手間がかからずノンストレス。
表示の切り替えがワンクリック
各言語やコンソール、結果の表示ON/OFFがワンクリックで可能。ドロップダウンメニューなどが多用されているサイトはよくあるが、あれって結構手間だよね。
リアルタイムに出力結果へ反映
ボタンを押す、ショートカットを実行する必要なく、コーディングしたとたんに結果へ反映。便利だなー。
JS Binにコードを保存可能
要ユーザー登録だが、作成したコードをJS Binに保存することが出来る。ブラウザさえあればどこからでもコーディング可能。Dropboxに頼らなくて良いのか。すばらしい。
コードをHTMLファイルとしてダウンロード可能
JS Binでコーディングしたコードは1つのHTMLファイルとしてダウンロードすることが可能（CSS、JSもstyleタグ、scriptタグで囲まれHTMLファイルに書き込まれる）。
僕はメインエディタとしてSublime Textを使っているが、HTML/CSS/JSの簡単なコーディングは全てこのJS Binに置き換わりそう。タイトルはさすがに言いすぎた。Sublime Text大好き、卒業できませんごめんなさい。
以下にJS Binで使えるショートカットをまとめておく（Helpにショートカットが記載されているが、英語なので日本語訳した）。ちなみに僕はWindowsユーザーなので、Macでは異なるかもしれない。
ショートカット
ctrl + [num]
アクティブにするエリアの選択、または表示ON/OFF。"ctrl + 1"はHTML、"ctrl + 2"はCSS、"ctrl + 3"はJS、"ctrl + 4"はコンソール、"ctrl + 5"は結果。
esc, ctrl + [num]
escを押すと、直後のJS Binでのctrl + [num]ショートカットを無効化する。これはブラウザのショートカットを使用出来るようにするため（Chromeだとctrl + [num]はタブ切り替えのショートカット）。
ctrl + enter
JSの実行。
Ctrl + l
コンソールのクリア。
ctrl + \
ナビゲーションバーを表示/非表示。
ctrl + /
カーソル行をコメントアウトする。文字列を選択している場合は、その文字列のみコメントアウト。
cmd + [
インデント。
cmd + ]
インデント解除。
tab
入力補完。JSのみ候補表示＆入力補完。HTMLはタグ化、CSSは: ;を補完。
ctrl + s
コードを保存。
（要ユーザー登録（？））
ctrl + shift + s
現在のコードを元に新規ファイル作成。
（要ユーザー登録）
いいツールを見つけると嬉しいよね。僕はブラウザに一行だけブックマックバーを設けており、このスペースに配置するサイトを厳選している。JS Binはもちろん配置した。
