たった4ステップでVueを使う方法

本来Vue.js(以下Vue)は、JavaScriptによるコンポーネントベースのアプリケーション構築が得意です。
特に状態管理によるUIの切り替えが完結にかけるので、非常に強力です。
しかし、このように話すと難しいのではという印象がありますが、
Reactなどと違い、実は非常に簡潔に、わかりやすくコードが書けるように設計されています。

強力なVueの機能

簡単な例で説明します。
以下のようにJavaScriptでA,B,CそれぞれがtrueかfalseかをもつBooleanを定義したとします。

data: {
  isA: true,
  isB: false,
  isC: false,
}

それをチェックボックスのdataに紐付けます。
v-modelというのがVue特有のデータとHTMLを紐付ける仕組みです。

<input type="checkbox" v-model="isA" />
<input type="checkbox" v-model="isB" />
<input type="checkbox" v-model="isC" />

そうすると以下のコードを書くだけで、
A,B,Cのいずれかがチェックされると表示するようになります。
v-ifという属性がデータのboolean値により表示を切り替える仕組みです。

<div v-if="isA">Aが表示されました。</div>
<div v-if="isB">Bが表示されました。</div>
<div v-if="isC">Cが表示されました。</div>

このように、動的に変化する値に応じて、UIを変えることが非常に簡単に実現できます。

最も簡単な導入方法

この記事では、既存サイトでも最も簡単に導入できるCDN(コンテンツデリバリネットワーク)方式を説明します。
ステップは以下です。

1. head内にVue.jsを挿入
2. Vueを使いそうな箇所にidを設定
3. 自分で用意したJavaScript内でVueを実行
4. v-cloakを設定する

head内にVue.jsを挿入

本番サイトを想定して、最新の固定バージョン(2019/8/15日最新バージョン2.6.10)のvueをhead内で読み込ませます。
最新のバージョンや開発バージョンを使いたい場合は公式サイトを参考にしてください。

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

合わせて、Vueを使うためのJavaScriptファイルをbodyの最後で読み込みます。
名前は仮にyour-js-file.jsとしています。

  <script src="./your-js-file.js"></script>
</body>

Vueを使いそうな箇所にidを設定

指定する要素の中にHTMLが存在していても問題ないです。
よくわからなければ、bodyにidを設定しましょう。

<div id="app">
  <p>ここに既存のHTMLが存在していても問題ありません</p>
</div>

自分で用意したJavaScript内でVueを実行

先程用意したyour-js-file.jsでVueを実行しましょう。
HTML内からVueの機能を使うには、このnew Vueの中にデータを記述する必要があります。
参考として、先程のdataを記述しています。

new Vue({
  el: "#app",
  data: {
    isA: true,
    isB: false,
    isC: false,
  }
})

v-cloakを設定する

そのままだと、HTML内のVueの機能を使った箇所が一瞬そのままレンダリングされてしまいます。
例えば、ブラウザ表で一瞬{{ isA }}とそのまま表示され、その後すぐにtrueに切り替わります。
これを防ぐために、Vueが用意しているv-cloak属性を利用して、JavaScriptが読み込まれるまで要素を非表示にします。
ここでは、上で付与したid="app"の箇所にv-cloakを設定しました。

<div id="app" v-cloak>
</div>

CSSの記述も必要です。
既存のCSSに追加するか、CSSファイルを作成し、head内で読み込ませましょう。

[v-cloak] {
  display: none;
}

以上で完了です。

これからJavaScriptを学びたいといった方も、Vueの強力な機能を使いながら、少しづつ勉強してくと楽しいかと思います。
Happy coding JavaScript!