お手軽!Vue.js導入手順

こんにちは!kossyです!


さて、今回は流行りのJavaScriptライブラリである、Vue.jsをCDNで導入する手順と、簡単な使い方だけご紹介します。
(この記事では、まずは導入して動かし体感する、ということに重きを置いているため、細かい機能の説明は割愛しています。)



Vue.jsってなに?何ができるの?


Vue.jsはJavaScriptのライブラリで、Evan Youという方が開発し2014年に初版がリリースされています。
てっきり2年くらい前にリリースされたのかと勝手に思っていましたが、既に世に出てから4年が経過しているライブラリになります。

ちなみに、同じJavaScriptのライブラリとして比較されるReact.jsは、2013年に初版がリリースされています。


Vue.jsは、一部のページを動的に切り替えることができる、SPA(シングルページアプリケーション)を実装することができます。
React.jsもSPAを構築することができますが、Vue.jsと比べ、学習コストが高いと言われているようです。
また、他のライブラリを組み合わせて自分好みで自由に実装できる点も、React.jsとは異なっていると言えそうです。

参考にしたサイト:
Vue.jsとは?人気急上昇のJavaScriptフレームワークを解説 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
他のフレームワークとの比較 — Vue.js




Vue.jsの導入

Vue.jsはCDNで導入することが可能なので、
jQueryのようにお手軽に導入することができます。

より高度なアプリケーションを構築する場合は、別のツールを使って環境構築をする必要がありますが、
APIを使ってデータを取得しブラウザに表示するくらいであれば、CDNでも問題ないと思います。


CDNのソースは、以下のページのCDNの項に記載されています。
https://jp.vuejs.org/v2/guide/installation.html


コピーしたソースを、index.html (ファイル名は任意)のbodyタグの終了の直前で読み込んで、
Vue.jsのコードを記載するmain.js(ファイル名は任意)も読み込めば導入は終了です。


Vue.jsのざっくりとした使い方

コードを書いていきます。


Vue.jsでは、Vue 関数で新しい Vue インスタンスを生成することによって起動します。

main.js

var app = new Vue ({
 el:"#app"
})

ここで生成したVueインスタンスをHTMLに渡すことで、
Vue.jsが動作する領域を生成することができます。

index.html

<div id="app">

</div>

div id="app"~/divの領域以外のところにVue.jsの処理を記述しても、
領域外になり、動作しませんので、気をつけましょう。

あとはmain.jsに処理を記述し、index.htmlに表示するという流れが基本になります。

例えば、

main.js

var app = new Vue ({
  el:"#app",
  data: {
    message: "lorem ipsum"
  }
})

index.html

<div id="app">
  {{ message }}
</div>

と記述し、ブラウザで開くと、

f:id:kossy-web-engineer:20180921055215p:plain

通常のHTMLであれば、{{}}が表示されそうですが、表示されていません。
これは、マスタッシュ(口ひげ)構文と呼ばれ、messageプロパティで生成したlorem ipsumというテキストを、
HTML上でデータバインディングし展開するために用いられるものです。




また、フォームに入力した値を、リアルタイムで変更することもできます。

index.html

<div id="app">
    <input type="text" v-model="message">
    <p>
      {{ message }}
    </p>
  </div>

と記述し、ブラウザで動作を確認してみます。
f:id:kossy-web-engineer:20180921062607g:plain


リアルタイムで値を変更することができています。
これは、inputタグに追記したv-modelディレクティブによって実現できています。
inputタグやtextareaタグにv-modelディレクティブを用いることによって、
フォーム入力の値をデータバインディングすることができます。


まとめ

導入もお手軽でコードも簡潔なので、
コードを書いて動作させる喜びを知るにはうってつけだと思います。




参考にしたサイト
Vue.js 公式ガイド
https://jp.vuejs.org/

Vue JS入門決定版!jQueryを使わないWeb開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ(有料)
https://www.udemy.com/learn-vuejs/