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

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

jsFiddleってなに？

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

jsFiddleを使ってできること

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

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

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

jsFiddleの画面の見方

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

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

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

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を使ってコードをシェアするところまでを実践して見ましょう。

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タグに変換することができます。

今回は、「Tabs」はデフォルト、「Visual」はDarkにし、iframeで埋め込みをしてみます。
すると、以下のように表示が変更されます。

このiframeタグを埋め込みます。
すると以下のようになります。

このようにコードの記述から保存、シェアまで全て簡単に行うことができます。
是非開発に役立ててください。

まとめ

今回は、jsFiddleの使い方に関して解説しました。
jsFiddleはコードの一部の挙動を確認したり、シェアして意見を求めたりする際に、非常に便利なツールです。
jsFiddleを使って、制作を効率化しましょう。

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

---

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

自社サイトのウェブアクセシビリティ状況、診断してみませんか？

株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されています。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。

こんなお悩みはありませんか？

• どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
• 今のサイトで問題のあるページを一覧化して欲しい…
• ウェブアクセシビリティの具体的な改善方法を知りたい…

WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。

また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！

ウェブアクセシビリティ診断のお申し込みはこちら