イイダリョウのブログ。【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)2019-08-04【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)JSVue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。Vueインスタンス本体以外の部分を見ていきます。localStorageの設定もありました。完成品と前回まとめたJSの全体像。クモのようにコツコツとJSコード詳細いよいよJSコードの詳細を見ていく。変数STORAGE_KEYと変数todoStorage冒頭コメント。変数todosにてlocalStorageにgetItem()で取得した値をJSON.parse()でJSONをJSに変換。引数はSTORAGE_KEY、または空の配列'[]'。todosをforEachループ、無名関数で引数にtodoとindextodoのidプロパティをindexにtodoStorageの.uidプロパティをtodosの数lengthにtodosを返すsaveキーの値は無名関数で引数はtodoslocalStorageにsetItem()で値をセット。第1引数STORAGE_KEY、第2引数JSON.stringify()でtodosをJSONに変換。ここでlocalStorageが出てきた!まず変数STORAGE_KEYに前々回のHTML、CSS編で触れたlocalStorageのキーを入れている。次に変数todoStorageのfetch:キーでSTORAGE_KEYから得た値を入れて、それをindexにループしている。uidには値の数を入れている。save:キーではtodosの値をSTORAGE_KEYに追加している。}}変数filtersは連想配列allキーの値は無名関数で引数はtodostodosを返すactiveキーの値は無名関数で引数はtodostodosのfilter()メソッドを返す。引数は無名関数でその引数はtodo`todoのcompleted以外を返すcompletedキーの値は無名関数で引数はtodostodosのfilter()メソッドを返す。引数は無名関数でその引数はtodo`todoのcompletedを返す変数filtersの連想配列の中でallキーはtodos自体を返す。activeキーはcompleted以外を返す。completedはcompletedを返す。VueインスタンスここがVueインスタンスの本丸でかなりのボリューム。ここは次回に回したく。変数visibilityでハッシュの記号を空に置き換えるもしfiltersの配列の値がvisibilityならappのvisibilityをvisibilityにさもなくばハッシュを空にappのvisibilityをallにページ内リンクでURLの後ろに付くハッシュについての設定。上記の変数filtersも関連している。MDNマウント最後にマウントは前回にも触れた。todoappタグの紐づけている。続きます...処理の詳細、Vue本体以外の部分は見れた。全体が見れていないので関連のイメージが不完全だけど、localStorageの設定は変数STORAGE_KEY、変数todoStorageあたりに書いてあることがわかった!次回にVue本体で全体が見ていきます。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。Chartsでスプレッドシートを読み込んでグラフを表示する以前、GoogleChartsをQuickにStartしました。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。