第69章：useReducer と useState、どっち使う？

この章は、設計のセンスを育てる回です ✨ 「とりあえず useState で書いちゃうけど、useReducer を使った方がよかったのかな…？」 そんなモヤモヤをスッキリさせましょう 🧠💡

---

1. この章のゴール 🎯

この章が終わるころには、

• 「これは 絶対 useState でいいやつ」
• 「これはそろそろ useReducer にした方が安全かも」

が、自分で判断できるようになるのがゴールです ✌️

---

2. まずは共通点をサクッと整理 🧩

useState も useReducer も、どちらも

「コンポーネントの“状態（state）”を覚えておくためのフック」

です。React公式ドキュメントでも、 どちらも「State Hooks」グループとして紹介されています。(React)

ざっくりいうとこんな感じ👇

• useState

  • 値そのものと、それを変える関数を返す
  • 「その場でサクッと更新」するイメージ

• useReducer

  • 値（state）と、「何が起きたか」を投げる dispatch 関数を返す
  • 「ルール（reducer関数）」にしたがって更新するイメージ(React)

どっちも「状態を持つ」ための道具で、 どっちが“えらい”とかはないです。 大事なのは「どんな状態を扱いたいか」👀

---

3. useState が得意なパターン 🎀

まずは useState のおいしい使いどころから 🌸

👍 向いているケース

1. 状態がシンプル

   • 例：boolean, number, string 1〜2個くらい
   • 「モーダル開いてるかどうか」「カウント数」など

2. 更新ルールが単純

   • 例：+1 するだけ、true/false を切り替えるだけ
   • 「ボタンを押したらフラグを反転」「フォームの入力値をそのまま入れる」

3. 状態どうしの関係がほぼない

   • isOpen と count が全然関係ない…みたいな

React公式ガイドでも、 シンプルな状態管理には useState を使うのが基本だよと説明されています。(legacy.reactjs.org)

---

🌼 例1：シンプルなモーダル（useReducer はまだいらない）

import { useState } from "react";

export function SimpleModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        詳細をひらく 📖
      </button>

      {isOpen && (
        <div>
          <p>ここに詳細テキストが入ります ✨</p>
          <button onClick={() => setIsOpen(false)}>
            とじる
          </button>
        </div>
      )}
    </div>
  );
}

このくらいなら、useState 一択でOKです 🙆‍♀️

---

4. useReducer が得意なパターン 🧠

次は useReducer の出番が増えてくるケース ✍️

React公式やいろんな解説記事でも、共通してだいたいこう説明されています：

「状態が複雑になってきたら useReducer を検討しよう」(legacy.reactjs.org)

💪 向いているケース

1. 値の種類が多くて、ひとまとまりで意味がある

   • 例：ユーザー情報フォーム

     • name, email, age, address など

   • それぞれ別々に useState で持つと、更新ロジックがバラバラになりがち

2. 「こういう操作をしたら、状態はこう変わる」という“ルール”が多い

   • 例：

     • 「入力を変更した」
     • 「サーバーからデータを読んできた」
     • 「リセットボタンを押した」

   • こういう「イベント」が増えてくると、 ひとつの reducer に「ルール」としてまとめた方がスッキリ ✨

3. 前の状態をもとに次の状態を決める

   • 例：カウンターを複雑に増減させる
   • 「今の値から〇〇引いて、条件によっては別のフラグも変える」みたいなやつ

4. 複数のイベントハンドラが、似たような更新をする

   • handleChangeName
   • handleChangeEmail
   • handleReset みたいな関数が増えてきたら、reducer で一元管理した方が読みやすいことが多いです。(React)

5. あとで Context と組み合わせて“アプリ全体の状態”にしたくなりそう

   • dispatch を Context 経由で配るパターンはよく使われます。(React)

---

🌟 例2：ちょっと複雑なフォーム（useReducer が活きるパターン）

「名前・メール・年齢」を持つフォームを考えてみます。 これを全部 useState で書くと、だんだんイベントハンドラが増えて大変…というケース。

import { useReducer } from "react";

type FormState = {
  name: string;
  email: string;
  age: string;
};

type FormAction =
  | { type: "changeField"; field: keyof FormState; value: string }
  | { type: "reset" };

const initialState: FormState = {
  name: "",
  email: "",
  age: "",
};

