次の小さい PR として、useState を使って追加・完了切替が動く Todo 一覧へ育てる段階。
カリキュラムスタートこの STEP で作るもの
PR 目安
追加・完了切替など、状態更新の1機能だけをまとめて出す。
例: feature/phase3-step2-stateful-todo-list
できるようになること
状態管理の概念
ReactのuseState・useReducer・Context APIを理解し、アプリの状態をどこで・どう管理するかを設計できるようになる
制御された input で値を state に同期する
useState と input の value/onChange を組み合わせて、フォーム入力を React の状態と一致させる制御コンポーネントの基本を身につける
Todo を追加する(配列 state の更新)
useState で配列を扱い、スプレッド構文で新しい要素を加えて Todo を追加する機能を実装する
チェックボックスで done をトグルする
map で配列の特定要素だけを新しいオブジェクトに差し替える、不変更新の基本パターンを身につける
削除とフィルタ(filter で絞り込む)
filter を使った配列の削除と、タブ切替で一覧を絞り込む基本パターンを身につける
ブラウザで手動動作確認する
DevTools と React DevTools を使って、Todo アプリの動きを観察し「何が起きているか」を自分で説明できるようにする