（OP編）Vue.jsでTodoリストを作ってみた！

こんにちはぱるこ(@h9h1h7)です。

●●●●●のjs上級で習う「Vue.js」を使用してTodoリストを作成してみました。
まだ、不具合が多々ありますが、一旦終了します。バグは就職活動始めるまでに修正していきたいと思います。

大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール

完成品
作成の流れ

完成品

Vue.jsでtodoリスト作成しました！

まだバグが多々ありますが、一通りの動きはできたので、一旦終了します😭

スマホでも使えるように、Enter(iPhoneだと改行)するだけでタスク作成されます。#ウェブカツ女性割引 pic.twitter.com/rwU2C3NGxa
— ぱるこ@Laravel月間 (@h9h1h7) November 2, 2019

ねこりすと

猫がたくさんのTODOリストです(Ф∀Ф)

作品名：『ねこりすと』

作成の流れ

制作にかかった時間（TOTAL：15h）

まず、制作にかかった時間です。

1.ワイヤーフレーム	10m
2.デザイン（spのみ）	1h
3.コーディング（html/cssのみ）	1.5h
5.Vue-cliでの実装作業	12h
6.サーバーアップ作業	30m

完成デザイン

作品の仕様

仕様

・1つずつ追加
・1つずつ削除
・選択したものだけ削除
・全選択・全解除
・全て・完了・未完了を別々で表示
・再編集可能
・文字がマッチするものを探す
・アニメーションあり
・レスポンシブ対応
・ローカルストレージを保存方法として使用しているので、同じブラウザであれば保持される

コンポーネント分け

App.vue
 [componetns]
   -TodoSearch.vue（検索機能）
   -TodoCreater.vue（作成機能）
   -TodoList.vue（リスト全体）
   -TodoItem.vue（リストの1つ１つの部分）
   -TodoOption.vue（全選択・選択解除・削除の機能）
   -FotterMenu.vue（fotter部分）

苦戦した箇所

文字検索

文字検索には約3時間ほどかかりました。かなり苦戦しました。

苦戦その1：コンポーネントでv-modelを使う方法

まず、壁にぶつかったのが、「コンポーネント間でv-model」を使う方法です。

文字検索を入力する箇所は『TodoSearch.vue』という子コンポーネントに分けていたので、子コンポーネントで入力したら、親コンポーネントである「App.vue」にv-modelを使って連動できたらいいのに〜という壁にぶつかりました。

親から子、子から親に単純に一方向に渡す場合は、propsや$emitを使用すれば良いですが、コンポーネント間でデータの受け渡しを双方向に行う場合はちょっと違うようです。

参考にしたのは公式ドキュメント「#コンポーネントで v-model を使う」です。

コンポーネントの基本 — Vue.js

Vue.js - The Progressive JavaScript Framework

書き方が違うので、ややこしいです。

苦戦その2：文字検索

v-modelで双方向にしたデータ（検索文字）をfilterメソッドを使用してマッチするリストだけを取り除けば良さそうです。
（firefoxで試したら効かなかった・・・）

参考にしたサイトです。
https://www.webopixel.net/javascript/1193.html

その他のエラー

・TypeError: “x” is not a function という謎のエラー。
これには3.4時間ほど格闘しました。結果ローカルストレージの記述が間違っていた？みたいですが、猫のVue.jsの参考書のHPに記載されているものをそのままコピペしたら治りました。

ローカルストレージについて勉強し直します。
https://www.granfairs.com/blog/staff/local-storage-01

ですが、このおかげで、苦手なjavascriptの連想配列や配列やfilterを復習できました。

できていない箇所＆修正箇所（11/3時点）

⬇︎転職活動始めるまでにこれらのバグを修正します！

見出し

・各ブラウザでの確認作業（主要なブラウザくらいで）
・エンターを押した時に作成するようにしているので、PCだと入力途中で作成されてしまう可能性があるが、スマホだとちょうどいい。
・未完了と完了でリロードするとALLのデータになってしまう。
…おそらく現在、URLのハッシュタグで切り替えを行なっているので、それを/(ルートにしたら良さそうな気がする。)
・フォーカスが複数に当たってしまう
・iPhoneのアドレスバーを含めた高さを取得できていない
・文字数オーバーするととはみ出る