【Vue 2】Vue.jsのはじめかた

Vue.js とは

Vue (発音は /vju:/、view と同様) は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他のモノリシックなフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリはビュー層だけに焦点を当てており、使い始めるのも、他のライブラリや既存のプロジェクトに統合することも容易です。一方で、Vue をモダンなツールやサポートライブラリ (opens new window)と組み合わせることで、洗練されたシングルページアプリケーションを開発することもできます。

参照： https://v3.ja.vuejs.org/guide/introduction.html

公式ドキュメントの文章にもあるように、近年ではシングルページアプリケーション（SPA）の需要が高まっているため、 これを簡潔に実装できるための Vue.js や React などはフロントエンド開発において必要不可欠なものになってきています。

SPA を実装する上で重要なことは、DOM 操作とデータの管理になります。 これらをただの JavaScript や JQuery などで実装するのは簡単なことではありません。

Vue.js では、SPA で重要な DOM 操作とデータの管理が簡単に実装ができます。 また「親しみやすい」、「融通が効く」、「高性能」と公式が謳っているくらい扱いやすいものとなっています。

Vue.js の導入

script による組み込み

導入方法の 1 つとして、script タグで Vue.js の js ファイルを組み込みます。

公式から js ファイルをダウンロードして読み込むか、CDN を介して読み込むかの 2 択があります。 js ファイルはこちらからダウンロードします。

以下は CDN の例です。 開発用と本番用はしっかり使い分けるようにしてください。 また、プロジェクトに導入する際はバージョンを指定するようにしましょう。

<!-- 開発用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<!-- 本番用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

NPM

バッケージ管理システムである NPM を用いてインストールします。 大規模な開発を行う場合は、こちらが推奨されています。

$ npm install vue

実際のところ、大規模な開発を行う場合は、公式が提供している「Vue CLI」や Vue.js のフレームワークである「Nuxt.js」を使うことが多いと思います。

直接、上記のコマンドでインストールことは少ないでしょう。

学習する上ではまず script による組み込みをおすすめします。

devtools

Vue.js の開発において、ディベロッパーツールは必要不可欠になります。 Google Chrome と Firefox のアドオンとして提供されているのでインストールしておきましょう。

Google Chrome：Vue.js devtools

Firefox：Vue.js devtools

Vue 3 について

上記の導入はすべて Vue 2 についてです。

執筆時点では Vue 3 のベーター版（3.0.0-rc.5）が公開されています。 Vue 3 を使用したい場合はこちらを参考にしてください。 くれぐれもベータ版であることはお忘れのないように。

Vue インスタンスの生成

Vue.js を使用する上で、最初に Vue のインスタンスを生成する必要があります。

<div id="app">
  <!-- -->
</div>

new Vue({
  el: '#app'
})

これにより#appの要素内では Vue.js が有効になります。

Vue 3 の場合は以下のようにインスタンスを生成します。

Vue.createApp({
}).mount('#app')

オプションオブジェクト

オプションオブジェクトは、Vue.js で管理するデータやメソッドなどを定義したもので、インスタンス生成時に引数として指定します。

オプションオブジェクトには以下のプロパティがあります。

el

elは、どの要素に対して Vue インスタンスを紐づけるかを指定します。上記の例では#appに紐づけています。 Vue 3 では不要です。

data

Vue インスタンスがもつデータを定義します。

new Vue({
  el: '#app',
  data: {
    counter: 0,
    message: 'Hello World!',
    url: 'http://hogehoge.com'
  }
})

Vue 3 では宣言方法が変わります。

Vue.createApp({
  data() {
    return {
      counter: 0,
      message: 'Hello World!',
      url: 'https://hogehoge.com'
    }
  }
}).mount('#app')

methods

Vue インスタンスがもつ処理（メソッド）を定義します。 例えばクリックなどのイベント処理を定義したりします。

dataのアクセスには、thisが必要なことに注意してください。 dataだけでなく、methodsなどの情報にアクセスする際もthisが必要になります。

new Vue({
  el: '#app',
  data: {
    counter: 0,
    message: 'Hello World!',
    url: 'https://hogehoge.com'
  },
  methods: {
    count() {
      this.counter++
    }
  }
})

computed

computedは算出プロパティと呼ばれ、dataを使い別のデータを作るといったイメージです。 わかりにくいと思うので、まずは以下の例をみてください。

new Vue({
  el: '#app',
  data: {
    counter: 0,
    message: 'Hello World!',
    url: 'https://hogehoge.com'
  },
  methods: {
    count() {
      this.counter++
    },
    doubleCount() {
      this.doubleCounter += 2
    }
  },
  computed: {
    doubleCounter: {
      get() {
        return 2 * this.counter
      },
      set(val) {
        this.counter = val / 2
      }
    },
    upperMessage() {
      return this.message.toUpperCase()
    }
  }
})

computedはget()とset()によって定義します。 get()はどのdataを使ってどのような値を返すか、set()はどのdataにどのような値を設定するかを定義します。

doubleCounterはcounterの 2 倍の値を返すデータとなります。 またdoubleCounterに値が代入された場合、半分の値をcounterに設定するようにしています。 つまりdoubleCounter = 4とすると、counter = 2となります。

upperMessageはmessageをすべて大文字にした値を返すデータとなります。 このような記述をした場合は、get()のみが定義されたことになるため読み取り専用のデータとなります。

methods と computed の違い

get()の処理はmethodsでも定義できますが、原則computedを使用します。 理由は、結果がキャッシュされるかどうかにあります。

例えばupperMessageをmethodsに定義した場合、upperMessage()と呼び出す度に内部の処理であるthis.message.toUpperCase()が実行されます。

computedの場合は、内部で使用しているmessageの値が変わらない限り内部の処理は実行されません。

この違いがあるためcomputedとして定義できるものは極力こちらを使うことが推奨されています。

データバインディング

上記で作成した Vue インスタンスの情報を、HTML 内に展開していきます。

テキスト

シンプルなテキストとして展開する場合は、Mustache 構文（{{}}）を使用します。

<p>{{ message }}</p>
<p>{{ upperMessage }}</p>

属性

HTML の属性に展開する場合は、v-bindを使用します。 v-bindは:と省略できます。

<!-- 省略なし -->
<a v-bind:href="url">My Page</a>
<!-- 省略あり -->
<a :href="url">My Page</a>

イベント

methodsをボタンなどのクリックイベントとして展開したい場合は、v-onを使用します。 v-onは@と省略できます。

<!-- 省略なし -->
<button v-on:click="count">count</button>
<!-- 省略あり -->
<button @click="doubleCount">double count</button>

ディレクティブ

上記で説明したv-bindやv-onは、ディレクティブと呼ばれます。 Vue.js では、その他さまざまなディレクティブを使って HTML への展開を行っていきます。