第70章：練習：カウンターアプリを useReducer で作り直す (Actionの型もちゃんと定義して！)

「型のついた State ＋ Action ＋ reducer」の流れを、手を動かしながら体に覚えさせちゃいましょう 💪

---

1️⃣ この章のゴール

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

• useState で作ったカウンターを 👉 useReducer で書き直せるようになる
• State の型と Action の型を 👉 自分で定義できるようになる
• dispatch({ type: "..." }) の流れが 👉 なんとなくじゃなくて「ちゃんと分かってる！」状態になる

という感じを目指します 🎯

---

2️⃣ ファイルを用意しよう ✍️

プロジェクトはすでに Vite＋React＋TS でできている前提で進めます。

1. src フォルダの中に CounterWithReducer.tsx というファイルを作る
2. いったん、最小構成だけ書いておきます。

// src/CounterWithReducer.tsx
import { useReducer } from "react";

export function CounterWithReducer() {
  return (
    <div>
      <h2>useReducer カウンター</h2>
      <p>ここにカウンターを作るよ！</p>
    </div>
  );
}

次に、App.tsx から呼び出せるようにします。

// src/App.tsx
import { CounterWithReducer } from "./CounterWithReducer";

export function App() {
  return (
    <div>
      <h1>第70章：useReducer カウンター 💫</h1>
      <CounterWithReducer />
    </div>
  );
}

npm run dev をして、ブラウザに 「useReducer カウンター」と表示されていれば準備OKです ✅

---

3️⃣ State と Action の「型」を決める 🧩

この章の主役は State と Action の型づけです！ まずは「カウンターがどんな状態を持っているか？」を言葉で整理してみましょう。

• 今回の State はとってもシンプル 👉 「数字がひとつ」だけ

なので、CounterState の型はこんな感じになります。

type CounterState = {
  count: number;
};

次に、どんな「操作（Action）」ができるかを決めます。

今回はこの3つにしましょう ✨

1. 1 増やす（increment）
2. 1 減らす（decrement）
3. 0 にリセットする（reset）

それを型にすると、こうなります👇

type CounterAction =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset" };

ポイント 💡

• type プロパティが「どのアクションか」を表す「ラベル」
• | でつないで「どれか1つ」という形にしている（ユニオン型）

この2つを CounterWithReducer の上あたりに書きます。

// src/CounterWithReducer.tsx
import { useReducer } from "react";

type CounterState = {
  count: number;
};

type CounterAction =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset" };

export function CounterWithReducer() {
  // ここにあとで useReducer を書くよ！
  return (
    <div>
      <h2>useReducer カウンター</h2>
      <p>ここにカウンターを作るよ！</p>
    </div>
  );
}

---

4️⃣ reducer 関数を書く 🔁

次は、State と Action を受け取って 「次の State を返す」だけの関数 を作ります。

イメージはこんな感じ 👇

「今の状態」と「指示書（Action）」を渡すと、 「じゃあ新しい状態はこうだね！」って返してくれる係。

コードで書くとこうなります。

function counterReducer(state: CounterState, action: CounterAction): CounterState {
  switch (action.type) {
    case "increment":
      return {
        count: state.count + 1,
      };
    case "decrement":
      return {
        count: state.count - 1,
      };
    case "reset":
      return {
        count: 0,
      };
    default:
      // ここには基本的に来ないはずだけど、型的に必要な保険
      return state;
  }
}

ここで大事なポイント ✨

• 必ず新しいオブジェクトを返す state.count++ みたいに、元の state を直接いじらない！
• switch (action.type) の中で 「どの Action ならどう変えるか」 を全部書く

この counterReducer 関数も、さっきの型定義のすぐ下に書いておきます。

---

5️⃣ useReducer でコンポーネント完成させる 🌟

いよいよ useReducer の出番です！

1. 最初の状態（初期値）を用意
2. useReducer で state と dispatch を受け取る
3. ボタンから dispatch({ type: "..." }) を呼ぶ

という流れになります。

完成形のコンポーネントをいったんドン！と置きますね 💥

// src/CounterWithReducer.tsx
import { useReducer } from "react";

