TodoList_1st
React 学習の一環として作成した Todo アプリです。
Youtube教材を元に独自に機能を追加して発展版を制作しました。
タスクを追加・削除・完了済みに分けて管理でき、タブごとの管理やダークモードにも対応しています。
また、ブラウザの localStorage に保存することで、ページをリロードしてもタスクを保持できます。
URL
🔗 GitHubリポジトリ: TodoList_1st
※ GitHub Pages は利用していません（Reactの動的機能のため）。
🔗 学習教材: 「【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~」
<教材アプリ画面>
TodoList 制作に寄せて
React の基礎を学びつつ、使いやすいアプリを作ることを目標として制作しました。
ボタンのアニメーションやタブ管理、ダークモード を追加することで、動画教材で学んだ内容をさらに発展させています。
タスクを「追加」「完了済み」「削除」できるだけでなく、タブごとにタスクを整理 できる点が特徴です。
使用技術
- フロントエンド: React (JavaScript, JSX, CSS)
- ライブラリ: uuid（タスクとタブのユニークID生成）
- 保存機能: localStorage
- デプロイ: GitHub 上でコード管理（静的サイト化は未対応）
機能一覧
- タスクの追加・完了・削除
- タブごとにタスクを管理
- タブの追加・削除・編集（ダブルクリックで名称変更）
- ダークモード対応（OS設定に追従）
- ボタンにホバーするとふわっと膨らむアニメーション
- ブラウザの localStorage に保存し、ページリロードでも保持
学んだこと
- React での状態管理（useState, useRef, useEffect）
- タブ切り替えの実装方法
- CSS によるボタンアニメーションやダークモード対応
- localStorage を使った永続化
今後の学習課題
- コンポーネントのさらなる分割・モジュール化
- より複雑な状態管理（Redux など）の練習
- デザイン面の改善（タブやタスクの見やすさ向上）
- Todo データのオンライン保存・同期（Firebase 等）
まとめ
React の基礎を理解するための学習プロジェクトとして、タスク管理アプリを完成させました。
機能拡張やUI改善を重ねることで、より実用的で学習効果の高いアプリに発展させることができました。
今後は、React独自の機能などを取り入れて試していきたいです。