※初回制作したアプリに一部修正を加えています。
今回は、Javascript のフレームワークの Vue.js を学習していく過程で TODO リストを作成したので、制作過程を書き記していこうと思います。同様に Vue.js を学習している方の参考になれば幸いです。
完成したもの
完成したアプリの URL はこちらです。
機能
- タスクの追加
- タスクの削除
- タスク完了の切り替え
- 完了したタスクの一括削除
- 追加したタスクの編集
- タスクの検索機能
- ドラッグ&ドロップで並び替え
- ローカルストレージに現状のタスクを保存
- その他の FW・ライブラリで作成した TODO アプリへのリンクを表示
コンポーネント設計
どの様に分けるか悩みましたが、できるだけ細かく分けて練習してみようと思い以下のようなコンポーネント設計にしました。
App.vue
|- /common
|- IconLogo.vue
|- Logo.vue
|- Modal.vue # モーダルを表示する
|- CreateTask.vue # 新しいタスクを作成
|- DeleteBtn.vue # 完了済みのタスクを一括削除
|- OtherTodo.vue # モーダルを表示する
|- SearchTask.vue # タスクを検索する
|- TaskList.vue # TaskItemの親コンポーネント
└ TaskItem.vue # 各タスクを表示する苦戦した箇所
webpack での環境構築
初っ端の環境構築で苦戦しました（笑
公式ドキュメントや他の方の記事を参考にましたが、使用するローダーにも読み込み順序があったり、そもそもこのローダーは何をするものなんだ？と度々混乱することがありました。エラーメッセージと戦いながら何とか作成することが出来ましたが、webpack に関して学んだことは別の記事で書いていこうと思います。
こちらの Udemy の教材も視聴しましたが、webpack のカスタマイズ方法など非常にわかりやすく解説されているのでおすすめです。
props で子コンポーネントへのデータの受け渡し
これは苦戦したことと言うよりは、よく忘れてしまったことなのですが、props をキャメルケースで記述した場合は DOM（HTML）のテンプレート内ではケバブケースを使用しなければならないことです。
・キャメルケース：アルファベットで複合語やフレーズを表記する際、各単語や要素語の先頭の文字を大文字で表記する手法
例）sampleTitle
・ケバブケース：単語をハイフンで区切った形式
例）sample-title
ちなみに、単語をアンダースコアで区切ったスネークケースというものもあるみたいです
例）sample_title
フレームワークのお作法に慣れていくにはアウトプットと、公式ドキュメントの往復をしまくるしかないですね。。。
この値を渡す際のルールはよく忘れて余計な時間を掛けてしまいました。。。
タスクの検索機能
チュートリアルやググって出てきた記事を参考にしながら進めました。その中で indexOf メソッドを使用したやり方が多かったのですが、文字列が完全に一一致してないと絞り込めなかったりしたので前方致で検索機能を実装しようとしました。
結論としては、filter メソッド、match メソッド、 RegExp オブジェ クトを使用して、computed プロパティと連携することで実装することが出来たのですが、JavaScript をネィティブな形式で書く力が無いなと言うことを実感しました。。。
// コード抜粋
computed: {
getTask() {
if (this.searchWord !== "") { // 検索ワードが空でなければ以下の処理を実行
return this.todos.filter((item) => {
let serchItem = new RegExp("^" + this.searchWord, "i");
// matchメソッドは、正規表現に対する文字列のマッチングの結果を受け取る
return item.value.match(serchItem);
});
} else {
return this.todos; // 検索ワードが空だったら、todosをそのまま表示
}
},
},終わりに
JavaScript のフレームワークでは便利な機能があらかじめ用意されていますが、今回作成した TODO リストの機能でもネイティブな JavaScript の理解が浅いとハマってしますことが多かったので、その辺をもっと深堀りして学習いきたいと思います。
