タスクを時間割で管理できるアプリを作りました【初個人開発】
初めての個人開発として、『タスクを時間割で管理できるアプリ』を作りました。
どんなアプリか
一週間のタスクを、学校の時間割のように決められたコマの中に入れて管理するアプリです。
一番左の列に各コマの時間を入れることができ、時間になるとチャイムが鳴ります。
さながら学校にいるような雰囲気で日々のタスクに取り組むことができます。
なぜ作ったか
私はフリーランスで全ての仕事をリモートでやっているのですが、夜遅くまで仕事をしてしまうなどあまり規則正しい生活ができていないのが悩みでした。
どうしたら規則正しい生活・メリハリのある仕事環境が得られるか考えた結果、
- 外部からの適度な制約があり、規則正しくタスクをこなせる場と言えば【学校】
- 自宅での作業に学校のような雰囲気を作り出せたらメリハリが生まれるのではないか
と思い、まずはタスクを時間割のように管理してみようと作り始めました。
機能一覧
タスクの追加・行の並び替えの様子
| 機能 | 詳細 |
|---|---|
| タイトルの編集 | 時間割のタイトルをクリックすれば編集でき、編集エリア以外をクリックすると保存される |
| 日時の設定 | 開始日を入れれば自動で 1 週間分の日付と曜日が入る |
| タスクの追加 | 各コマにホバーするとグレーになり、クリックするとモーダルが出てタスクのタイトル・詳細・URL・場所・色を入力できる |
| タスクの編集・削除 | タスクをクリックするとモーダルが出て編集 or 削除ができる |
| タスクの追加の制限 | 1つのコマにタスクが3つ存在する場合は新たにタスクを追加できない |
| 各行の時間を編集 | 1 番左の列から「1 限:8:00~9:00」など各行のタイトルと時間を編集できる |
| 行の追加・削除 | 行の追加と削除ができる |
| 行の並び替え | 行をドラッグ&ドロップで並び替えられる |
| データの保存 | localStorage にデータを保存する |
| 時間の通知 | 指定した時間になるとブラウザからチャイム音が鳴る |
なお一応レスポンシブ対応はしていますが、基本的にPC操作前提となっています。
技術要素
フロントエンド
- フレームワーク：Next.js
- 開発言語：TypeScript
- CSSフレームワーク：Tailwind CSS
- ホスティング：Vercel
ライブラリ
- 状態管理：jotai
- UIライブラリ：Chakra UI
- 行の並び替え：dnd kit
- フォームライブラリ：React Hook Form
- 日付入力：React Datepicker
- カラーピッカー：React Color
データはlocalStorageに保存しています。
こだわったこと
自由度を低くする
学校の時間割にそんなに高度で自由度の高い要素は不要なので、とにかくシンプルかつある程度制限があるものを目指しました。
- 1コマに入れられるタスクを3つまでとする（タスクをたくさん入れて終わらなくて落ち込むということを防ぐ）
- 時間割にすることで、作業時間を日によって変えず毎日同じ時間での作業を強制する（規則正しい環境を演出する）
- 余計なデザイン・装飾を入れない
大変だったこと
localStorageへのデータの保存
データをlocalStorageに保存するのにjotaiという状態管理ライブラリのatomWithStorageという関数を使っているのですが、思ったようにデータが同期されなかったり、無限ループになってしまったりと3日ほど沼りました。
これはもう誰かに聞かないとわからないと思ったので、Jotai Friendsの運営をされているTeruhisa YamamotoさんにTwitterでDMをしてみました。
ネット上で誰かにこういった質問をするのが初めてで不安だったのですが、すぐに返信をくださった上とても親切に教えていただき、無事解決しました。ありがとうございました！
この沼ったところは後日別で記事を書こうかと思います。
データ設計をどうするか
タスクの内容はもちろん、行の並び順や各コマに入っているタスクの一覧などさまざまなデータをlocalStorageに保存しているのですが、それらのデータを「どのくらいの範囲で」「どのようなキーで」保存すればいいのかがわかりませんでした。
結局今回は、タスクの部分だけで言うと1コマに入っているタスクをまとめて配列として、1つのキーで保存することにました。
ただ1つのキーにたくさんのタスクが入っているのはアプリの挙動的によくないのか？タスク1つ1つを別のキーで保存したほうがいいのか？など曖昧なままでした。この辺ってデータベース設計?を勉強すればいいんでしょうか。
実現できなかったこと
タスクの移動・並び替え
本当は行の並び替えの他に個々のタスクの移動・並び替えもできるようにしたかったのですが、
行の並び替えを実装すると個々のタスクの移動ができなくなり、個々のタスクの移動を実装すると行の並び替えができなくなってしまいました。
dnd kitのドキュメントの読み込みが甘いせいだと思うのですが、最後までどうしても実現することができませんでした。
Vercelでデプロイしたときにタイムゾーンがずれる
いざデプロイした後、consoleに何やらエラーがいくつか出ているのに気づきました。
調べてみるとどうやらnew Date()を実行した際、タイムゾーンを日本に設定していてもVercel環境ではUTCのタイムゾーンになってしまうようです。
こちらの記事より、date-fns-tzというライブラリを使って修正できるとのことですが
このライブラリを入れるとなぜかビルドが通らなくなってしまいました。
一応new Date()を使っている箇所が正常に動いていることは確認できているので一旦保留とし、さらに調査をしつつ修正をしていこうと思います。
Discussion