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

React + TypeScriptを使用して、タスクの追加・編集・削除や履歴表示に対応したシンプルなToDoリストアプリを作成しました。

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

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

主な機能・特徴

• ToDoの追加
• 登録したToDoの編集
• ToDoの削除
• localStorageによるデータ保持
• 日付ごとの完了履歴を表示
• グループ単位での全削除
• 日付順の昇順・降順切り替え
• 日付ごとの折りたたみ表示

活用例

• 個人用のToDo・タスク管理
• その日の作業内容の整理
• 完了したタスクの履歴確認
• 日付ごとの作業管理
• 簡易的な進捗・作業記録
• React・TypeScriptを利用したWebアプリの構築例

基本的なToDo操作に加え、完了したタスクを日付ごとに確認できるため、現在のタスクだけでなく過去の作業内容を振り返る用途にも利用できます。

実装の仕組み

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

登録したデータはlocalStorageへ保存し、ブラウザを閉じたりページを再読み込みした場合でも保持できる構成です。

日付ごとにタスクを整理し、表示順の変更や折りたたみができるようにすることで、履歴が増えた場合でも確認しやすい構成にしています。

工夫・改善した点

• ToDoの追加・編集・削除という基本操作を一通り実装しました。
• localStorageを利用し、ページを再読み込みしてもデータを保持できるようにしました。
• 完了したタスクを日付ごとの履歴として確認できるようにしました。
• 日付順を昇順・降順で切り替えられるようにしました。
• 履歴を日付単位で折りたためるようにし、一覧が長くなった場合でも確認しやすくしました。
• グループ単位でまとめて削除できるようにしました。

この基本版をベースに、後にグループ分け・期限設定・期限通知などを追加した「ToDoリスト 拡張版」、さらにPHP・MySQLと連携した「ToDoリスト DB連携版」へ機能を発展させています。

使用技術

デモ

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

［デモを見る］