簡単にコードを実装してシェアできる！超便利なjsFiddleの使い方

制作
2019-2-4
更新日: 2021-1-12
ogasawaramasami

みなさん、Webサイトを制作していて、コードの動作を確認したい時ってありますよね？
そんな時に、ローカルサーバーを立ち上げて、コードを書くというのは面倒ですよね。
ましてや、シェアしたい時に、ファイルを全部送って、相手にブラウザで開いてもらって、というのは尚更です。そんな時に役に立つのがjsFiddleです。
jsFiddleでは簡単にコードを実装して、それを共有することができます。
さらには、Webサイトにコードを埋め込むこともできます。
今回は、そんな超便利なjsFiddleについて解説します。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

jsFiddleってなに？

jsFiddleは、簡単にHTML、CSS、JavaScriptのコードが実装できて、その動作を確認できるWebサービスです。会員登録も不要で、無料で使うことができます。
ここからは、jsFiddleでできること、画面の見方、実際の使い方を見ていきたいと思います。

jsFiddleを使ってできること

具体的に、jsFiddleではどんなことができるのでしょうか？
できることを大きく分けると以下の２点です。

HTML/CSS/JavaScriptの動作チェック
書いたコードの保存・共有

実際にホームページなどを制作する過程では、テキストエディタに記述し、ブラウザで開いて確認するのが一般的でしょう。
しかし、一部の挙動だけを確認したり、誰かに意見を求めたりする際には、jsFiddleで必要な部分だけのコードを記述してシェアする方が簡単です。
ここからは、具体的な画面の使い方を見ていきたいと思います。

jsFiddleの画面の見方

まずはCreate a new fiddle – JSFiddleからjsFiddleを開いてみましょう。
すると、以下のような画面が開くと思います。

一つ一つ順番に説明していきます。

ファイルを保存したり、シェアをします。
画面の見え方などを変更します。
HTMLを記述します。
CSSを記述します。
JavaScriptを記述します。
記述されたコードの結果を反映します。

jsFiddleの画面の切り替え

右上の「Settings」をクリックすると、以下のようなメニューが開きます。

このメニューでは、jsFiddleの画面の見え方を切り替えることができます。
主に使うのは、一番上の「Editor layout」とその下の「General」です。
「Editor layout」では、HTML、CSS、JavaScriptの記述する場所、及び記述したコードの結果を反映する場所のサイズ、位置を切り替えることができます。
jsFiddleを使う際には、どのレイアウトでも問題ありませんので、お好みで選んでください。
本記事では、変更せずに進めます。
「General」では、画面の背景や行に数字を入れるなどを行うことができます。
こちらもお好みで変更してください。
本記事では、「Dark theme」と「Line numbers」にチェックを入れてみます。
すると、以下のように変更されました。

画面の背景が黒に変更されていることが分かります。
また、うっすらですが、赤い枠で囲ったところに、行の番号が表示されています。
では次にHTMLを記述する部分について見ていきましょう。

HTMLについて

通常、テキストエディタで記述する場合、headタグ、bodyタグを記述して、その中に様々なコードを書いていきます。
しかしjsFiddleでは、headタグ、bodyタグともに必要なく、bodyの中身から記述すればOKです。
また、「HTML▼」をクリックすると、ドックタイプやbodyタグのクラスを指定することができますが、基本はそのままで問題ありません。
次はCSSです。

CSSについて

CSSを記述する際は、テキストエディタに記述するのと同様に記述していきます。
「CSS▼」をクリックすると、SASSで記述するかなどを設定することができます。
次はJavaScriptにいきましょう。

JavaScriptについて

JavaScriptもCSSと同様に、テキストエディタに記述するのと同様に記述します。
また、ライブラリやフレームワークを使用したい場合は、「JavaScript▼」をクリックして、「FRAMEWORKS & EXTENSIONS」から使いたいものを選択することで、簡単に使用できます。
複雑な挙動であれば、ライブラリやフレームワークを使用するのが良いでしょう。

Resultについて

