JSFiddleでvue.jsを１分以内に書き始める方法
こんにちは。今回はjavascriptのライブラリをオンライン上で手軽に試すことができるサービス「JSFiddle」でvue.jsを簡単に使用する手順を解説します。
まずはJSFiddleにアクセスしてみよう
まずはJSFiddleにアクセスします。
アクセスすると空のHTML、CSS、JSのエディタが表示されます。これらの枠内にコードを記述すると右下に生成されたWEBページが表示されるという仕組みになっています。初期状態では何もライブラリが組み込まれていませんので、まずはVue.jsを使える状態にしたいと思います。
Vue.jsを使える状態にする
左下の枠がJavaScriptのコードを記述する枠です。その枠のタイトルが[JavaScript + No-Library]と表示されていると思います。これは文字通り何のライブラリも入れていないことを表しています。このタイトルをクリックしましょう。
ポップアップが表示されますので、[LANGUAGE]のドロップダウンからVueを選択します。
これでVueを使用する準備が整いました。Vueをnewして使用することができます。
ここで一つ煩わしいのは、Vueをnewするコードを自分でイチから記述しなければならないことです。この手間を省く方法が用意されているので次の章で紹介したいと思います。
ボイラープレートでコーディングの手間を省略する
JSFiddleには選択したライブラリで簡単なコードを生成してくれるボイラープレートという機能があります。この機能を使えば最低限のコードは生成されるので、自身はアプリケーションのコードに集中することができます。画面上の少し分かりづらい位置にあるので、画像付きで解説します。
画面左上の雲のようなアイコンをクリックします。
青い背景のナビゲーションが広がり、Start with a boilerplateのメニューが表示されます。Vueを選択します。
すると簡単なTodoリストアプリのコードが生成されます。JavaScriptの部分にVueの骨格が出来上がっていますので、このコードを改造して自身がやりたいことを試しましょう。
まとめ
今回はJSFiddleでVue.jsを最速で始める方法を解説しました。ボイラープレートは今回効率化の観点で紹介しましたが、初めて触るライブラリの学習にも役に立つでしょう。
JSFiddleは作成したコードを保存し、Web上ですぐに共有することができます。大変便利ですので、是非とも活用していただきたいプラットフォームです。