(OP編)Vue.jsでTodoリストを作ってみた!

勉強記録

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

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

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

完成品

ねこりすと
猫がたくさんの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 を使う」です。

コンポーネントの基本 — 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のアドレスバーを含めた高さを取得できていない
・文字数オーバーするととはみ出る

勉強不足の箇所

今回、文字検索やエラーが出たことで、javascriptの連想配列やオブジェクトといった基本的なものが(特にfilterメソッドや連想配列や配列が混ざった時のループ)が理解しきれていないと感じました。基礎がわかっていないので、そりゃ難しいですよね・・・。

下記のURLが参考になりそうだったので、今月学習予定のLalabelと並行して特訓したいと思います!!

JavaScript|配列とオブジェクト(連想配列)の組み合わせパターン - わくわくBank
初学者のかたですと、配列とオブジェクトが組み合わさったデータ構造の扱いに悩むかもしれません。ここでは、各組み合わせごとに要素を走査する方法を紹介します。
JavaScript で forEach を使うのは最終手段 - Qiita
この記事は JavaScript2 Advent Calendar 2018 の1日目の記事です。 こんばんは。@diescake です。 今年は、JavaScript 経験の浅い新人さんや外注さんをリードする立場として、 とにか...

こだわりポイント

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

まとめ

誰か知らん人
誰か知らん人

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

ぱるこ
ぱるこ

え、なんて?

タイトルとURLをコピーしました