こんにちは、しじゅうです！
今回はVue.jsを使ってTODOアプリを作成した経験をシェアしたいと思います。主な目的はVue.jsの学習と、実際に使えるアプリを自分用に作ることでした。ただ普通に作っては面白くないので、寿命までの時間をカウントダウンし、経過時間をカウントアップするという機能を追加して自分へのプレッシャーをかける意味でみました。

アプリは こちら

アプリの特徴

• 寿命までの時間のカウントダウン
• 経過時間のカウントアップ

これにより、日々のタスクを管理するだけでなく、自分の寿命を意識しながら日常を過ごせるようになります。これがどれだけ効果的かはさておき、作ってみた感想としては、自分の時間の使い方を見直す良いきっかけになりました。
実際に自分の平均寿命までの残り時間がわかるので、普段あまり気にしていない時間の流れを意識して取り組むことができます。

アプリの設計と実装

Vue.jsの学習

まず、Vue.jsを学ぶために公式ドキュメントを読み、基本的な概念と機能を理解しました。Vue.jsはそのシンプルさと柔軟性から、フロントエンド開発に非常に適していると感じました。
ただ、リアクティビティーのついては学習していたのですが、実際Piniaからの連携などでは思っていたリアクティビティーのタイミングとは少し違い、改めて理解が深まりました。

寿命計算の実装

次に、寿命までの時間をカウントダウンし、経過時間をカウントアップする機能を実装しました。これには、以下のステップを踏みました

• ユーザーの誕生日と平均寿命の設定

ユーザーが自身の誕生日を入力すると、その日から平均寿命までの時間を計算します。平均寿命は、男性なら81.41歳、女性なら87.45歳としました。

• カウントダウンとカウントアップの表示

Vue.jsのリアクティブデータプロパティを使用して、現在の時間と寿命までの時間をリアルタイムで更新します。

UI/UXの改善

アプリのUIはシンプルに保ちつつ、情報が見やすくなるよう心がけました。Vuetifyを使ってデザインを整え、ユーザーが直感的に操作できるように工夫しました。ただ、こだわり始めると崩壊しそうなので本当に基本的なコンポーネントのみを使いました。

振り返りと今後の課題

今回のプロジェクトを通じて、Vue.jsの理解が深まりました。特に、リアクティブデータの扱いや、コンポーネントの設計に関する知識が身についたことが大きな収穫です。

一方で、まだ改善の余地があると感じています。例えば、今回はlocal Storage APIを使ったので７日間アクセスがないと消去されてしまうので、データの永続化や、目標をSNSで公開して共有し、コメントやいいねなどの機能もつけるなど、より高度な機能の追加など、今後の課題として取り組んでいきたいと思います。

まとめ

Vue.jsを使ったTODOアプリの作成は、学習と実用の両面で非常に有意義な経験となりました。寿命までのカウントダウンと経過時間のカウントアップという特徴を持つこのアプリは、日々のタスク管理を少しユニークにしてくれます。
また、色々な機能を実装するには時間がかかるため、どの機能を実装するのかを最初に決める仕様や技術選定の必要さも学べました。

Follow me!