Vue.jsではじめるMVVM入門

Vue.js 概要

Vue.js とは

Vue.jsはMVVMと呼ばれる設計パターンを採用しているJavascriptフレームワークです。
MVVMフレームワークでは Model、View、 ViewModel の3つでアプリケーションを構築します。

Vue.js の特徴

Vue.jsは双方向データバインディングを実現することに特化しているため、jQuery を使うととても複雑になってしまう処理をシンプルかつわかりやすく書くことができます。

AngularJSはフルスタックなフレームワークで、何でもできますが、独特な文法や制約によって学習コストが高いとされています。
一方でVue.jsは、軽量で他のライブラリに依存しないため、必要なところだけ Vue.js でさくっと作って、後は他のライブラリやフレームワークを組み合わせて使うという方法も可能です。

Vue.js がサポートするブラウザ

Vue.js がサポートするブラウザは最近のモダンブラウザのみです。
Internet Explorer 8 以下には対応していないため実際に使う際にはサポートブラウザを確認しましょう。
(実装にECMAScript 5の機能が使われており、これをサポートしているブラウザで動作するようになっています)

Vue.js における MVVM

MVVMとは?

MVVMとはモデル(M)とビュー(V)間のやり取りをビューモデル(VM)を介して行うアーキテクチャのことです。

ViewModel

ViewModel とは Vue.js のインスタンスのことです。
View と Model をとりもつオブジェクト。

Model

Model とは dataオブジェクト と methodsオブジェクト のことです。
dataオブジェクトの属性は v-text や v-model といったディレクティブによってバインドされます。

View

View とは el で指定されたDOM要素のことです。
elでDOM要素を指定することで、ViewModel の適用範囲を指定できます。

TODOアプリをつくってみる

完成品の確認

今回は CodePen を使って実装してみます。Codepen の設定は下記を参考にしてください。

  1. Codepen にアクセス
  2. 画面右上の「New Pen」をクリック
  3. JSパネルの設定アイコンをクリック
  4. Add External Javascript に http://cdn.jsdelivr.net/vue/1.0.24/vue.min.js と入力します

ViewModelを作成

new Vue({

});

画面を作成

<div id="my-app">
  <p>
    NewTask:
    <input type="text">
    <button>Add</button>
  </p>
  <hr>
  <ul>
    <li>
      <input type="checkbox">
      牛乳を買う
      <button>Delete</button>
    </li>
    <li>
      <input type="checkbox">
      プロテインを買う
      <button>Delete</button>
    </li>
    <li>
      <input type="checkbox">
      スポーツドリンクを買う
      <button>Delete</button>
    </li>
  </ul>
</div>

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul > li {
  margin: 5px;
  text-indent: 0;
}

Model をかいていく

todoリストの登録

  data: {
    todos: [
      { task: '牛乳を買う', isCompleted: false },
      { task: 'プロテインを買う', isCompleted: false },
      { task: 'スポーツドリンクを買う', isCompleted: true }
    ]
  },
  methods: {
  }

登録した todoリストを表示してみる

ディレクティブとは

View をコントロールするための特殊なコマンドです。
Vue.js では v-*** ではじまる属性を記述することで様々な処理ができます。

v-for

配列をレンダリングするためのディレクティブ。
形式は item in items

<li v-for="todo in todos">
  <input type="checkbox">
  {{ todo.task }}
  <button>Delete</button>
</li>

v-model

form input 要素で双方向データバインディングするためのディレクティブ。
Checkbox で使用する場合は boolean 値が返ります。

<input type="checkbox" v-model="todo.isCompleted">

v-bind

html の属性値をバインドするためのディレクティブ。
v-bindは省略することも可能です。

<span v-bind:class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
ul > li > .complete {
  text-decoration: line-through;
  color: #ddd;
}

todo を追加できるようにする

フォームから todo を追加するための data を追加する。

<input type="text" v-model="newTask">
data: {
  newTask: '',
}

v-on

イベントを取得するためのディレクティブ。
@を使って省略することも可能です。

Add ボタンをクリックした時の method を追加する。

<button v-on:click="addTask()">Add</button>
methods: {
  addTask: function() {
    this.todos.push({
      task: this.newTask,
      isCompleted: false
    });
    this.newTask = '';
  }
}

todo を削除できるようにする

$remove

Vue.js で配列の要素を削除するためのメソッド。

Delete ボタンをクリックした時の method を追加する。

<button v-on:click="deleteTodo(todo)">Delete</button>
deleteTodo: function(todo) {
  this.todos.$remove(todo);
}

todo の数を表示する

computed property

複雑な計算が必要な場合は computed プロパティを使用する。

todo の数を表示するための view を追加する。

<p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p>

todo の数を表示するための computed property を追加する。

computed: {
  remains: function() {
    var count = 0;
    for(var i=0; i<this.todos.length; i++) {
      if(!this.todos[i].isCompleted) {
        count++;
      }
    }
    return count;
  }
}

これで一通りの機能はできましたがさらに使いやすくするためにいくつか機能を追加してみます。

新規登録フィールドが空の時は登録できないようにする

addTodo: function() {
      if( this.newTask == '' ) return;
      ...
}

エンターキーを押すだけで新規タスクが登録できるようにしてみる

<input type="text" v-model="newTask" v-on:keyup.enter="addTask()">

このように Vue.js を使うとデータバインディングやユーザのインタラクションによって表示の出し分けなどが簡単に実装できます。
今回は Vue.js の基本的な機能のみに絞って使い方を解説してみましたが、この他にも Vue.js 様々な機能がありますので興味のある方は公式のドキュメントを参照してみてください。