【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-3）

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その2としてVueインスタンス以外のコードを見ていきました。localStorageを読み込む箇所も見受けられました。今回がラスト。Vueインスタンス本体を見ていきます。それではいきましょう！

【目次】

Todoリスト完成品とVueインスタンス全体像
Vueインスタンス詳細
最後に

※前回：【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-2） - クモのようにコツコツと

Todoリスト完成品とVueインスタンス全体像

Todoリスト完成品

See the Pen Vue de Localstarage by イイダリョウ (@i_ryo) on CodePen.

Vueインスタンスの全体像

// app Vue instance
var app = new Vue({
  // app initial state
  data: {
    //処理
  },

  // watch todos change for localStorage persistence
  watch: {
    //処理
  },

  // computed properties
  // http://vuejs.org/guide/computed.html
  computed: {
    //処理
  },

  filters: {
    //処理
  },

  // methods that implement data logic.
  // note there's no DOM manipulation here at all.
  methods: {
    //処理
  },

  // a custom directive to wait for the DOM to be updated
  // before focusing on the input field.
  // http://vuejs.org/guide/custom-directive.html
  directives: {
    //処理
  }
})

Vueインスタンス以外のJSコードについては「JS編-2」を参照。

※参考：【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-2） - クモのようにコツコツと

Vueインスタンス詳細

Vueインスタンスの詳細を見ていく。

まず冒頭は変数appでVueインスタンス作成。

// app Vue instance
var app = new Vue({
    //処理（中略）
})

一番最後の行の閉じ括弧までが一括り。この中に処理を書く。連想配列になっているのでキー（Vueオプション）になっている。キーごとにみていく。

dataオプション

一つ目はdataオプション。冒頭コメントの和訳。

アプリ初期状態

  // app initial state
  data: {
    todos: todoStorage.fetch(),
    newTodo: '',
    editedTodo: null,
    visibility: 'all'
  },

dataキーの値は連想配列
todosキーの値todoStorageのfetch()
newTodoキーの値は空
editedTodoキーの値はnull
visibilityキーの値はall

データの初期値をいろいろ設定してある。todosキーの値に「JS編-2」のtodoStorageのfetch()が出てきた。ここに取得されているlocalStrageの値をtodosに入れるわけだ！

newTodoは新しい予定と思われ初期は空。editedTodoは編集した予定と思われこれも空。

visibilityは「HTML、CSS編」にも「JS編-2」にも出てくるがタブメニューの部分。初期は「すべて」ということだ。

watchオプション

二つ目、watchオプション。

localStorageの持続性のためにタスクの変更を監視する

watchは監視プロパティ。何かを監視して、変化があったら処理を実行する。

※参考：【Vue.js】watch（監視プロパティ）で戦国時代クイズを作った - クモのようにコツコツと

 // watch todos change for localStorage persistence
  watch: {
    todos: {
      handler: function (todos) {
        todoStorage.save(todos)
      },
      deep: true
    }
  },

watchキーの値は連想配列
handlerキーの値は無名関数で引数はtodos
todoStorageのsave()にtodosが入る
deepキーの値はtrue

todosの配列の値に変化があったらhandlerキーとdeepキーを実行。

handlerキーはtodosをtodoStorageにsave()を実行。save()も「JS編-2」に出てきた。localStrageに保存。

deepキーの値はtrueに。これはオブジェクトの監視に必要なプロパティ

