Vue.jsではじめるMVVM入門
engineering

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)を介して行うアーキテクチャのことです。

https://jp.vuejs.org/images/mvvm.png

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 様々な機能がありますので興味のある方は公式のドキュメントを参照してみてください。

Related Articles