ここでは、HTML、CSS、JavaScriptを記述した結果を表示します。
その際には、まず左上の「Run」をクリックします。
すると、保存したコードの結果がResultに反映されます。
またその横の「Save」をクリックすることで、コードを保存することができます。
画面の見方は以上です。
jsFiddleは使い方もシンプルですよね。
それでは、実際にjsFiddleを使ってコードをシェアするところまでを実践して見ましょう。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

jsFiddleを実際に使ってみよう

本記事では、jsFiddleの説明を分かりやすくするために、ボタンが押された際の挙動を例に説明していきます。また今回は、SASSやライブラリ、フレームワークを使用せずに記述します。

HTMLを記述してみよう

ではまず、HTMLを記述していきます。
前述したようにjsfiddleでは、bodyタグの中身から記述できます。
今回は、例として以下のように記述します。

今回はシンプルにボタンのみを記述しました。

そして、このボタンに対して、CSSを記述していきます。

CSSを記述してみよう

CSSでは、例として以下のように記述していきます。

ボタンの色と位置を指定し、ボタンだとわかるように立体的になるようにしました。
また、ボタンが押された時に、ボタンをへっこませ、色を変えるようにしました。
さらに、ボタンの上にカーソルが乗った時にわかりやすいよう、cursorをpointerを指定します。
ここからはJavaScriptを記述していきましょう。

JavaScriptを記述してみよう

JavaScriptは、例として以下のように記述していきます。

letで変数を定義し、HTMLで記述したボタンのIDを取得します。
そして、ボタンがクリックされた時に、ボタンの文字を変更し、
カーソルをボタンから離すとボタンの文字を元に戻すよう記述します。
ここまでで、シンプルなHTML、CSS、JavaScriptを記述できました。
ここからは、記述したコードを反映していきましょう。

コードを反映してみよう

コードを反映するには、左上のメニューから「Run」をクリックします。
すると、Resultの部分に以下のようにコードの結果が反映されると思います。

このようにして、簡単にコードを反映することができます。
では、挙動が正常かを確かめてみましょう。
ボタンをクリックすると、以下のように表示されます。

そして、カーソルをボタンの上から離すと、元に戻ります。
確認ができたら、コードを保存、複製してみましょう。

コードを保存・管理しよう

コードを保存するには、「Save」をクリックします。
もしくは「command/Ctrl+S」でも可能です。
すると以下のように、URLに文字列が付与されていることが分かります。

さらに、以下のように左上のメニューに項目が追加されていることが分かります。

もしならない場合は、画面を再読み込みしてください。
次に、コードを管理する方法を見ていきましょう。

コードのバージョンを管理する

ここで、もう一度「Save」をクリックして、再度URLを確認してみましょう。
すると、以下のように変更されていることが分かります。

URLの後ろに「1/」が追加されました。
これ以降、「Save」をするとこの数字が更新され、バージョンを管理することができます。

コードを複製する

左のメニューから「Fork」をクリックし、URLを確認してみましょう。
すると以下のように全く別のURLになります。

今まで制作したものを複製したい時は、この「Fork」を使いましょう。

jsFiddleの注意点

ここで、jsFiddleを使う際の注意点があります。
コードを保存せずに、jsFiddleの画面を再読み込みしてしまうと、記述したコードが全て消えてしまいます。
これは画面を戻っても元には戻りません。
コードを追加、削除して再度反映したい場合は、必ず「Run」をクリックするようにしましょう。
あるいは「Save」をクリックしてバージョンを更新するようにしましょう。
それでは、次はコードのシェアの仕方です。

コードをシェアしよう

コードをシェアするには、URLを送信する方法と、Webサイトに埋め込む方法があります。
jsFiddleのURLはランダムな文字列なので、第三者が検索でたどり着くことはほぼありません。
しかし、URLを知っている人であれば誰でも確認できるので、公開してはいけない情報はjsFiddleに書かないようにしましょう。

コードをWebサイトに埋め込むには

コードをウェブサイトに埋め込むには、左メニューの「Embed」をクリックします。
すると、以下のようなメニューが表示されます。

「Tabs」では、共有する部分を選択できます。
デフォルトでは全て共有となっています。
「Visual」では、背景色を指定できます。
「Embed snippet:」に書かれているコードを貼り付けることで埋め込むことができます。
さらに、以下の赤く囲ったところをクリックすることで、iframeタグに変換することができます。