1. Reactでは基本的にデータは「親から子」へ流れる

React（リアクト）では、データの流れは基本的に「一方向」です。つまり、親コンポーネントから子コンポーネントへデータを渡すのが基本です。これは「単方向データフロー」と呼ばれ、アプリ全体の状態を分かりやすく保つためのReactの考え方です。

しかし、実際の開発では、子コンポーネントで何かアクションが起こったときに、その情報を親コンポーネントに伝えたいことがあります。たとえば、ボタンが押されたことや、入力フォームに値が入力されたことなどです。

2. 親から関数（コールバック）を渡して、子から呼び出す

Reactで子コンポーネントから親コンポーネントにデータを渡す一般的な方法は、「親から関数（コールバック関数）を子に渡して、子がその関数を呼び出す」という形です。

これは電話に似ています。親が「何かあったらこの番号にかけて」と電話番号（＝関数）を渡しておき、子が必要なときにその番号に電話（＝関数を呼び出す）をかけるイメージです。

3. 実際のコードで確認しよう

親コンポーネントと子コンポーネントでデータのやりとりをする簡単な例を見てみましょう。


import React, { useState } from "react";

function ParentComponent() {
  const [childData, setChildData] = useState("");

  const handleDataFromChild = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <h2>親コンポーネント</h2>
      <p>子からのデータ: {childData}</p>
      <ChildComponent onSendData={handleDataFromChild} />
    </div>
  );
}

function ChildComponent({ onSendData }) {
  const handleClick = () => {
    onSendData("こんにちは！親コンポーネントさん！");
  };

  return (
    <div>
      <h3>子コンポーネント</h3>
      <button onClick={handleClick}>親にデータを送る</button>
    </div>
  );
}

export default ParentComponent;

（画面には「子からのデータ:」と表示され、ボタンを押すと「子からのデータ: こんにちは！親コンポーネントさん！」と表示されます）

4. propsで関数を渡すとはどういうこと？

Reactでは、親コンポーネントが子にデータを渡すために「props（プロップス）」を使います。これは「プロパティ」の略です。propsは数値や文字列だけでなく、関数も渡すことができます。

上のコードでは、onSendDataという名前で関数を渡しています。そして子コンポーネント内でその関数を呼び出すことで、親の関数が実行されて、親の状態が更新されます。

5. 受け取ったデータを親がstateに保存する

親コンポーネントでは、子から受け取ったデータをstate（ステート）に保存します。stateとは、Reactで「今の状態」を表す仕組みのことです。

上の例では、useStateというReactのフックを使って、childDataという状態を作り、そこに子からのデータを入れています。これによって、Reactが自動で画面を再描画してくれます。

6. 子からのデータに値を渡したい場合

子から渡すデータは、文字列や数値、オブジェクトなど自由に設定できます。たとえば、入力フォームの値やチェックボックスの状態などを親に伝えることもできます。

これは大規模なReactアプリではとても重要です。小さなコンポーネント単位で役割を分け、必要な情報だけをやりとりすることで、管理がしやすくなります。

7. よくあるエラーと注意点

子コンポーネントが関数を受け取っていないと、ボタンを押しても何も起きません。また、propsの関数名が一致していないと呼び出せないので注意しましょう。

また、stateの更新が非同期であることも意識してください。すぐに値が変わらないこともあるので、useEffectなどの仕組みで確認するのが安全です。

まとめ

Reactの親子コンポーネント間のデータの流れを深く理解しよう

