基礎編 STEP 2
手を動かす

状態更新で一覧を動かす

次の小さい PR として、useState を使って追加・完了切替が動く Todo 一覧へ育てる段階。

カリキュラムスタート
この STEP について詳しく見る

この STEP で作るもの

  • 追加・完了切替が動く Todo 一覧
  • ローカル state で更新される入力フォーム

PR 目安

追加・完了切替など、状態更新の1機能だけをまとめて出す。

例: feature/phase3-step2-stateful-todo-list

できるようになること

  • state を使って UI を更新できる
  • 小さい機能追加を 1 PR でマージする流れを練習できる

章一覧 (6)

目安時間 合計 105 分
  1. 1
    📄

    状態管理の概念

    ReactのuseState・useReducer・Context APIを理解し、アプリの状態をどこで・どう管理するかを設計できるようになる

    未着手 手を動かす
  2. 2
    ⌨️

    制御された input で値を state に同期する

    useState と input の value/onChange を組み合わせて、フォーム入力を React の状態と一致させる制御コンポーネントの基本を身につける

    未着手 20 分 手を動かす
  3. 3

    Todo を追加する(配列 state の更新)

    useState で配列を扱い、スプレッド構文で新しい要素を加えて Todo を追加する機能を実装する

    未着手 20 分 手を動かす
  4. 4
    ☑️

    チェックボックスで done をトグルする

    map で配列の特定要素だけを新しいオブジェクトに差し替える、不変更新の基本パターンを身につける

    未着手 20 分 手を動かす
  5. 5
    🗑️

    削除とフィルタ(filter で絞り込む)

    filter を使った配列の削除と、タブ切替で一覧を絞り込む基本パターンを身につける

    未着手 25 分 手を動かす
  6. 6
    🔍

    ブラウザで手動動作確認する

    DevTools と React DevTools を使って、Todo アプリの動きを観察し「何が起きているか」を自分で説明できるようにする

    未着手 20 分 手を動かす