[Portfolio] ToDoリスト 拡張版（REACT + TypeScript）

前回作成したReact + TypeScriptのToDoリストを発展させ、グループ分けや期限設定、期限通知などの機能を追加した拡張版を作成しました。

ToDoの追加・編集・削除や完了履歴などの基本機能を維持しながら、タスクをグループごとに整理し、期限を設定して管理できる構成にしています。

React・TypeScriptの実装を中心に制作しているため、デザインは必要最低限とし、状態管理やタスク操作などの機能面を重視しています。

主な機能・特徴

• ToDoの追加・編集・削除
• localStorageによるデータ保持
• 日付ごとの完了履歴を表示
• 日付順の昇順・降順切り替え
• 日付ごとの折りたたみ表示
• グループの追加・分類
• タスクごとの期限設定
• 期限間近・期限切れの通知
• ページ表示時と1分ごとの期限チェック

期限通知は、現在の仕様ではページを開いている間のみ動作します。

活用例

• 個人用のToDo・タスク管理
• 案件・業務ごとのタスク整理
• 期限付き作業の管理
• 仕事・プライベートなどのグループ別管理
• 完了したタスクの履歴確認
• React・TypeScriptを利用したWebアプリの構築例

単純なToDo一覧だけでなく、タスクの分類や期限を組み合わせることで、日常的な作業管理を想定したアプリへ機能を拡張しています。

実装の仕組み

Reactで画面やタスクの状態を管理し、TypeScriptでデータ構造や処理を定義しています。

タスクデータはlocalStorageへ保存し、ブラウザを再読み込みした場合でも内容を保持できる構成です。

ページを開いた際と、その後1分ごとに期限を確認し、対象となるタスクがある場合に通知する仕組みを実装しています。

工夫・改善した点

• 基本的なToDo機能を維持しながら、グループ分けと期限管理を追加しました。
• タスクを用途ごとに分類できるようにし、一覧を整理しやすくしました。
• 期限を設定できるようにし、期限が近いタスクや期限切れを確認できるようにしました。
• ページ表示時だけでなく、表示中は1分ごとに期限を確認する構成にしました。
• localStorageを利用し、ページを再読み込みしてもタスクを保持できるようにしています。

前回の基本的なToDoリストから、より実際のタスク管理を想定した機能へ段階的に拡張しています。

今後の拡張

現在の期限通知は、ページを開いている間のみ動作します。

今後の拡張案として、PWA・Service Worker・Push APIなどを利用し、ページを閉じている状態でも通知を受け取れる構成を想定しています。

また、この拡張版をさらに発展させ、PHP・MySQLと連携してタスクをデータベースへ保存する「ToDoリスト DB連携版」も制作しています。

使用技術

デモ

GitHub Pagesで実際の動作を確認できるサンプルを公開しています。

［デモを見る］