※参考：[https://qiita.com/Keitaro/items/8e3f8448d1a0fe281648:title]

computedオプション

三つ目、computedオプション。

計算プロパティ

computedは算出プロパティ。以前、割り勘アプリの記事で触れたように入力に対するリアルタイム処理。

※参考：【Vue.js】computed（算出プロパティ）で割り勘アプリを作る（おまけでこち亀アプリも） - クモのようにコツコツと

// computed properties
  // http://vuejs.org/guide/computed.html
  computed: {
    filteredTodos: function () {
      return filters[this.visibility](this.todos)
    },
    remaining: function () {
      return filters.active(this.todos).length
    },
    allDone: {
      get: function () {
        return this.remaining === 0
      },
      set: function (value) {
        this.todos.forEach(function (todo) {
          todo.completed = value
        })
      }
    }
  },

computedキーの値は連想配列
filteredTodosキーの値は無名関数
そのfiltersのvisibilityキーのtodosを返す
remainingキーの値は無名関数
そのfiltersのアクティブなtodosの数を返す
allDoneキーの値は連想配列
getキーの値は無名関数
そのremainingの値を0かどうかの結果を返す setキーの値は無名関数で引数はValue
そのtodosで配列ループを実行。実行する無名関数の引数はtodo
todoのcompletedプロパティの値をvalue`に

filteredTodosは「HTML、CSS編」に出てきた。リストliタグをv-for属性でループする値todo in filteredTodos。filtersは次に登場するオプションでvisibilityはタブの状態なので、該当するタブのTodoを返す。

remainingも「HTML、CSS編」に出てきた。「○件完了」の表記部分。アクティブなタブのtodoの件数を返す。activeは「JS編-2」の変数filtersに出てきた。

allDoneも「HTML、CSS編」に出てきた。リスト入力欄の頭にある全選択の部分。値の取得（get）と値の変更（set）を設定。

※参考：Vue.jsでGet/Setの作成【JavaScript フレームワーク入門】 - JavaScript勉強会

getはthis.remainingが0かどうか確認。setではtodoをループですべて完了にする。

なお、===は型も含めた厳密な比較

※参考：JavaScript 忘れがちな === と == の違い - Qiita

filtersオプション

4つ目、filtersオプション。これには冒頭コメントがついてない。

filtersオプション、公式サイトによると

Vue.js では、一般的なテキストフォーマットを適用するために使用できるフィルタを定義できます。

※参考：フィルター — Vue.js

んん？なんだって？

フィルタはテキストを変換する処理を担っている

※参考：【Vue.js】フィルタについて解説 | とものブログ

なるほど。

 filters: {
    pluralize: function (n) {
      return n === 1 ? '件' : '件'
    }
  },

filtersキーの値は連想配列
pluralizeキーの値は無名関数で引数はn
nが1がtrueなら件を、falseなら件を返す。

pluralizeは「HTML、CSS編」に出てきた。「○件完了」の「件」の単位部分。

?は三項演算子。

condition ? expr1 : expr2

condition が true の場合、演算子は expr1 の値を返します。そうでない場合は expr2 の値を返します。

※参考：条件 (三項) 演算子 - JavaScript | MDN

公式では単数形「item」と複数形「items」に分岐したが、今回はどちらも同じ件という値を返すように打ち変えた。

methodsオプション

五つ目、methodsオプション。

データロジックを実装するメソッド。 DOMの操作はまったくありません。

いつものように処理を書くオプション。

// methods that implement data logic.
  // note there's no DOM manipulation here at all.
  methods: {
    //処理（中略）
})

methodsキーの値は連想配列

この中にmethodsオプションの処理がいくつかのキーに分かれて書かれている。結構モリモリな内容なので、キーごとに見ていく。

addTodoキー

キー名は処理内容が想像つく名前になっている。addTodoキーはTodoの追加の処理が書かれている。

    addTodo: function () {
      var value = this.newTodo && this.newTodo.trim()
      if (!value) {
        return
      }
      this.todos.push({
        id: todoStorage.uid++,
        title: value,
        completed: false
      })
      this.newTodo = ''
    },

addTodoキーの値は無名関数
変数valueはそのnewTodoかつそのnewTodo.trim()
もしvalueがtrueでなければ何も返さない
そのtodosの配列の末尾に下記の値を追加
idキーにのtodoStorage.uidの数を1加算
titleキーをvalueに completedをfalseに
そのthis.newTodoの値を空に

addTodoとnewTodoは「HTML、CSS編」に出てきた。1行目の入力欄。newTodoは先ほどのdata:で初期状態は空。

&&や!は論理演算子。&&はAND（＝かつ）、!はNOT（＝以外）。

※参考：論理演算子 - JavaScript | MDN

trim()は文字列の両端のスペースを削除。

※参考：String.prototype.trim() - JavaScript | MDN

push()は配列の末尾に値を追加

※参考：Array.prototype.push() - JavaScript | MDN

todoStorage.uidは「JS編-2」に出てきた。localStrageの件数。

titleは「HTML、CSS編」に出てきた。todoのタイトル部分。localStrageにも登録される。

completedは「HTML、CSS編」にも「JS編-2」にも出てくる、Todoの完了状態をlocalStrageに登録。

removeTodoキー

こちらはTodoの削除の処理

    removeTodo: function (todo) {
      this.todos.splice(this.todos.indexOf(todo), 1)
    },

removeTodoキーの値は無名関数で引数はtodo
そのtodosの配列からtodoを削除

removeTodoは「HTML、CSS編」に出てきた。バツ（×）ボタンの部分。

splice()は配列からの要素の追加や削除

※参考：Array.prototype.splice() - JavaScript | MDN

indexOf()は配列の値が何番目にあるかを返す

※参考：Array.prototype.indexOf() - JavaScript | MDN

editTodoキー

Todoの編集の処理

    editTodo: function (todo) {
      this.beforeEditCache = todo.title
      this.editedTodo = todo
    },

editTodoキーの値は無名関数で引数はtodo
そのbeforeEditCacheの値をtodo.titleに
そのeditedTodoの値をtodoに

beforeEditCacheは他の場所と紐づいていないプロパティのようだが、名前から編集前の状態と思われる。編集時にここにtitleを入れている。

editedTodoは「HTML、CSS編」に出てきた。編集用のリスト. editにある。ここにtodoを入れている。

doneEditキー

編集の実行処理

    doneEdit: function (todo) {
      if (!this.editedTodo) {
        return
      }
      this.editedTodo = null
      todo.title = todo.title.trim()
      if (!todo.title) {
        this.removeTodo(todo)
      }
    },

doneEditキーの値は無名関数で引数はtodo
もしそのeditedTodoでなければ、何も返さない
そのeditedTodoの値を空nullに
todoのtitleの値をtodo.title.trim()に
もしtodoのtitleがなければtodoの削除removeTodo()を実行

doneEditも「HTML、CSS編」の編集用のリスト. editに出てくる。上のeditTodoキーと関連深い。editTodo実行後の入力欄からの削除の処理が書かれている。

cancelEditキー

編集キャンセルの処理

    cancelEdit: function (todo) {
      this.editedTodo = null
      todo.title = this.beforeEditCache
    },

cancelEditキーの値は無名関数で引数はtodo
そのeditedTodoの値を空nullに
todoのtitleの値をそのbeforeEditCacheに

cancelEditも「HTML、CSS編」の編集用のリスト. editに出てくる。編集をキャンセルしたときに元の状態に戻す処理が書かれている。

removeCompletedキー

Todoの完了および削除の処理

    removeCompleted: function () {
      this.todos = filters.active(this.todos)
    }
    }
  },

removeCompletedキーの値は無名関数
そのtodosの値をfiltersのactive()に。引数はそのtodos

removeCompletedは「HTML、CSS編」に出てくる。「すべて削除」のボタン。active()に該当するtodosを入れるとアクティブが削除になるようだ。

directivesオプション

六つ目、directivesオプション。最後のオプション。

DOMが更新されるのを待つカスタムディレクティブ入力フィールドに注目する前に

公式サイトによると

Vue.js 本体で出荷されたディレクティブの標準セットに加えて (v-model と v-show)、カスタムディレクティブ (custom directive) を登録することができます

※参考：カスタムディレクティブ — Vue.js

なるほど。directivesオプションによってHTML編に出てきたカスタムディレクティブを設定しているわけか。

  // a custom directive to wait for the DOM to be updated
  // before focusing on the input field.
  // http://vuejs.org/guide/custom-directive.html
  directives: {
    'todo-focus': function (el, binding) {
      if (binding.value) {
        el.focus()
      }
    }
  }
})