ブラウザ上でJavascriptのコードを試したいときに便利なサービス

Javascriptで、他の人が書いたコードを試したかったり、ちゃんと環境構築するのは面倒だからやりたくないけど、ちょっとだけコードの動きを確かめたい時ってありますよね。

そんなときに便利なブラウザ上で使えるウェブサービスを2つ紹介します。

JSFiddle

JSFiddleは、ブラウザ上でコードの動作が確かめることができるサイトです。画面が4つに割れていて、それぞれHTML、CSS、Javascript、結果、になっています。４つに別れていてわかりやすくコードを書けます。

JSFiddle

よくプログラミングの質問サイトの回答を載せる時に使われているので見たことがある人も多いと思います。

このJavascriptの部分は、VueとかJQueryにも変更できるので、Javascriptベースならだいたい動かせるので重宝します。

JSBin

JS Bin

このJSBinも、ブラウザ上でコードを書けるサービスです。画面もシンプルで、例えばCSS追加した場合はCSSと書かれたボタンを押せばよく、いろんな条件に合わせて画面をどんどん追加していけます。こちらもJQueryやreactなども選択できます。

どちらかというとJSFiddleよりシンプルにコンソールを見て動作を確認したい時はJS Binの方が良いような気がします。

ただし、機能的にはそこまで違いはないので、画面とか使い勝手の好みになります。

日本では圧倒的にJSFiddleを使っている印象で、JS Binは時々外国の人が使っているようなイメージです。

技術書だったり、動画での学習だったりで、本格的に環境を構築するのは面倒だけど、ちょっと動作は見てみたいような場合にとても便利なサイトですので、これから学習していくプログラミング入門者でも覚えておいて損はないと思います。