HTMLやCSS、JavaScriptを勉強していると、「この書き方でどう動くか、ちょっと試したい」ということがよくあります。そのたびにファイルを作ってブラウザで開くのは、意外と手間です。そんなときに便利なのが、ブラウザだけでコードを書いて動かせる「JSFiddle（ジェイエス・フィドル）」です。この記事では、JSFiddleの使い方と、使うときに気をつけたいことをまとめます。
JSFiddleとは
JSFiddle（https://jsfiddle.net/）は、ブラウザの中でHTML・CSS・JavaScriptを書き、その場で結果を確かめられるオンラインのエディタです。ソフトを入れる必要はなく、アカウントを作らなくても使えます。こうしたサービスは「プレイグラウンド」とも呼ばれます。
画面の見方と動かし方
画面は、次の4つの枠に分かれています。
| 枠 | 書くもの |
|---|---|
| HTML | ページの中身。body の中に書く部分だけ書けばよい |
| CSS | 見た目 |
| JavaScript | 動き |
| Result | 3つを合わせた結果が表示される |
コードを書いて「Run」ボタン（または Ctrl＋Enter、Macは Cmd＋Enter）を押すと、Result に結果が表示されます。たとえば、次の1つ目をHTMLの枠、2つ目をJavaScriptの枠に書いて Run すると、ボタンを押すたびに数が増えるページがすぐに確かめられます。
<button id="btn">押した回数：<span id="count">0</span></button>let count = 0;
document.getElementById('btn').addEventListener('click', () => {
count++;
document.getElementById('count').textContent = count;
});
結果が思ったとおりにならないときは、ブラウザの開発者ツール（F12）の「コンソール」を開くと、JavaScriptのエラーを確かめられます。
ライブラリを読み込む
jQuery や Vue、React などのライブラリも、画面の設定から選んだり、読み込み用のURL（CDNのURL）を足したりするだけで使えます。自分のパソコンで npm install をしなくても試せるので、新しいライブラリを少し触ってみたいときに便利です。
保存と共有
「Save」を押すと、書いたコードに専用のURLが付きます。そのURLを人に渡せば、相手も同じコードを開いて、動かしたり直したりできます。
- 質問するとき：
質問サイトで「このコードが動かない」と聞くときに、動かない部分だけを小さく切り出して保存し、URLを付けると、回答する人がすぐに確かめられます - ブログに埋め込むとき：
「Embed」で出るコードを貼ると、記事の中に動くサンプルを表示できます。中身は iframe で、使い方は「iframeの使い方」で紹介しています
保存したコードは公開される
保存したコードは、URLを知っている人なら誰でも見られます。次のようなものは貼らないようにします。
- APIキー、パスワード、アクセストークン
- 仕事で作っているコードや、社外に出せない情報
- 個人情報や、自宅サーバーのIPアドレスなどの構成
試すだけで保存しなければ、URLは作られません。
手元で試す方法との使い分け
| 方法 | 向いているとき |
|---|---|
| JSFiddle | 小さなコードをすぐ試したいとき。人にURLで見せたいとき |
| CodePen（似たサービス） | 見た目やアニメーションの作品を人に見せたいとき |
| VS Codeでファイルを作る | ファイルが複数あるもの、公開したくないもの、あとで自分のサイトで使うもの |
JSFiddleは「試し書きの紙」のようなものなので、動きを確かめたら、本番のコードは自分のパソコンで管理します。HTMLの基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- JSFiddleは、ブラウザだけでHTML・CSS・JavaScriptを書いてすぐに動かせるエディタ
- 書いて Run（Ctrl＋Enter）で、Result に結果が出る。エラーは開発者ツールのコンソールで確かめる
- ライブラリは設定から読み込める
- Save でURLが付き、質問やブログへの埋め込みに使える
- 保存したコードは公開されるので、キーやパスワード、仕事のコードは貼らない
コメント