この記事では、jsFiddleの画面の概要について、学習します。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。
jsFiddleのサイトをWebブラウザで開く
Webブラウザでjsfiddle.netを開いてください。
Webブラウザは、本質的ではない部分でトラブルが発生しないために、Google Chromeを使うことをおすすめしています。
動画で学ぶ
初期操作
JSFiddleを開いたら、
Closeを押して、作業領域を広くします。
いまは、黒い画面、Darkテーマになっているのですが、
動画で皆さんが見やすいように、明るいテーマに変更をしておきます。
Settings > Dark テーマ をOFFにしします。
テーマは、各自の好みで構いません。
HTML 入力欄について
このHTMLと記載がある入力欄には、Vue.jsのテンプレート記述します。
もう少し補足すると、
ここには、HTMLのbodyタグの要素の内容を記述します。
HTMLタグとか、ヘッダーなどは、JSfiddleが、自動的に生成するので書く必要はありません、
JavaScript入力欄
JavaScriptの欄には、JavaScriptを記載します。
jsファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。
CSS入力欄
JavaScriptの欄には、CSSを記載します。
CSSファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。
出力欄
この部分には、
書いたコードの出力が表示されます。
RUNボタン押すと、書いたコードが描画されます。
デベロッパーツールで、HTMLを確認してみましょう。
iframeで、開発者が書いたWebページを表示していることが分かります。
おわりに
もう少し詳しい使い方や、便利な使い方については、あとのレクチャーで随時紹介していきます。
実際に使ってみたほうがイメージしてが着くと思いますので、つぎのレクチャーから、実際にはコードを書いてきましょう。
この記事では、このレクチャーでは、JSFiddleの画面について概要を学習しました。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
が、プログラミング学習にとてもおすすめです。
請求書を1クリックで出力するマクロを作成！文系・非IT職もできるプログラミング](https://img-c.udemycdn.com/course/480x270/1506696_eace_3.jpg)