jQueryはもうしんどい…フレームワーク初心者ならVue.jsから始めてみたら？

2016年7月21日：記事更新。Vue.js 1.0.xをカバーし、コンポーネント部分を追加しました。

Vue.jsは、MVVM（Model-View-ViewModel）アーキテクチャパターンを使用したWebアプリケーションの組み立てを助けてくれるJavaScriptライブラリーです。はじめはAngularJSとよく似ていると思いましたが、一度使ってみるとVue.jsはシンプルで使いやすいだけでなく、フレキシブルであることにも気づきます。

今回は初心者向けの記事として、Vue.jsの基本コンセプトと重要な特徴を含めた全体像を説明します。

Vue.js 1.0.xはいくつかシンタックスの変更があり、Vue.js 0.12.xと互換性がありません。初期バージョンを使ったことがある人は、本記事の変更点にすでにお気づきかもしれません。すべての変更点の一覧はSitePointの記事『What’s New in Vue.js 1.0（Vue.js 1.0で変わったこと）』を参照してください。

Vue.jsを自分のページに追加

GitHubでVue.jsの最新版を入手できますが、CDNの方が簡単です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
</script>

View-Modelの作成

Vue.jsでは、Vueクラスを使ってView-Modelを作成します。View-Modelがよく分からない人は、ViewのModelデータを簡単に表示してくれるオブジェクトのようなものと考えてください（オブジェクトリテラルはModelとして、HTML UIエレメントはViewとして捉えられます）。

Viewの作成から始めて、View-Modelが機能する様子を説明します。今回は空の<div>を使用します。

<div id="my_view">
</div>

次はModelとなるオブジェクトリテラルです。JavaScriptコードを処理するので、<script>タグか別のJSファイルに作成するようにします。

var myModel = {
  name: "Ashley",
  age: 24
};

ViewとModelができたので、次は2つを一緒にしたView-Model（一例としてVue）を作成します。

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

見て分かるように、elプロパティはView（CSSセレクターであればどれを使用しても構いません）、dataプロパティはModelを指します。これでView-Modelは使用できる状態になりました。

Viewでモデルデータを表示するには、mustacheスタイル（2 重中括弧）のバインディングを使用する必要があります。たとえば、Modelのageプロパティを表示するには、Viewに{{ age }} 文字列を付け加えます。次のコードスニペットは、両方のModelのプロパティを使用しています。

<div id="my_view">
  {{ name }} is {{ age }} years old.
  <!-- Evaluated to "Ashley is 24 years old" -->
</div>

Modelに変更を加えても、すぐにViewで見られます。

双方向バインディングの作成

先ほど例にしたmustacheスタイルのバインディングは、one-way（一方向）のバインディングでした。Modelのデータのみを表示し、改変はしないという意味です。ViewにModelを編集させたい場合、代わりにv-modelディレクティブを使用して、Two-Way（双方向）のバインディングを作成します。

Viewを変更するとinput要素が含まれ、v-modelはnameプロパティを指します。

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name" />
  <p>{{ name }} is {{ age }} years old.</p>
</div>

この時点でインプットフィールドの値を編集すると、Modelはすぐに変更されます。

フィルターの使用

フィルターはディレクティブやmustacheスタイルバインディング内で使用できる機能です。フィルターはパイプ（|）のあとに続くものです。たとえば、nameプロパティを大文字で表示させたいとき、mustacheスタイルバインディングは下記のようになります。

{{ name | uppercase }}

この場合、フィルター用デモでテストもできます。

同様にlowercaseとcapitalizeのフィルターも使用できます。

次の項でフィルターについて詳しく説明します。

配列レンダリング

Modelに配列があるとき、リストの<li>要素にv-forディレクティブを追加して配列の中身を表示できます。Modelに配列を入れて確認します。

var myModel = {
  name: "Ashley",
  age: 24,
  friends: [
    { name: "Bob", age: 21 },
    { name: "Jane", age: 20 },
    { name: "Anna", age: 29 }
  ]
};

次のコードは、friends配列内、各オブジェクトのnameプロパティを表示する方法です。

<div id="my_view">
  <ul>
    <li v-for="friend in friends"> {{ friend.name }} </li>
  </ul>