function formReducer(state: FormState, action: FormAction): FormState {
  switch (action.type) {
    case "changeField":
      return {
        ...state,
        [action.field]: action.value,
      };
    case "reset":
      return initialState;
    default:
      // TS的にはここには来ない想定！
      return state;
  }
}

export function ProfileForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  return (
    <form>
      <div>
        <label>
          名前：
          <input
            value={state.name}
            onChange={(e) =>
              dispatch({
                type: "changeField",
                field: "name",
                value: e.target.value,
              })
            }
          />
        </label>
      </div>

      <div>
        <label>
          メール：
          <input
            value={state.email}
            onChange={(e) =>
              dispatch({
                type: "changeField",
                field: "email",
                value: e.target.value,
              })
            }
          />
        </label>
      </div>

      <div>
        <label>
          年齢：
          <input
            value={state.age}
            onChange={(e) =>
              dispatch({
                type: "changeField",
                field: "age",
                value: e.target.value,
              })
            }
          />
        </label>
      </div>

      <button
        type="button"
        onClick={() => dispatch({ type: "reset" })}
      >
        リセット 🔁
      </button>
    </form>
  );
}

💡ポイント

• 「状態をどう変えるか」のルールは formReducer に全部集約

• 画面側は「何が起きたか（Action）」だけ投げる

  • type: "changeField"
  • type: "reset"

フォーム項目が増えたり、 「サーバーから読み込んだ値で全部書き換える」 みたいな動きが増えても、reducer を見れば全体の動きが分かるのが強みです 💪

---

5. ざっくり判断フローチャート 🌈

「どっち使う？」を図でイメージしてみましょう 🧭

「ちょっと複雑になってきたな…」と感じたら useReducer に“昇格”させるタイミングかも、くらいの気持ちで大丈夫です 😊

---

6. 実務寄りな「3つのチェックリスト」✅

コードを書いていて迷ったとき、 この3つを自分に質問してみてください ✋

Q1. 「状態の数」と「関連性」はどう？

• ✅ 状態が少ない / 互いにあまり関係ない → useState でOK
• ⚠️ プロパティがたくさんあって、 「この値が変わったら、あれも一緒に直さないと…」が増えてきた → useReducer を検討

---

Q2. 更新ロジックの説明、口でスラスラ言える？

• ✅ 「ボタン押したら +1 」「押したら開く・閉じる」レベル → useState
• ⚠️ 「このボタンだと… A の値がこうで、B も変わって、条件によっては C も…」と 口頭説明が長くなる → ルールを reducer に“日本語のif文”みたいにまとめた方が安全

---

Q3. この状態、あとで別のコンポーネントにも共有したくなりそう？

• ✅ 1つのコンポーネントの中だけで完結しそう → useState
• ⚠️ Context にのせてアプリ全体で共有しそう → useReducer + Context の組み合わせは鉄板パターン 🔧

---

7. 「迷ったらこうする」ガイドライン 💖

最後に、超シンプルなマイルール案です。 （慣れてきたら自分なりにアレンジしてOK！）

1. 最初は素直に useState から始める

2. こんなサインが出てきたら useReducer を検討 👇

   • setXxx が増えすぎてきた
   • 関数名が handleChangeName, handleChangeEmail, handleChangeAge …と増殖
   • バグが「状態が食い違ってる」系で出てくる

3. 「これはフォーム全体のルールっぽいな」「一連の操作の“ストーリー”があるな」 → useReducer で“物語（Action）とルール（Reducer）”に整理する

---

8. ミニ練習問題 ✍️✨

「これ、あなたならどっちを選ぶ？」を考えてみてください 🧠

1. いいねボタン

   • 押したら liked フラグが true/false になるだけ
   • → useState or useReducer ？

2. 買い物カゴ

   • 商品を追加・削除
   • 合計金額も一緒に更新
   • 「全部削除」ボタンもある
   • → どっち？

3. プロフィール編集画面

   • 名前・メール・自己紹介文・アイコン画像URL
   • 「サーバーから読み込んだ値で初期化」「変更を保存」「リセット」
   • → どっち？

💬 もし答えに迷ったら、「こう思ったんだけど合ってる？」って聞いてくれてOKです 🌟 一緒に「設計の勘どころ」を育てていきましょ〜 🐣💻💖