Reactでは、コンポーネントが小さな部品として分かれており、それぞれが明確な役割を持ちながらアプリ全体を構成しています。その中でも非常に重要なのが「データの流れ」です。基本的には親から子へデータが流れる単方向の仕組みですが、実際のアプリでは子から親へ情報を渡したい場面も数多く存在します。例えば、ボタン操作やフォーム入力など、ユーザーが起こしたアクションを親コンポーネントに通知し、画面全体の状態を変えたい場合です。このような場面で役立つのが「親から関数を渡し、その関数を子が呼び出す」という方法です。記事内で紹介したように、親が子に渡す関数は「コールバック関数」と呼ばれ、子が必要なタイミングで実行することで親へデータを伝えることができます。これはまるで親が子に「必要なときはこの番号に連絡してね」と電話番号を渡し、子がその番号に電話をかけることで情報を伝えるようなイメージです。また、このデータの受け渡しはReactの特徴である「props」を介して行われます。propsは複数のコンポーネント間で値を渡すための仕組みで、文字列や数値だけでなく、関数もそのまま渡せる柔軟な機能を持っています。この性質により、Reactではコンポーネント内の役割が明確になり、保守性の高いコードを組み立てることができるようになります。子コンポーネントが受け取った関数を実行すると、親がそのデータをstateに保存し、それに応じて画面を再描画します。Reactはstateが変わった部分だけを効率的に更新する仕組みを持っているため、ユーザーにとって自然でスムーズな動作が実現されます。これにより、ユーザーが操作した瞬間に画面が反応し、動的なUIを簡単に構築できるという強みがあります。大規模アプリでは、親子コンポーネント間のデータ受け渡しが複雑になりがちですが、今回のように「親が関数を渡して子がそれを実行する」という基本構造を理解していれば、どれほど複雑な画面でも構造を組み立てやすくなります。特にフォームや入力値の管理、複数の子コンポーネントから親へ情報を届けるようなケースでは、この仕組みが必要不可欠です。さらに、Reactでは関数だけでなく、オブジェクトや配列などの構造を子から親へ渡すことも可能です。データの内容は自由に決められるため、用途に合わせてあらゆるパターンを実現できます。この柔軟性により、Reactはさまざまな種類のアプリ開発に適した強力なフレームワークとして、多くの開発者に愛用されています。今回学んだ「子 → 親へのデータ送信」の仕組みは、Reactの理解を深めるうえで非常に重要な概念です。複雑なアプリでも同じ構造が繰り返し使われるため、ひとつひとつの動きを丁寧に理解しておくことで、Reactの開発がより快適で楽しくなります。

サンプルコードでさらに理解を深めよう

記事と同じ構造を使いながら、より実践的な親子連携の例を示します。


import React, { useState } from "react";

function MessageParent() {
  const [log, setLog] = useState([]);

  const receiveMessage = (msg) => {
    setLog([...log, msg]);
  };

  return (
    <div class="p-3 border mt-3">
      <h2>親コンポーネントログ</h2>
      <ul>
        {log.map((l, index) => (
          <li key={index}>{l}</li>
        ))}
      </ul>
      <MessageChild onSend={receiveMessage} />
    </div>
  );
}

function MessageChild({ onSend }) {
  const handleSend = () => {
    onSend("子コンポーネントから新しいメッセージが届きました！");
  };

  return (
    <div class="p-2 border mt-3">
      <h3>子コンポーネント</h3>
      <button class="btn btn-primary" onClick={handleSend}>
        メッセージを送る
      </button>
    </div>
  );
}

export default MessageParent;

この例では、子コンポーネントが送ったメッセージが親のログリストに追加されていきます。複数のデータを受け取りたい場合でも、stateに配列を使うことで簡単に管理できることがよくわかります。

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

生徒

「子から親にデータを渡す方法って難しそうだと思ってたけど、関数を渡して呼び出すだけなんですね！」

先生

「そうなんです。Reactは仕組みを理解するととても自然に考えられるようになりますよ。」

生徒

「propsで関数を渡せるっていうのも新しい発見でした！データの流れがよく分かりました。」

先生

「その理解はとても大事です。親子コンポーネントの関係を理解すると、もっと複雑な画面も作れるようになりますよ。」

生徒

「今日の学びを活かして、もっと実践的なReactアプリに挑戦してみます！」