Vue.jsでTodoリストを作成

株式会社Pro-SPIRE　イノベーション推進センターの髙木です。

Javascriptフレームワークを利用すれば、シングルページアプリケーションが容易に作成ができます。
今回は、学習用途のため「Vue.js」を使用し、シンプルな「Todoリスト」を作成しました。

「Vue.js」

http://jp.vuejs.org/
※上記のリンクは外部サイトが別ウィンドウで開きます。

1.Vue.jsとは?

クライアントサイドのJavascriptフレームワークであり、他のjavascriptフレームワークと比べ、学習コストが低く、シンプルにコードが書けることが特徴です。

MVVM（Model View ViewModel）に基づいて設計されており、双方向データバインディングに特化しています。

双方向データバインディングにより、データ変更の際はUIが自動的に更新され、UIが変更されれば、データが自動的に更新されます。


■公式サイト
http://jp.vuejs.org/
※上記のリンクは外部サイトが別ウィンドウで開きます。

2.Todoリスト概要

・機能は、タスク登録機能、削除機能のみ
・DBは用意せず、localStorage APIを利用し、Todoリストのデータを保存

【使用ライブラリ】
・　jquery　2.1.3
・　vue.js 0.11.5

サンプルソースコードは、CodePen.で公開しています。

Todoリスト

■ソースコード
http://codepen.io/Angola/pen/zGmaBj
※上記のリンクは外部サイトが別ウィンドウで開きます。

■全画面リンク
http://codepen.io/Angola/full/zGmaBj/
※上記のリンクは外部サイトが別ウィンドウで開きます。

3. コード解説

3.1. localStorage APIでデータを保存、読み込み

var JsonData = []; // グローバル変数を宣言

if(window.localStorage){// localStorageが使用できるかチェック
 if(window.localStorage.getItem("JsonData")){// JsonDataがキーとしてあるかチェック
  var json = window.localStorage.getItem("JsonData");// JsonDataを取り出し
  JsonData = JSON.parse(json); // 文字列をオブジェクトに変換
 }
}

// localStorageに、キー名とオブジェクトをセット
function setLocalStorage(setKey , jsonData){
 var json = JSON.stringify(jsonData); //オブジェクトを文字列に変換
 window.localStorage.setItem(setKey , json);// オブジェクトをlocalStorageに保存
}

まず最初に、クライアントのブラウザがlocalStorageを使用できるかチェックを行います。keyとして
JsonDataが保存されていた場合、グローバル変数として宣言しているJsonDataにデータを格納します。

localStorageは文字列のみ保存ができるので、データを読み込む際は、JSON.parse(json)で文字列からオブジェクトへ変換する必要があります。

Todoリストのデータを保存する際は、setLocalStorageメソッドでkey名とオブジェクトを指定します。なお、オブジェクトをlocalStorageに保存する場合は、JSON.stringify(jsonData)で、オブジェクトから文字列へ変換を行います。


3.2. Vue インスタンスの生成

var vm = new Vue({
 el: '#Vue', //データバインディングの対象となる、DOM要素を指定
 data: { //モデルとなるオブジェクトを指定
  'list': JsonData, //localStorageに保存された、JsonDataをセット
  'todo' : '' //空のオブジェクトをセット
 } ,
 methods: {
  'push' : function(){
   this.list.push({'todo': this.todo}); // todoオブジェクトをlistに追加
   this.todo = ''; // taskオブジェクトを空にする
   setLocalStorage('JsonData' , this.list);// オブジェクトをlocalStorageに保存
  },
  'slice' : function(index){
   this.list.splice(index , 1);　// 指定されたインデックスの要素を削除
   setLocalStorage('JsonData' , this.list);// オブジェクトをlocalStorageに保存
  } ,
  'onKeydown' : function(e){
   if(e.keyCode === 13){ // Enterキーが押されると、pushメソッドが実行
    this.push();
   }
  } ,
  'clear' : function(){
   this.list = []; //list要素を全て空に
    setLocalStorage('JsonData' , this.list); // オブジェクトをlocalStorageに保存
  }
 }
});

Vue インスタンスを生成するときは、各オプションオブジェクトを渡す必要があります。

■Vue インスタンスオプション

オプション	説明
el	データバインディングの対象となるDOM要素を指定
data	ビューモデルが保持するデータ。このデータが更新される度にディレクティブに紐付いたDOMが更新されます。
methods	ビューモデルのメソッド。イベントハンドラと組み合わせて使用します。

オプションの詳細については下記公式サイトを参照してください。

■コンポーネントオプション（公式サイト）
http://jp.vuejs.org/api/options.html
※上記のリンクは外部サイトが別ウィンドウで開きます。

dataオプションでは、グローバル変数として宣言したJsonDataをlistに格納しています。
このlistにTodoリストのデータを保存していきます。

■methodsオプションで定義したメソッド
push()・・・タスクを追加するメソッド
slice()・・・指定したindexのタスクを削除するメソッド
onKeyDown()・・・Enterキーが押されると、push()を呼ぶメソッド
clear()・・・listを空にするメソッド

3.3 html

<div class="box" id="Vue">
<div class="clerafix mb10">
<input type="text" v-model="todo" class="w300 inpTxt01" v-on="keydown : onKeydown">
<button class="inpBtn01" v-on="click : push">追加</button>
<button class="inpBtn02" v-on="click : clear">全て削除</button>
</div>
<ul class="lastItem todoList">
<li v-repeat="list">
{{$index + 1}}.<span class="ml10">{{todo}}</span>
<a class="disRight" href="javascript:void(0)" v-on="click : slice($index)">削除</a>
</li>
</ul>
</div>

■Vue ディレクティブ
Vue.js のディレクティブは、デフォルトで「v-」という接頭辞のついた HTML 属性の形で設定されています。 Vue.jsでは、mustache記法を使用し、テキストと属性にバインディングを行うことができます。

例：mustache記法サンプル

{{name}}

ディレクティブ	説明
v-model	input 要素に双方向バインディングを作成。inputイベントごとにデータが同期。
v-on	要素に対して、イベントハンドラを割り当てる。
v-repeat	DOM要素を繰り返し生成できる。データは配列かオブジェクトのみ可能。

ディレクティブの詳細については下記公式サイトを参照してください。

■ディレクティブ（公式サイト）
http://jp.vuejs.org/api/directives.html#リアクティブディレクティブ
※上記のリンクは外部サイトが別ウィンドウで開きます。

テキストフィールドには、v-modeｌ="todo"が指定しており、dataオプションのtodoとバインディングが自動的に行われます。

v-onで指定したkeydownのイベントハンドラにより、onKeydownメソッドが呼び出され、listにtodoのデータが追加されます。

追加、削除ボタンに関しても、v-onで指定したイベントが呼び出され、listのデータが更新されます。

Todoリストのデータは、v-repeat="list"により、一覧表示しています。listの要素が増減する度に自動的にUIの更新が行われます。

4.雑感

今回は、「Vue.js」を利用し、「Todoリスト」を作成しました。シンプルで学習コストが低いことは大きなメリットです。業務で使用するフレームワークの選択肢の一つとして十分に活用できるかと思います。