先生と生徒の会話形式で理解しよう

生徒

「Reactで子コンポーネントから親に情報を伝えることってできますか？」

先生

「できますよ。そのときに使うのがPropsという仕組みです。Propsを使えば、親から子にデータや関数を渡せます。」

生徒

「えっ？関数も渡せるんですか？なんだか難しそうです…」

先生

「安心してください。具体的な例を見ながら説明すると、とてもシンプルに理解できますよ！」

1. Propsとは？

Props（プロップス）は、Reactでコンポーネントに外側から値を渡すための仕組みです。イメージとしては、親が子どもに「必要なものが詰まったカバン」を持たせるようなものです。子ども（子コンポーネント）は中身を自由に使うことができますが、カバンの中身自体を勝手に変えることはありません。

渡せるものは文字や数値だけに限らず、実は関数もPropsとして渡すことができます。この「関数を渡せる」という特徴はとても重要で、Reactでは子コンポーネントが親に対して「ボタンが押されたよ！」「この値を送りたいよ！」と知らせるために頻繁に使われます。

たとえば、以下のように親から子へ「あいさつメッセージ」をPropsで渡し、子コンポーネントがそのまま表示するシンプルな例を見てみましょう。


function Child(props) {
  return (
    <h2>{props.greet}</h2>
  );
}

function App() {
  return (
    <div>
      <Child greet="こんにちは！ReactのPropsです" />
    </div>
  );
}

export default App;

（画面に「こんにちは！ReactのPropsです」と表示されます）

このように、Propsは「子に何を渡すか」を親側で決められる便利な仕組みです。まずは値を渡す基本を覚え、次のステップとして関数を渡してイベント通知に応用していくと、Reactで作れる表現が一気に広がります。

2. 子から親にイベントを伝える仕組み

Reactでは、親から子に値を渡すだけでなく、子が親に「今こういう操作をしたよ！」と知らせることもできます。このときに使われるのが、Propsとして関数を渡し、子がその関数を呼び出すという方法です。普段の生活に置き換えるなら、子どもが親に「終わったよ！」と声をかけるようなイメージです。

子から親にイベントを伝えるときは、次の3つのステップで考えると理解しやすくなります。

① 親コンポーネントで「親が受け取りたい動作」を関数として作る
② その関数をPropsとして子コンポーネントに渡す
③ 子コンポーネント側で受け取った関数を、必要なタイミングで呼び出す

この仕組みを使うことで、Reactアプリ内の情報が一方通行にならず、自然なやり取りができるようになります。たとえば、子のボタンが押されたことを親に知らせる、フォーム入力の完了を親に伝える、数値の変化を親に渡すといった操作が可能になります。

ここで、子コンポーネントが親へ「ボタンが押されたよ」と通知する、とてもシンプルな例を見てみましょう。


function Child(props) {
  return (
    <button onClick={props.notify}>押して知らせる</button>
  );
}

function App() {
  const handleNotify = () => {
    alert("子から通知がありました！");
  };

  return (
    <div>
      <Child notify={handleNotify} />
    </div>
  );
}

export default App;

（ボタンを押すと「子から通知がありました！」というアラートが出ます）

このように、親が渡した関数を子が呼び出すだけで、簡単に「イベント通知」が成立します。仕組み自体はとてもシンプルなので、最初は怖がらずに「親が用意したボタンを子が押す」と捉えると理解しやすくなります。

3. 実際のコード例

ここまでで、Propsを使って「子から親にイベントを伝える流れ」はイメージできてきたと思います。次は、実際に親コンポーネントと子コンポーネントを用意して、ボタンをクリックしたときに親のメッセージが書き換わるシンプルなサンプルコードを見てみましょう。難しいことはしていないので、1行ずつ追いかければReact初心者の方でも十分理解できます。

流れとしては、親コンポーネントが「メッセージを変更する関数」と「今のメッセージ」を持ち、その関数をPropsで子に渡します。子はその関数をボタンのクリック時に呼び出すだけ、という構成です。


import React, { useState } from "react";

function Child(props) {
  return (
    <button onClick={props.onClickButton}>
      親にイベントを伝える
    </button>
  );
}

