Vue.jsでTO DOアプリを作る #JavaScript

はじめに

チュートリアルの鉄板であるTO DOアプリを作成していきます。

テンプレートを用意する

雛形となるHTMLとJSを作成します。

todoディレクトリを作成して、その中にindex.htmlとindex.jsを作成します。

todo/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>TO DOアプリ</title>
    </head>
    <body>
        <div id="app">
          <!-- ここにVueインスタンスを展開する -->
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
        <script src="./index.js"></script>
    </body>
</html>

続いてVueインスタンスを作成する。

todo/index.js

var app = new Vue({
  el: '#app'
})

入力フォームとメソッドの追加

form要素の中に入力フォームとボタンを追加する。

<div id="app">
    <h2>TODO List</h2>
    <form>
        <input type="text">
        <button>
          追加
        </button>
    </form>
</div>

続いてbutton要素にv-on:clickを設定する。

buttonがクリックされたらaddItemメソッドを呼び出す。

<button v-on:click="addItem">

VueインスタンスにaddItemメソッドを記述する。

一旦、正常に動いているか確認するため、アラートを表示させてみる。

var app = new Vue({
  el: '#app',
  // メソッド定義
  methods: {
    addItem: function(event) {
      alert()
    }
  }
})

次にbuttonをクリックした時にsubmitイベントが発動して、ページがリロードされるのを防ぐ処理をformに記述する。

preventはデフォルトの動作を停止させる。

<form v-on:submit.prevent>

TO DOリストにタスクを登録

input要素にv-modelを記述して双方向データバインディング出来るようにする。

これで、inputに入力した値がdataオプションで定義するプロパティと同期する。

<!-- v-modelを定義 -->
<input type="text" v-model="newItem">

dataオプションにnewItemと、入力した値(todoのタスク)を保存する配列todoを定義する。

var app = new Vue({
  el: '#app',
  data: {
    newItem: '', // 入力フォームと双方向データバインディング
    todos: [] // 入力したtodoを保存する配列
  },
  methods: {
    addItem: function(event) {
      alert()
    }
  }
})

さらに、入力フォームで入力した値を配列に保存できるようにaddItemメソッドを書き換える。

プロパティにはthis.プロパティ名でアクセスできる。

このthisはVueインスタンスを指す。

var app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    todos: []
  },
  methods: {
    addItem: function(event) {
      var todo = {
        item: this.newItem // todoオブジェクトに入力した値を保存
      }
      this.todos.push(todo) // todoを配列に追加
    }
  }
})

TO DOリストの改善

buttonをクリックしてタスクを追加した後に、inputに文字列が残ってしまうため、文字列をクリアにする記述をする。

さらに、空の文字列を保存するのを防ぐための処理を記述する。

methods: {
    addItem: function(event) {
      // 追加
      if (this.newItem === '') return // 空の文字列の場合はここで処理を終える
      var todo = {
        item: this.newItem
      }
      this.todos.push(todo)
      // 追加
      this.newItem = '' // 入力フォームの文字列をクリア
    }

TO DOリストの表示

HTML側でリスト表示させる記述をする。

v-forディレクィブを使って繰り返し処理をする。

<div id="app">
    <h2>TODO List</h2>
    <form v-on:submit.prevent>
        <input type="text" v-model="newItem">
        <button v-on:click="addItem">
          追加
        </button>
    </form>
    <!-- 追記 -->
    <ul>
        <li v-for="todo in todos">
            {{ todo.item }}
        </li>
    </ul>
    <!-- 追記 -->
</div>

タスクの完了と未完了の実装

タスクの完了と未完了を管理するチェックボックスを設定する。

addItmeメソッドの変数todoを編集する。

チェック済みかどうか判定するisDoneを追加し、初期値をfalseに設定する。

var todo = {
  item: this.newItem,
  isDone: false // 追加
  }

次に、HTMlにチェックボックスを追加し、v-modelディレクティブにtodo.isDoneを双方向データバインディングさせる。

これで、チェックされるとisDoneがtrueになる。

<ul>
    <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.isDone">
        <span>{{ todo.item }}</span>
    </li>
</ul>

タスクの削除を実装

登録したタスクを個別に削除するため、配列のindexを取得する。

v-for="(値, index) in 配列"で配列のindexが取れる。

続いて削除ボタンを追加し、タスクを削除するメソッドdeleteItemを定義する。

deleteItemメソッドの引数には配列のindexを持たせる。

<ul>
    <li v-for="(todo, index) in todos"> <!-- indexの取得 -->
        <input type="checkbox" v-model="todo.isDone">
        <span>{{ todo.item }}</span>
        <!-- 追加 -->
        <button v-on:click="deleteItem(index)">Delete</button> 
    </li>
</ul>

続いてdeleteItemメソッドを定義する。

配列から要素を削除するJavaScriptのspliceメソッドを使用して、登録されたタスクを削除する。

methods: {
    addItem: function(event) {
    // 〜省略〜
    },
    //追加
    deleteItem(index) {
      this.todos.splice(index, 1) // sprice(削除を始めるindex, 削除する長さ)
    }
  }

まとめ

DOMの取得やデータの更新を意識することなく書けるので、コードの見通しがスッキリする。

そして、データバインディング楽しい

更新履歴

Vue.jsの基本的な使い方まとめ
 Vue.jsでTO DOアプリを作る今ココ
Vue.js テンプレート制御ディレクティブまとめ
 Vue.js 算出プロパティとメソッドの違い