クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。今回から詳細編。ひとまずVueインスタンス本体以外の部分を見ていきます。localStorageの設定もありました。それではいきましょう!

【目次】

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

Todoリスト完成品とJSコード全体像

完成品と前回まとめたJSの全体像。

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

// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.

// localStorage persistence
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
  //処理
}

// visibility filters
var filters = {
  //処理
}

// app Vue instance
var app = new Vue({
  //処理
})

// handle routing
function onHashChange () {
  //処理
}

window.addEventListener('hashchange', onHashChange)
onHashChange()

// mount
app.$mount('.todoapp')

詳細は前回記事参照。

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

JSコード詳細

いよいよJSコードの詳細を見ていく。

変数STORAGE_KEYと変数todoStorage

冒頭コメント。

localStorageの持続性

// localStorage persistence
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
  fetch: function () {
    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach(function (todo, index) {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save: function (todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}
  • 変数STORAGE_KEYに値todos-vuejs-2.0を入れる
  • 変数todoStorageの値は連想配列
  • fetchキーの値は無名関数
  • 変数todosにてlocalStoragegetItem()で取得した値をJSON.parse()でJSONをJSに変換。 引数はSTORAGE_KEY、または空の配列'[]'。
  • todosforEachループ、無名関数で引数にtodoindex
  • todoidプロパティをindex
  • todoStorage.uidプロパティをtodosの数length
  • todosを返す
  • saveキーの値は無名関数で引数はtodos
  • localStoragesetItem()で値をセット。第1引数STORAGE_KEY、第2引数JSON.stringify()todosをJSONに変換。

ここでlocalStorageが出てきた!

まず変数STORAGE_KEY前々回のHTML、CSS編で触れたlocalStorageのキーを入れている。

次に変数todoStoragefetch:キーでSTORAGE_KEYから得た値を入れて、それをindexにループしている。

uidには値の数を入れている。save:キーではtodosの値をSTORAGE_KEYに追加している。

変数filters

可視性フィルタ

// visibility filters
var filters = {
  all: function (todos) {
    return todos
  },
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.completed
    })
  },
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.completed
    })
  }
}
  • 変数filtersは連想配列
  • allキーの値は無名関数で引数はtodos
  • todosを返す
  • activeキーの値は無名関数で引数はtodos
  • todosfilter()メソッドを返す。引数は無名関数でその引数はtodo`
  • todocompleted以外を返す
  • completedキーの値は無名関数で引数はtodos
  • todosfilter()メソッドを返す。引数は無名関数でその引数はtodo`
  • todocompletedを返す

変数filtersの連想配列の中でallキーはtodos自体を返す。activeキーはcompleted以外を返す。completedcompletedを返す。

変数app(次回へ…)

app Vueインスタンス

ここが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: {
    //処理
  }
})

関数onHashChange()

ルーティングを処理する

// handle routing
function onHashChange () {
  var visibility = window.location.hash.replace(/#\/?/, '')
  if (filters[visibility]) {
    app.visibility = visibility
  } else {
    window.location.hash = ''
    app.visibility = 'all'
  }
}
  • 関数onHashChange()の設定
  • 変数visibilityでハッシュの記号を空に置き換える
  • もしfiltersの配列の値がvisibilityなら
  • appvisibilityvisibility
  • さもなくば
  • ハッシュを空に
  • appvisibilityall

ページ内リンクでURLの後ろに付くハッシュについての設定。上記の変数filtersも関連している。

置き換えreplace()についてはこちらを参照

※参考:String.prototype.replace() - JavaScript | MDN

マウント

最後にマウントは前回にも触れた。

 vm.$mount( [elementOrSelector] )

Vueインスタンスの中にelオプションはない代わりにここで. todoappタグの紐づけている。

またまた続きます…

f:id:idr_zz:20190804224758j:plain

処理の詳細、Vue本体以外の部分は見れた。まだ全体が見れていないので関連のイメージが不完全だけど、localStorageの設定は変数STORAGE_KEY、変数todoStorageあたりに書いてあることがわかった!次回にVue本体で全体が見ていきます。それではまた!

※続き書きました!

www.i-ryo.com


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com