function App() {
  const [message, setMessage] = useState("こんにちは！");

  const handleClickFromChild = () => {
    setMessage("ボタンがクリックされました！");
  };

  return (
    <div>
      <h1>{message}</h1>
      <Child onClickButton={handleClickFromChild} />
    </div>
  );
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

この例では、親コンポーネントAppがmessageという状態と、handleClickFromChildという関数を持っています。この関数をonClickButtonという名前のPropsとして子コンポーネントChildに渡し、子はonClick={props.onClickButton}としてそのままボタンにセットしています。つまり、「どんなメッセージに変えるか」は親が決めていて、「いつ呼び出すか」だけを子が担当している形です。Propsを通じて役割分担ができている、という点を意識して読み解くと、コードの意味がぐっと理解しやすくなります。

4. Propsで関数を渡すときのポイント

名前は自由に決められる： 上の例ではonSendという名前で渡しましたが、onClickやnotifyParentでも構いません。
アロー関数を使うと便利： () => { ... }という短い書き方を使うと読みやすくなります。
複数の引数も渡せる： 子から数字や文字列を一緒に渡して、親で受け取ることもできます。

5. Propsとイベント通知を使う場面

初心者の方は「どんなときに使うの？」と疑問に思うかもしれません。実は日常的にとてもよく使います。

子コンポーネントのフォームに入力された内容を親でまとめて管理したいとき
モーダル（ポップアップ画面）の閉じるボタンを押したことを親に知らせたいとき
カウンターやゲームのスコアなど、状態を親に伝えて全体で共有したいとき

この仕組みを理解すると、Reactアプリを作るときにぐっと自由度が広がります。

6. 複数の値をまとめて親に渡したいときの考え方

子コンポーネントから親にイベントを通知するとき、「ボタンが押された」だけでなく、どのボタンが押されたか・今の値はいくつかなど、複数の情報をまとめて渡したくなる場面もよくあります。その場合も考え方は同じで、親で用意した関数に対して、子から必要な情報を引数として渡してあげればOKです。

たとえば、子コンポーネント側で「何番目のボタンが押されたか」という番号を親に知らせたい場合は、次のようにして番号を引数として渡します。


function Child(props) {
  return (
    <button onClick={() => props.onSelect(1)}>
      1番目を選択
    </button>
  );
}

function App() {
  const handleSelect = (index) => {
    console.log(index + "番目が選ばれました");
  };

  return (
    <div>
      <Child onSelect={handleSelect} />
    </div>
  );
}

export default App;

（ボタンを押すと、コンソールに「1番目が選ばれました」と表示されます）

このように、props.onSelect(1)のように引数をつけて呼び出すことで、子から親へ細かな情報を一緒に届けることができます。ReactのPropsとイベント通知は、「関数を渡して、必要なデータを引数で返す」というシンプルなルールさえ押さえておけば、用途に合わせていくらでも応用していけるのが特徴です。

7. フォーム入力と組み合わせたイベント通知のイメージ

実際のReactアプリでは、単にボタンを押したことを伝えるだけでなく、入力フォームの内容を親コンポーネントに渡して管理するケースがとても多くあります。たとえば、ユーザー名の入力欄は子コンポーネントに作り、その値は親でまとめて状態管理する、といった使い方です。

ここでは、子コンポーネントで入力されたテキストを、そのまま親コンポーネントへ渡しているイメージをコードで確認してみましょう。


import { useState } from "react";

function ChildForm(props) {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
    props.onChange(e.target.value);
  };

  return (
    <input
      value={text}
      onChange={handleChange}
      placeholder="名前を入力してください"
    />
  );
}

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <h1>こんにちは、{name || "ゲスト"}さん</h1>
      <ChildForm onChange={setName} />
    </div>
  );
}

export default App;

（入力欄に名前を入力すると、見出しの「ゲスト」が入力した名前にリアルタイムで変わります）

この例では、子コンポーネントの入力値をonChange経由で親に渡し、親側のnameという状態に反映しています。フォームの値を親で一元管理できるようになると、画面全体のバリデーションや送信処理をまとめやすくなり、Reactらしい状態管理とProps活用の流れを自然に身につけることができます。

8. Propsでイベント通知を書くときに意識したいこと

最後に、Propsで関数を渡して子から親にイベント通知を行うときに、初心者の方でも意識しておくと迷いにくくなるポイントを整理しておきます。小さなコツですが、Reactのコンポーネント設計がぐっと読みやすくなります。

関数名に「何が起きるか」を込める： onSendやonChangeNameなど、「何を親に伝えるコールバックなのか」が分かる名前にすると、後からコードを読んだときに意図を思い出しやすくなります。
親が「責任を持つ処理」をまとめる： 子はあくまできっかけを伝える役、実際に状態を更新したり、API通信をしたりするのは親が担当する、という役割分担を意識すると整理しやすくなります。
Propsの数が増えすぎたら一度立ち止まる： 子に渡すPropsが多くなりすぎたと感じたら、コンポーネント分割や状態の持ち方を見直すサインです。

