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

生徒

「Reactで複数のコンポーネントに同じデータを渡したいんですが、どうすればできますか？」

先生

「ReactではPropsという仕組みを使うことで、ひとつのデータをいろいろなコンポーネントに渡せますよ。」

生徒

「Propsってなんですか？使い方がよくわかりません…。」

先生

「大丈夫です。PropsはReactの基本なので、仕組みを理解すればとても簡単に使えるようになります！」

1. Propsとは？初心者でもわかるReactの基礎知識

Reactを学び始めると必ず登場するのが「Props（プロップス）」という言葉です。Propsとは、コンポーネントに外からデータを渡すための仕組みで、Reactで画面を組み立てるうえで欠かせない存在です。たとえるなら、プレゼントを箱に入れて相手に渡すようなものです。箱がPropsで、中身がデータというイメージです。

Reactでは画面を部品（コンポーネント）として組み立てるため、それぞれの部品に必要な情報を届ける必要があります。その役割を果たしているのがPropsです。たとえば「名前を表示するコンポーネント」に名前を渡す、「色を変更するコンポーネント」に色の情報を渡す、といったときに使います。

また、Propsは読み取り専用で、子コンポーネントの側で書き換えることはできません。これはReactのデータの流れをシンプルに保つための大事なルールです。まずは、渡されたデータをどう扱うかを理解するところから始めましょう。


// Propsの簡単な例
function Hello(props) {
  return <p>こんにちは、{props.name}さん！</p>;
}

function App() {
  return <Hello name="太郎" />;
}

この例では、「太郎」というデータをPropsとして渡し、子コンポーネントが受け取って表示しています。とてもシンプルですが、Reactのデータ受け渡しの仕組みがぎゅっと詰まった基本の形です。

2. 複数コンポーネントに同じデータを渡す仕組み

Reactでは、ひとつの親コンポーネントがデータを管理し、そのデータを必要な子コンポーネントへPropsを使って共有できます。これにより、画面の複数の場所で同じ情報を扱いたい場合でも、親が持つ1つのデータを参照するだけなので管理がとてもシンプルになります。たとえば「ユーザー名」「共通メッセージ」「現在のスコア」などをまとめて親が持ち、必要な子だけが受け取るイメージです。

初心者にもわかりやすいたとえを使うと、ひとつの大きな鍋で作ったスープを小皿に取り分けるようなものです。鍋が親コンポーネント、小皿が子コンポーネントです。どの小皿も同じスープ（＝同じデータ）を受け取れるため、常に一貫した内容を保てます。

実際には、親が持っている変数を子コンポーネントの「属性」として渡すだけなので、書き方もとてもシンプルです。以下は同じデータを複数の子へ渡す最も基本的な形です。


function Info(props) {
  return <p>受け取ったデータ：{props.data}</p>;
}

function App() {
  const shared = "同じデータを子に渡しています";

  return (
    <div>
      <Info data={shared} />
      <Info data={shared} />
    </div>
  );
}

このように、親がデータを1つ持っておき、それを複数の子に渡すだけで画面全体に統一感を持たせることができます。Reactでアプリを作る上で、もっとも基本でありながら頻繁に使う大切な考え方です。

3. ReactでPropsを使ってデータを渡すサンプルコード

では、実際にPropsを使って複数のコンポーネントに同じデータを渡す方法を見てみましょう。ここでは、「共通のメッセージ」を3つの子コンポーネントに渡して表示する例を紹介します。


import React from "react";

function Message(props) {
  return <p>{props.text}</p>;
}

function App() {
  const sharedMessage = "共通のメッセージです";

  return (
    <div>
      <h1>複数コンポーネントに同じメッセージを渡す例</h1>
      <Message text={sharedMessage} />
      <Message text={sharedMessage} />
      <Message text={sharedMessage} />
    </div>
  );
}

export default App;

（画面に「共通のメッセージです」が3つ表示されます）

このコードでは、親であるAppコンポーネントにsharedMessageという変数があります。この変数を3つのMessageコンポーネントへ渡しています。「text」というProps名を使って、子がそのまま表示できるようにしています。

4. PropsとStateを組み合わせてより便利に使う

Propsは「親から子へデータを渡すための仕組み」でしたが、Stateは「コンポーネントが内部で持つデータ」です。この2つを組み合わせると、ひとつのStateを親が管理し、その値を複数コンポーネントにPropsとして渡して画面を動的に更新できるようになります。

例えば次のように、親コンポーネントが状態を変更し、それが複数の子コンポーネントに反映される例を作ることができます。


import React, { useState } from "react";