</div>

要素のリストの順番を変えるには、v-forディレクティブにorderByフィルターを使います。たとえば、ageで要素を並べたいとき、コードは以下のようになります。

<div id="my_view">
  <ul>
    <li v-for="friend in friends | orderBy 'age'"> {{ friend.name }}</li>
  </ul>
</div>

条件付きでアイテムのレンダリングもできます。その際、filterByフィルターを使用してください。次の例は、nameフィールドに「a」があるアイテムのみをレンダリングする方法を示しています。

<div id="my_view">
  <ul>
    <li v-for="friend in friends | filterBy 'a' in 'name'"> {{ friend.name }} </li>
  </ul>
</div>

この3つ目のデモは、Two-WayデータバインディングとfilterByフィルターを使って、検索をシミュレーションしています。

イベントハンドリング

Vue.jsでViewと関連したイベントハンドリングが必要な場合、View-Modelのmethodsプロパティにイベントハンドラーを追記しないといけません。Vue.jsの全イベントハンドラーで、Modelデータのアイテムにアクセスするのにthisを使用できます。

次のView-Modelにはクリックハンドラーがあります。

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel,

  // A click handler inside methods
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});

View-Modelで定義されたイベントハンドラーをViewのUI要素と連動させるには、v-onディレクティブを使用してください。たとえば次のViewには、v-onディレクティブでmyClickHandlerを呼び出す<button>があります。

<div id="my_view">
  Name: <input type="text" v-model="name">
  <button v-on:click="myClickHandler">Say Hello</button>
</div>

これらのスニペット同士をまとめた結果は、クリックハンドラーのデモを確認してください。

コンポーネントの作成

Vue.jsではViewで使用できるカスタムHTML要素を作成できます。カスタムHTML要素を使うことで、分かりやすいだけでなく簡潔なコードになります。

カスタムHTML要素を定義し登録するために、Vueクラスのcomponentメソッドを使ってVueコンポーネントを作成しなければなりません。コンポーネントのtemplateプロパティでカスタムエレメントの内容を詳述できます。

こちらのコードスニペットで、<sitepoint>と名付けたシンプルなカスタムHTML要素を定義し、登録します。

Vue.component('sitepoint', {
  template: '<a href="https://www.sitepoint.com">Sitepoint</span>'
});

これで<sitepoint>要素は、ほかの標準HTML要素と同じようにViewで使えるようになりました。

<div id="my_view">
  <sitepoint></sitepoint>
</div>

一般的に標準HTML要素には関連属性があり、外見と機能をコントロールしています。Vue.jsで作ったカスタム要素も同様の属性があります。要素の属性を詳述するには、関連コンポーネントを作成する際にpropsプロパティを使用する必要があります。

こちらはchannelというプロパティを<sitepoint>要素に追記する方法です。

Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.sitepoint.com/{{ channel | lowercase }}">{{ channel }} @Sitepoint</span>',
});

上記のコードで分かるように、mustacheスタイルバインディングはtemplateのプロパティ値を埋め込むために使用しました。

<sitepoint>タグでchannel属性を自由に使えるようになりました。たとえば以下は、2つの別のSitepointチャネルをリンクさせる方法です。

<div id="my_view">
  <sitepoint channel="JavaScript"></sitepoint>
  <sitepoint channel="Web"></sitepoint>
</div>

デモで自由にコードを改良して、ほかのテンプレートやプロパティを試してみてください。

最後に

今回の初心者向けVue.jsの記事では、One-WayとTwo-Wayデータバインディング、ディレクティブ、フィルター、イベントの使い方を説明してきました。また独自のHTML要素をVue.jsコンポーネントを使って作成する方法も解説しました。

紹介したトピックは、シンプルなフレームワークでインタラクティブなWebインターフェイスを作成するのに十分な内容です。Ajaxサポートやルーティング操作など、より多くの特徴を知りたい場合、利用できるVue.jsプラグインがあるのでプロジェクトに使ってみてください。

Vue.jsについてもっと知りたい人は、Vue.js APIリファレンスやWebサイトのガイドをのぞいてみることをおすすめします。

（原文：Getting Started With Vue.js）

［翻訳：中野汐里］
［編集：Livit］