type CounterState = {
  count: number;
};

type CounterAction =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset" };

function counterReducer(state: CounterState, action: CounterAction): CounterState {
  switch (action.type) {
    case "increment":
      return {
        count: state.count + 1,
      };
    case "decrement":
      return {
        count: state.count - 1,
      };
    case "reset":
      return {
        count: 0,
      };
    default:
      return state;
  }
}

const initialState: CounterState = {
  count: 0,
};

export function CounterWithReducer() {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div style={{ border: "1px solid #ccc", padding: "16px", borderRadius: "8px" }}>
      <h2>useReducer カウンター 🧮</h2>
      <p style={{ fontSize: "24px", fontWeight: "bold" }}>{state.count}</p>

      <div style={{ display: "flex", gap: "8px" }}>
        <button onClick={() => dispatch({ type: "decrement" })}>−1</button>
        <button onClick={() => dispatch({ type: "increment" })}>+1</button>
        <button onClick={() => dispatch({ type: "reset" })}>リセット</button>
      </div>
    </div>
  );
}

コードの中身を分解してみる 🪄

✅ initialState

const initialState: CounterState = {
  count: 0,
};

• 最初の状態をひとまとめにしておく
• 型はちゃんと CounterState と一致させる

✅ useReducer のところ

const [state, dispatch] = useReducer(counterReducer, initialState);

• state 👉 今の状態（{ count: number }）
• dispatch 👉 「この Action を実行して〜」とお願いする関数

✅ ボタンから Action を飛ばす

<button onClick={() => dispatch({ type: "increment" })}>+1</button>

• onClick の中で dispatch を呼んでいる
• 渡しているのは CounterAction のどれか1つ （type: "increment" だから OK ✅）

VS Code で dispatch にカーソルを当てると、 dispatch(action: CounterAction): void みたいな型が出てくるはずです 👀 「Action の型ちゃんと効いてるんだ〜」と確認してみてください ✨

---

6️⃣ データの流れを図でイメージしよう 🎨

useReducer の流れは、ざっくりいうとこんな感じです。

1. ボタンをクリック
2. dispatch({ type: "..." }) が呼ばれる
3. counterReducer(state, action) が呼ばれる
4. 新しい state が返ってくる
5. React が画面を描き直す

Mermaid で図にすると、こう 👇

「イベント → dispatch → reducer → 新しい state → 再描画」 この流れをなんとなく頭に置いておくと、 もう useReducer は怖くなくなります 🥰

---

7️⃣ ちょこっとアレンジ練習 ✏️💕

ここからは自分の手でコードを変えてみるミッションです！

🔁 練習1：2ずつ増えるボタンを追加

やってみてほしいこと：

1. Action に type: "add2" を追加する
2. counterReducer に "add2" のケースを追加して count: state.count + 2 にする
3. ボタンを1つ増やして、dispatch({ type: "add2" }) を呼ぶ

👉 ヒント：Action の型はこんな感じで増やせます。

type CounterAction =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset" }
  | { type: "add2" };

🌈 練習2：マイナスにならないようにしてみる

count が 0 以下にならないようにしてみましょう。

• "decrement" のところで state.count - 1 が 0 未満になりそうなら、0 を返すようにしてみる

---

8️⃣ まとめ：useReducer の「型」が守ってくれる 🛡️

この章でやったことを整理すると…

• State の型（CounterState）を定義した
• Action の型（CounterAction）を ラベル付きのユニオン型として定義した
• counterReducer(state, action) の中で switch (action.type) で分岐して、新しい state を返した
• useReducer ＋ dispatch で 「指示書（Action）」を投げて状態を変えるスタイル に慣れた

useState よりちょっと手順は増えますが、そのぶん

• 状態の変化が一本の道にまとまる
• Action の型で「ありえない操作」を防げる
• アプリが大きくなっても整理しやすい

というメリットがあります ✨

次にもっと複雑な画面を作るときも、 このカウンターのコードをテンプレートとしてコピペして ちょっとずつ書き換えていけば OK です 🥳

おつかれさまでした〜！💐 useReducer、だいぶ仲良くなれたはずです 💘