function Display(props) {
  return <p>現在の値: {props.value}</p>;
}

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

  return (
    <div>
      <h1>複数コンポーネントで状態を共有する例</h1>
      <Display value={count} />
      <Display value={count} />
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default App;

（ボタンを押すと「現在の値」が複数の表示エリアですべて同時に更新されます）

このように、StateはひとつでもPropsで共有すれば複数の子コンポーネントに影響を与えられます。画面のいろいろな部分で同じデータを使うアプリにとても便利です。

5. Propsでデータを渡すときの注意点

Propsはとても便利ですが、使うときに気をつけたいポイントもあります。ひとつは「Propsは変更できない」という点です。子コンポーネントが受け取ったPropsを直接書き換えるとエラーにつながるため、親コンポーネントで変更を行う必要があります。

また、データが増えて複雑になってくるとPropsの受け渡しが増えて管理が大変になることがあります。このような場合には、Contextという機能や状態管理ライブラリを使うこともありますが、まずはPropsの仕組みをしっかり理解しておくことが大切です。

複数コンポーネントで同じデータを扱いたいという場面は多いので、Propsの扱い方を丁寧に理解しておくことでReactの学習がよりスムーズに進みます。

まとめ

Reactで複数のコンポーネントに同じデータを渡す方法について学んできましたが、あらためて整理してみると、Propsという仕組みが持つ重要性がよく理解できます。Reactは画面を小さな部品に分けて組み合わせる構造になっているため、データをそれぞれのコンポーネントへ効率よく届ける仕組みが欠かせません。今回扱ったPropsは、その役割を持つ基本的な技術で、Reactを使いこなすうえで必ず押さえておきたい土台となる知識です。 Propsは親コンポーネントが持つ情報を子コンポーネントへ渡すときに利用されますが、この構造を理解しておくと画面全体のデータの流れが見えやすくなります。ひとつのデータを複数の子コンポーネントへ渡す場面は、実際のアプリ開発では非常によくあります。例えば、ログイン中のユーザー名、商品の情報、アプリ全体の設定などを画面の複数場所で共有したいときに大活躍します。 Propsは読み取り専用であるため子コンポーネントから書き換えられませんが、この仕組みはデータの安全な管理につながります。同じデータをいろいろな場所で使っても、一元的に管理されていれば混乱が起きにくく、アプリ全体の動作も安定します。初めてReactを学ぶ初心者にとっては、このデータの流れを理解することがとても重要です。また、StateとPropsを組み合わせる方法も学びました。Stateで管理している値を複数コンポーネントに共有することで、画面のいろいろな部分が同時に変化する動きが実現できます。例えば、カウント機能やメッセージの更新など、一つの状態に依存する画面が複数あるときに役立ちます。この理解が深まれば、より複雑なアプリケーションでも自然と対応できるようになります。ここではさらに理解を深めるために、PropsとStateを組み合わせた簡単なサンプルコードを紹介します。実際に手を動かして試すことで、Reactのデータの流れがより明確に見えてくるはずです。

PropsとStateを組み合わせたサンプルコード

以下のコードでは、親コンポーネントが管理しているメッセージを、複数の子コンポーネントに渡して共有しています。ボタンを押すとメッセージが変化し、すべての子コンポーネントで同時に反映されます。


import React, { useState } from "react";

function Child(props) {
  return <p>メッセージ: {props.msg}</p>;
}

function App() {
  const [message, setMessage] = useState("初期メッセージ");

  return (
    <div>
      <h1>共有メッセージのサンプル</h1>
      <Child msg={message} />
      <Child msg={message} />
      <button onClick={() => setMessage("更新されたメッセージ")}>
        メッセージ更新
      </button>
    </div>
  );
}

export default App;

（ボタンを押すと「更新されたメッセージ」が複数の子コンポーネントですべて同時に表示されます）

このように、PropsとStateを正しく理解して使うことで、ひとつの状態を複数のコンポーネントへ届ける仕組みを簡単に実現できます。Reactでは、画面のあちこちで同じデータを使う場面が多いため、Propsの使い方をしっかりと身につけることでアプリ開発がぐんと楽になります。また、Propsの受け渡しが増えるとコードが複雑に見えることもありますが、Reactの基本思想である「データは上から下へ流れる」という仕組みを理解しておけば、自然と整理して書けるようになります。慣れるまではゆっくりと手を動かしながら試してみると、Propsの考え方が身につきやすくなります。 Propsをただの「データの受け渡し」ではなく、「コンポーネント同士が連携して動くための大切な役割」と捉えることで、Reactの設計がとても綺麗に見えてくるようになります。今回の学びは、Reactを活用したアプリケーション開発の基礎として、今後の理解にもつながる大切なステップです。

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

生徒

「Propsって前は難しいと思っていたけれど、実際に使ってみると仕組みがはっきりしていました！」

先生

「そうですね。PropsはReactの基本なので、使い方を理解すると画面を組み立てる楽しさも広がりますよ。」

生徒

「Stateと一緒に使うことで複数の画面が同時に変わるのがすごく面白かったです。」

先生

「その気づきはとても大切です。Reactではデータの流れが一方向なので、Propsを正しく使うだけで複数の画面が自然につながっていきますね。」

生徒

「もっといろいろな画面で試してみたくなりました！」