TODOリスト作成で覚えるVue.js - わにプログラミング

CRUDを一通り扱えるtodoリストの作成をすることでVue.jsの基礎を確認します

前提

今回はデータの保存も取り扱います。

Vue.jsのみでは、データの保持ができずリロード時にタスクがリセットされてしまうのでlocal storageを使いデータが維持できるようにしてみます

あくまでvue jsの勉強用のため、デザインは全く触れていません

作成物

動作は下記で確認できます

https://jsfiddle.net/34pvkryj/147/

コード解説

html

<!-- vue jsの読み込み -->
<script src="https://unpkg.com/vue"></script>
<!-- id(この例の場合app)はjs側のelで指定された名前に合わせる必要がある -->
<div id="app">
  <input v-on:keypress.enter="addTodo" v-model="input" type="text">
  <button v-on:click="addTodo">追加</button>
  <ul v-for="todo in todos">
    <li>
      <input v-on:change="doneTodo(todo)" v-model="todo.done" type="checkbox">
      <span v-bind:class="{'done': todo.done}">{{ todo.title }}</span>
      <button v-on:click="deleteTodo(todo)">削除</button>
    </li>
  </ul>
</div>

<li>

<span v-bind:class="{'done': todo.done}">{{ todo.title }}</span>

</li>

</ul>

</div>

htmlファイルでは<div id="〇">を用意することで、Vue.jsで扱う範囲の定義をします。

この〇にはVueインスタンスを作成する際のel名を記述する必要があります。

Vue.jsではhtmlに特殊な記述(v-)を使用することでループなどの様々な機能が実現できます。

今回は下記を使用しています。

v-for

v-forでは繰り返しを扱うことが可能です(jQueryでいう.each())

今回のケースでは変数todosを回すことで、タスクを表示させています。

このtodosは、js側で定義することになるので、あとでみていきます。

v-on

v-onは「クリックされた時」などのイベントを取り扱うことができます。

今回の例では、下記を使っています

v-on:change

<input v-on:change="doneTodo(todo)" v-model="todo.done" type="checkbox">：チェックボックスが押下された時に、タスク完了の切り替えを行う

v-on:click

<button v-on:click="addTodo">追加</button>

1	<button v-on:click="addTodo">追加</button>

「追加」ボタンクリック時にメソッドaddTodoを呼び出し、タスクを追加

<input v-on:keydown.enter="addTodo" v-model="input" type="text">

1	<input v-on:keydown.enter="addTodo" v-model="input" type="text">

タスク入力テキストボックスのエンター時にメソッドaddTodoを呼び出し、タスクを追加

<button v-on:click="deleteTodo(todo)">削除</button>

1	<button v-on:click="deleteTodo(todo)">削除</button>

削除ボタンクリック時にメソッドdeleteTodoを呼び出し、タスクを追加

v-bind

v-bindではデータに応じた属性の付与ができます

動的なclassの付け替えなどの用途で使われることが多いです

<span v-bind:class="{'done': todo.done}">{{ todo.title }}</span>

1	<span v-bind:class="{'done': todo.done}">{{ todo.title }}</span>

タスクのチェックボックス押下時にclass「done」の切り替え

v-model

このv-modelを使うことでVue.jsで扱うデータを動的に変更することが可能です。

この機能を使いこなすと、動的な検索などSPIに近いことができるため、非常に便利です。

今回のケースではタスク追加用のinputにv-modelを定義しています。

<input v-on:keydown.enter="addTodo" v-model="input" type="text">

1	<input v-on:keydown.enter="addTodo" v-model="input" type="text">

タスク入力欄に値を入れると、変数input(定義はjavascript側に書いています)の変数「input」が動的に変更されます。

css

li {
   list-style-type: none
}
.done {
  text-decoration: line-through;
  color: grey;
}

li {

list-style-type: none

}

.done {

text-decoration: line-through;

color: grey;

}

cssは特に書いていませんが、タスク完了時(チェックボックス押下時)のclassをdoneとして定義しているので

完了している場合にはタスクに打ち消し線が入るようになっています

javascript

new Vue({
  el: '#app',
  data: {
    input: '' ,
    todos: JSON.parse(localStorage.getItem('todos')) || [],
  },
  methods: {
    addTodo: function (event){
    	// 空の場合追加されないように
    	if (this.input){
      	this.todos.push({title: this.input, done: false});
        // 追加後にinputを空に
      	this.input = ''
        this.setTodos()
      }
    },
    doneTodo: function (todo){
        this.setTodos()
    },
    deleteTodo: function (todo){
    	var index = this.todos.indexOf(todo);
    	this.todos.splice(index, 1)
        this.setTodos()
    },
    // localStrageに保存
    setTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
      this.setTodos()
    }
  }
})

new Vue({

el: '#app',

data: {

input: '' ,

todos: JSON.parse(localStorage.getItem('todos')) || [],

methods: {

addTodo: function (event){

// 空の場合追加されないように

if (this.input){

this.todos.push({title: this.input, done: false});

// 追加後にinputを空に

this.input = ''

this.setTodos()

}

doneTodo: function (todo){

this.setTodos()

deleteTodo: function (todo){

var index = this.todos.indexOf(todo);

this.todos.splice(index, 1)

this.setTodos()

// localStrageに保存

setTodos() {

localStorage.setItem('todos', JSON.stringify(this.todos));

this.setTodos()

}

})

今回使っているもので重要なのは、dataとmethodsです

data

今回dataにはinputとtodosの2つの変数を定義しています

input: ''

input: ''

タスクの入力欄に入力されたものがこちらに格納されます。初期状態では「空」を定義

todos: JSON.parse(localStorage.getItem('todos')) || []

1	todos: JSON.parse(localStorage.getItem('todos')) \|\| []

このtodosに登録されているものがタスク一覧として表示されます。

最初のロード時にはlocalStorageに値があるか確認し、なければ空の[]を定義しています。

methods

methodsには関数(function)を定義します。

今回はaddTodo、doneTodo、deleteTodo、setTodosの4つのメソッドを定義しています

addTodo

タスクの追加を行うメソッドです。

if (this.input)の記述で、入力が空の場合にはタスクが作成されないようにしています。

this.setTodos()でLocalStrageへ保存。

doneTodo

チェックの付け替えやdone値の変更はv-modelの機能で行なっているので、this.setTodos()でLocalStrageへ保存のみ行います。

deleteTodo

deleteTodoではタスクの削除を行っています。

こちらも削除を維持するためにthis.setTodos()でLocalStrageへ保存をします。

setTodos

LocalStrageへの保存処理を行うメソッドです。

まとめ

Vue.jsはあまり癖もなく、とっつきやすい印象を受けます。

SPAを始めるにはとても良さそうです。

以上、Vue.jsを使ったTODOリストの作り方でした。