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

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

light_todo

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

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

GitHub - spadeloves/lightTODO: easy todo app made with Nuxt.js

機能のイメージ

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

• カテゴリ機能がある
• カテゴリにタスクを登録する
• カテゴリは以下の情報を持つ
  • カテゴリ名
  • 色
• タスクは以下の情報を持つ
  • タスク名
  • カテゴリ
  • タスク期日
  • メモ
  • コメント（複数登録可能）

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

画面のイメージ

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

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

左から

• カテゴリ一覧
• タスク一覧
• タスク詳細

といった感じ

実装の流れ

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

コンポーネントのイメージ

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

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

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

データの管理

JSONでのデータ管理

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

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

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

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

Vuexの利用

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

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

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

デザイン

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

まとめ

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