Nuxtの勉強としてタスク管理アプリを作ってみた

VueやらNuxtやらが流行っている中で、一度も触ったことがなかったので、エンジニアとして置いて行かれるわけにはいかない！というわけでNuxtでタスク管理アプリを作ってみた。

正直まだまだ使えるものじゃいないと思います。。。
現時点ではローカルストレージにデータを保存するので、同一ブラウザのみでデータを保持できます。

Githubにソースを公開していますので、もし使っていただいて、「こう改善すべき！」みたいなご意見をいただけると嬉しいです！

機能のイメージ

イメージはTodoistとAsanaの良いとこどりをしたようなものを想像してました。

最低限の機能として、上記を満たすTODOアプリをNuxtで開発しました。

画面イメージはFigmaで作成しました。

実際に作った画面イメージはこれ

左から

といった感じ

Nuxt（というよりVue）が初めてだったので、つまっては調べて、詰まっては調べてを繰り返しました。
Vueのコンポーネントを活用しようと思っていたのですが、実装しているうちにあまりコンポーネント化がうまく行かず…まだまだ勉強不足だなと感じました。

実際の画面ベースで、どのようなコンポーネントに分けられているかを簡単に説明します。

こんな感じなコンポーネントで構成されています。

作っているときは、再利用する可能性のあるものをコンポーネントとして分けようという考えで作っていました。
なので、タスクの完了を切り替えるチェックボックスや、追加フォームの表示を切り替えるトグルボタンをコンポーネントとして再利用できたのは良かったなと思いました。

データはすべてJSONで管理しています。
JSはJSONが扱いやすいので良いかなと思いましたが、コードがかなり冗長になってしまった反省もありました。

例として、カテゴリの名前を表示する部分が

<p>
{{$store.state.todos.todoData[$store.state.todos.activeCategory-1].category_name}}
</p>

といった形になってしまい、可読性が低くなってしまい、データの構成に少しでも変更があるとかなり改修が必要になりそうです。

また、データはVuexを利用し、すべてのコンポーネント間で共通のデータを見ているので、実装がかなり簡単になりました。

チェックボックスでタスクの完了ステータスが更新
↓
タスク一覧側のチェックボックスにも反映
↓
タスク一覧から完了したタスクを削除

といった処理が、Vuexで共通のストアのデータを見ているので、各コンポーネントで条件分岐を行っておけば、データの変更による表示更新が実装できるのはとても良かったです。

デザインは専門ではないので、Bootstrapを利用しました。
グリッドデザインの勉強になったので良かったかと思っています。

モダンなJSによる開発を勉強したいと作成したタスク管理アプリですが、Nuxt（Vue）関連の基礎を学ぶのに効果的かなと思いました。
まだまだ勉強不足で、タスク管理アプリとして使えるものではないかと思いますが、少しずつ改善していこうと思います。