こんにちは、タマキと申します。
プログラミングを勉強していると、コードを書き始めるまでの準備が面倒なことってありますよね。
例えば
このような、はじめの準備って毎回同じことの繰り返しで面倒ですよね。
ちょっとJavascriptを試したいだけのときにいちいちこんな作業をするのって時間の無駄です。
JSFiddleというWebサービスを使えばいきなりコードを書き始めることができます。
JSFiddleの使い方
JSFiddleの使い方を説明します。といっても簡単です。
JSFiddleのページは下記のリンクからアクセス出来ます。
JSFiddleの画面の見方
まずは、JSFiddleの画面の見方について説明します。
JSFiddleは画面を４つに分割して
- HTML
- CSS
- JavaScript
- 結果
を同時に表示できるようになっています。
HTMLには、HTMLのbodyタグの中身を記述していきます。
HTMLタグやヘッダタグはJSFiddleが自動的に裏側で記述してくれますので記述は不要です。
CSSの部分にはCSSを記述していきます。
CSSの読み込み（<style>タグ）はJSFiddleが自動的に記述してくれますので記述は不要です。
JavaScript部分にはJavaScriptを記述していきます。
JavaScriptの読み込み（<script>タグ）はJSFiddleが自動的に記述してくれますので記述は不要です。
Runボタンを押すとコードの実行結果が表示されるようになっています。
基本的な使い方はこれだけ、簡単ですね。
コードを書くことに集中できます。
保存の方法
JSFiddleはコードを保存することもできます。
画面左上のSaveをクリックすることで保存ができます。
保存するとURLが発行されます。
こんな感じですね。
保存したデータにアクセスしたい場合にはこのURLにアクセスすると作成したコードが復元されます。
保存したデータを復元してコードを変更して再度保存したいというときには画面左上のUpdateをクリックすると新しいURLが発行されます。
ユーザー登録
保存したURLをいちいち控えておくのは面倒ですよね。
そんな場合にはユーザー登録をすることで、ログインすれば保存したデータの一覧を確認することができます。
JSFiddleはユーザー登録をすることができます、が必須ではありません。
ユーザー登録をするには、画面右上のSign inをクリック。
Sign in画面になりますが、まだユーザー登録していないので、Sign upをクリックします。
以下の３つを入力するだけでユーザー登録が完了します。
- Username
- Password
ユーザー登録は他のウェブサービスよりも簡単です。
コードを自動で整形
ネットからコードをコピペしたりするとインデントがバラバラになってコードが見にくくなることってありますよね。
JSFiddleは見にくくなったコードをキレイに整形してくれる機能があります。
Tidyをクリックすることでコードを見やすく整形してくれます。
JSFiddleの設定
JSFiddleの設定は画面右上のSettingsから変更が可能です。
テーマカラーを変更
デフォルトのテーマカラーは黒をベースにした色合いなのですが、白をベースにした色合いにも変更が可能です。
GeneralのDark themeがオンになっているので、こちらをオフにしましょう。
こんな感じで白をベースにしたテーマに変わりました。
実行結果を自動的に更新
Resultエリアに実行結果を反映させるには「Run」ボタンを押す必要がありますが、いちいち面倒ですよね。
JSFiddleにはコードを書き換えると自動的に実行結果を更新してくれる機能があります。
BehaviorのAuto-run codeがデフォルトではオフになっているのでオンにすると自動的に実行結果を更新してくれるようになります。
実行の都度コンソールをクリア
何度もコードを書き換えて実行しているとデベロッパーツールのコンソールの表示が増えていきます。
JSFiddleはコンソールを見やすくするためなどコンソールを実行の都度クリアすることもできます。
BehaviorのClear console on runをオンにするとコンソールの内容が実行の都度クリアされます。
JSFiddleを使ってプログラミングを学習しよう
JSFiddleを使えば面倒な作業をしなくても簡単にプログラミングを学習できます。
ちなみに僕はUdemyをつかってプログラミングを学習しています。
はじめてのJavaScriptプログラミング入門講座 | Udemy 
頻繁にセールをやっていて買い切りなので気軽にはじめられますよ。