ReactのPropsとイベント通知の仕組みは、一度慣れてしまえば「親が関数を用意して、子がそれを呼ぶだけ」というシンプルなものです。最初は小さなサンプルから試し、少しずつフォーム入力やボタン操作など実際の画面に近いパターンへ広げていくと、自然と考え方が身についていきます。

まとめ

ReactのPropsで親子コンポーネントの連携を深く理解しよう

Reactの開発では、親と子のコンポーネントが互いに情報を渡し合いながら動く仕組みを理解することがとても重要です。特に、今回取り上げた「Propsを使って関数を渡し、子から親にイベントを通知する方法」は、Reactを使ったアプリづくりの基礎中の基礎ともいえる考え方です。親コンポーネントが子にデータを渡すだけでなく、子が親へ知らせたい情報を届けることで、画面全体の状態を一元管理する構造が生まれます。この仕組みはフォーム入力やモーダル操作、カウンター更新、画面遷移のトリガーなど、あらゆる場面で利用されます。 Reactはコンポーネント単位で画面を組み立てるライブラリであり、それぞれが独立した小さな部品として動くからこそ、Propsが重要になります。特に、関数をPropsとして渡す仕組みは、単なるデータの受け渡しを超えて、アプリの状態管理や画面の再描画に直接影響します。子から親へイベントを伝えることで、親コンポーネントは更新すべき情報を知り、その更新がさらに子コンポーネントに反映されるという循環が生まれます。この動作は、人がボタンを押し、親が結果をまとめて表示し、また次の操作につなげるといった流れをそのままコードで再現したようなものです。また、Propsで関数を渡すときには、適切な名前付けが理解のしやすさを左右します。例えばonSendやonClickSave、notifyParentなど、機能を連想しやすい名前にすることで、他の開発者が読んだときにも意味を直感的に把握できます。Reactはチーム開発されることが多いため、このような工夫は品質にも関わる大切なポイントです。さらにアロー関数を使うことで簡潔で読みやすくなり、長い処理が必要な場合でもコード全体がスッキリと整理されます。今回の実装例では、子コンポーネントのボタン操作が親のメッセージを更新するという仕組みを扱いました。実際にはメッセージだけでなく、数値、フラグ、オブジェクト、リストなど多様なデータを扱うことができます。そして、複数の引数を渡したり、入力内容を整形してから渡したりと、用途によって応用も広がります。この柔軟性がReactのPropsの魅力であり、アプリ全体をきめ細かく制御するための鍵にもなります。さらに、実務では複数の子コンポーネントがそれぞれ親に情報を送る構成もよくあります。例えば入力フォームがいくつもある場合、それぞれの子から親に入力が渡り、親がそれらを集計して画面全体の状態を管理します。こうした動きは複雑に見えますが、根本となる考え方は今回学んだPropsの仕組みとまったく同じです。Reactを始めたばかりの方も、今回の例を応用していくことでより大きなコンポーネント構造を扱えるようになります。

サンプルコードの振り返り

ここで、記事内の使い方と同じような構造を用いた確認コードをもう一度示します。ReactでのProps活用の流れをしっかり押さえられるよう、理解の定着につなげてください。


function MessageChild(props) {
  return (
    <div class="p-2 border">
      <button class="btn btn-primary" onClick={() => props.onUpdate("子から届いた最新メッセージ")}>
        親にメッセージを送信
      </button>
    </div>
  );
}

function MessageParent() {
  const [text, setText] = useState("初期メッセージ");

  const updateText = (msg) => {
    setText(msg);
  };

  return (
    <div class="mt-3">
      <h3>{text}</h3>
      <MessageChild onUpdate={updateText} />
    </div>
  );
}

このコードでは、MessageChildがボタンを押したときにonUpdateを実行し、その結果がMessageParentのtextに反映されます。Propsの基本構造と流れをしっかり押さえておくことで、実際の開発場面でも確かな理解を持って活用できます。

先生と生徒の振り返り会話

生徒

「今日のPropsの仕組み、前よりずっと理解できた気がします！関数まで渡せるなんて最初は難しそうでしたけど、使い方を知ると便利ですね。」

先生

「そうでしょう？Reactでは関数を渡して子から親へイベントを伝えることがとても大切なんです。どんなアプリでも必ずと言っていいほど登場しますよ。」

生徒

「ボタンで通知したり、フォームの入力をまとめたり、本当にいろんな場面で使えそうですね！」

先生

「そのとおりです。Propsを理解するとReactのコードが一気に読みやすくなりますし、より大きなアプリにも挑戦できるようになりますよ。」

生徒

「これからはPropsを使った親子連携を意識して、もっと自然にReactを書けるようになってみます！」