第28章：Propsの型定義（関数 編）

親に「押されたよ〜！」って教えるコールバック関数の型 📣

この章では、「関数をPropsとして渡す」 という React では超よく出てくるパターンを、TypeScriptの型付きでしっかり押さえていきます ✨ テーマはずばり：

「ボタンを押したら、子コンポーネントから親コンポーネントにお知らせする」📨

---

28-1 🧠 なんで「関数」をPropsで渡すの？

Reactでは、

• 見た目 👉 子コンポーネント（Button など）
• 状態・処理 👉 親コンポーネント（App など）

に分けて書くことが多いです。

でも、ボタンを押したときに 「親の状態を変えたい！」ってこと、よくありますよね？🤔

そこで登場するのが

「親が用意した関数を、子にPropsとして渡す」

というパターンです。

• 親：handleClick という関数を用意して、子に渡す
• 子：props.onClick() を呼ぶだけ（中身は知らない）

という役割分担になります ✨

---

28-2 ✍️ 関数の型の基本記法

TypeScriptで「関数の型」はこう書きます。

• 引数なしで、何も返さない関数

() => void

• 数字を1つ受け取って、何も返さない関数

(id: number) => void

この形をそのままPropsの型に埋め込んでいきます 💡

---

28-3 🧪 基本パターン：押したらカウントアップするボタン

まずは 「引数なしで親に伝える」 超シンプル版から行きましょう 💪

✅ 子コンポーネント：CounterButton.tsx

type CounterButtonProps = {
  // 親からもらう「押されたときに呼ばれる関数」
  onClick: () => void;
};

export function CounterButton({ onClick }: CounterButtonProps) {
  return (
    <button onClick={onClick}>
      カウントアップ 👍
    </button>
  );
}

ポイント ✨

• type CounterButtonProps = { onClick: () => void; }

  • onClick は「引数なし・返り値なし」の関数だよ〜という意味

• JSX側ではそのまま onClick={onClick} と渡してOK （イベント型の話は第35章以降でやります📝）

✅ 親コンポーネント：App.tsx

import { useState } from "react";
import { CounterButton } from "./CounterButton";

export function App() {
  const [count, setCount] = useState(0);

  // 子から呼び出してもらう関数
  const handleIncrement = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <p>現在のカウント：{count}</p>
      <CounterButton onClick={handleIncrement} />
    </div>
  );
}

ここでの流れはこんな感じです 👇

1. App が handleIncrement を定義
2. CounterButton に onClick として渡す
3. ユーザーがボタンを押す
4. CounterButton 内の onClick（＝handleIncrement）が呼ばれる
5. count が増える 🎉

---

28-4 📊 Mermaidで「データの流れ」をイメージしよう

関数Propsの流れを図にすると、こんなイメージです 🧩

• 子は「ボタンが押されたよ！」とだけ伝える 📢
• 「どうカウントするか？」などのロジックは、親が全部担当 🧮

この「見た目は子、ロジックは親」という分担は、Reactでとっても大事な考え方です ✨

---

28-5 🎯 引数付きの関数を渡すパターン

次は少しレベルアップして、 「どのアイテムが押されたか」 みたいな情報も渡してみます。

例：TODOリストの「削除」ボタン 🗑️

✅ 子コンポーネント：TodoItem.tsx

type TodoItemProps = {
  id: number;
  text: string;
  // 「どのIDを削除してほしいか」を親に教える
  onDelete: (id: number) => void;
};

export function TodoItem({ id, text, onDelete }: TodoItemProps) {
  const handleClick = () => {
    onDelete(id);
  };

  return (
    <li>
      {text}
      <button onClick={handleClick}>削除</button>
    </li>
  );
}

ポイント ✨

• onDelete: (id: number) => void;

  • 「数字（ID）を1つ受け取って何も返さない関数」の型

• 子コンポーネントは onDelete(id) を呼ぶだけ → 親が「そのIDのTODOを消す」処理を持つ

✅ 親コンポーネント：TodoList.tsx

import { useState } from "react";
import { TodoItem } from "./TodoItem";

type Todo = {
  id: number;
  text: string;
};

export function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: "レポートを書く" },
    { id: 2, text: "Reactの勉強をする" },
  ]);

  const handleDelete = (id: number) => {
    setTodos((prev) => prev.filter((todo) => todo.id !== id));
  };

  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          id={todo.id}
          text={todo.text}
          onDelete={handleDelete}
        />
      ))}
    </ul>
  );
}

• handleDelete の型は、引数id: number を取る関数 → onDelete の型 (id: number) => void とピッタリ一致 ✅
• VS Code で handleDelete の上にマウスを乗せると const handleDelete: (id: number) => void と表示されるはずです 🧸

---

28-6 🍣 関数型でよくあるつまずきポイント

❓ Q1: () => void と () => any って何が違うの？

• () => void

  • 「何も返さないよ」という意味（よく使う）

• () => any

  • 「何を返してもいい」という意味（あまり使わない）

イベントハンドラや「通知だけ」が目的のコールバックは、基本 () => void でOK です ✨

---

❓ Q2: onClick?: () => void; みたいに「?」をつけるのは？

これは第30章で詳しくやりますが、少しだけ 👀

• onClick: () => void; → 絶対に渡してもらわないとダメ！
• onClick?: () => void; → 「あってもなくてもOK」という意味（オプショナル）

この章では まずは必須版 (onClick: () => void) をしっかりマスターしましょう 💪

---

❓ Q3: React.MouseEvent とかは使わないの？

• イベントオブジェクトの型（React.MouseEvent など）は Module 4（第36章〜）でしっかりやる 予定です 📚
• この章では「親に渡す関数の形（＝コールバックの型）」に集中しましょう ✅

---

28-7 💡 まとめ：関数Propsの型、これだけ覚えよう！

よく使うパターンを3つに整理しておきます ✨

1. なにも受け取らないコールバック

   type ButtonProps = {
     onClick: () => void;
   };

2. IDを受け取るコールバック

   type TodoItemProps = {
     onDelete: (id: number) => void;
   };

3. 文字列を受け取るコールバック

   type SearchProps = {
     onSearch: (keyword: string) => void;
   };

「(引数の型) => 返り値の型」という形さえ読めるようになれば、 関数Propsの型はもう怖くありません 🥰

---

28-8 🏃‍♀️ ミニ練習問題（やってみよ〜！）

時間があるときに、次の2つを作ってみてください ✏️

1. 「いいねボタン」コンポーネント

   • Props:

     • count: number
     • onClick: () => void

   • 親で count を管理して、ボタンを押すと「いいね」が増える ❤️

2. 「お気に入り登録」リスト

   • 親が items: { id: number; name: string }[] を持つ
   • 子に onToggleFavorite: (id: number) => void を渡す
   • クリックされたアイテムの id を親が受け取り、 「お気に入り」に入っているかどうかをトグルする ⭐

---

次の章（第29章）では、この考え方をそのまま使って 実際に Button.tsx を1つの部品として作っていきます 🎀

関数Propsの型をしっかりイメージしながら、 「親がロジック、子が見た目」という分担に慣れていきましょう〜 🌸