Vue.jsの学習で作ったTODOアプリです。
■概要
ローカルストレージを使用してデータの保存をしています。
故意にキャッシュをクリアしない限り、データは残ります。
サーバーは使用せず、ブラウザ側に保存するので、機密情報は入力不可。
■使用言語
HTML・CSS（SCSS）・JavaScript（Vue.js）
■GitHub
https://github.com/num33dewdrop/todo/
■基本的な機能
・タスクリストの追加、編集、削除
・タスクの追加、編集、削除
・タスクの完了、未完了切り替え
・モーダルでのタスクリストとタスクの追加、編集
■タスクの管理機能
・期限の設定（vuejs-datepickerによるカレンダー入力）
・お気に入り設定
・ソート機能
・リストの削除
・リスト毎の完了タスクの全削除
■その他機能使用技術
・ローカルストレージにてデータを保存
・transition、transition-groupによるアニメーション
・JavaScriptフックでの、完了タスク、下部メニューの表示アニメーション
■苦労点・まとめ
親子関係のあるデータ構造（タスクリストとタスク）の処理に苦戦しました。ただリストを表示することは調べながらなんとかすぐ形になりましたが、そこにお気に入り機能とアニメーションを追加した途端、お気に入りでのアニメーションが崩れたり、アニメーションが上手くいったと思ったら、表示データが崩れたりと頭を抱えました。上手く行った時の達成感がひとしおでした。
この作品でVue.jsの基本的な使い方の、テンプレート構文、各v-ディレクティブ使い方、算出プロパティやウォッチャ、イベントハンドリング、フォーム入力のバインディング等様々な事を学び、糧にできたと感じています。今後、PHPフレームワークのLalavelを学習するつもりであり、Vue.jsと組み合わせつつ、データベースと連携したリッチで動的なアプリケーションを作成したいと考えています。
