こんにちはぱるこ(@h9h1h7)です。
●●●●●のjs上級で習う「Vue.js」を使用して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つ1つの部分)
-TodoOption.vue(全選択・選択解除・削除の機能)
-FotterMenu.vue(fotter部分)
苦戦した箇所
文字検索
文字検索には約3時間ほどかかりました。かなり苦戦しました。
苦戦その1:コンポーネントでv-modelを使う方法
まず、壁にぶつかったのが、「コンポーネント間でv-model」を使う方法です。
文字検索を入力する箇所は『TodoSearch.vue』という子コンポーネントに分けていたので、子コンポーネントで入力したら、親コンポーネントである「App.vue」にv-modelを使って連動できたらいいのに〜という壁にぶつかりました。
親から子、子から親に単純に一方向に渡す場合は、propsや$emitを使用すれば良いですが、コンポーネント間でデータの受け渡しを双方向に行う場合はちょっと違うようです。
参考にしたのは公式ドキュメント「#コンポーネントで v-model を使う」です。

書き方が違うので、ややこしいです。
苦戦その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のアドレスバーを含めた高さを取得できていない
・文字数オーバーするととはみ出る
勉強不足の箇所
今回、文字検索やエラーが出たことで、javascriptの連想配列やオブジェクトといった基本的なものが(特にfilterメソッドや連想配列や配列が混ざった時のループ)が理解しきれていないと感じました。基礎がわかっていないので、そりゃ難しいですよね・・・。
下記のURLが参考になりそうだったので、今月学習予定のLalabelと並行して特訓したいと思います!!

こだわりポイント
ちなみにこだわりポイントは、タスクを完了すると、猫が左右に動くことと黒猫になることです。
まとめ

Vue.jsは「学習効率は非常に高い」です。

え、なんて?