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

生徒

「ReactでPropsってよく出てきますけど、実際には何をするためのものなんですか？」

先生

「Propsは親コンポーネントから子コンポーネントへデータを渡すための仕組みです。」

生徒

「じゃあ、親と子の関係ってプログラムでどう表現するんですか？」

先生

「実際にサンプルコードを見ながら理解していきましょう！」

1. Propsとは？Reactの基本的な役割

ReactでProps（プロップス）とは、コンポーネント間でデータを受け渡しするための仕組みです。英語の「Properties（プロパティ）」を短くした言葉で、性質や属性を表します。ウェブサイトを作るときに「タイトル」「ボタンの文字」「色」などを変えたいときに便利です。

Propsは親コンポーネントから子コンポーネントへ一方通行で渡され、子コンポーネントは受け取ったデータを表示に利用します。ただし子コンポーネントが直接Propsを変更することはできません。つまり「プレゼントを受け取って使うことはできても、中身を勝手に変えることはできない」というイメージです。

2. 親から子へ文字データを渡す基本例

まずは一番シンプルな例を見てみましょう。親コンポーネントで子コンポーネントに名前を渡し、その名前を表示します。


function Child(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

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

export default App;

（画面に「こんにちは、太郎さん！」と表示されます）

この例ではAppが親コンポーネント、Childが子コンポーネントです。親がname="太郎"というデータを渡し、子がそれを受け取って表示しています。

3. 複数のPropsを渡す例

Propsは複数まとめて渡すことも可能です。たとえば「名前」と「年齢」を渡してみましょう。


function Profile(props) {
  return (
    <div>
      <p>名前: {props.name}</p>
      <p>年齢: {props.age}</p>
    </div>
  );
}

function App() {
  return <Profile name="花子" age={20} />;
}

export default App;

（画面に「名前: 花子」「年齢: 20」と表示されます）

このようにPropsを使えば、同じコンポーネントでも異なる値を表示できるので、再利用性が高まります。

4. Propsをオブジェクトの形でまとめる

Propsはオブジェクトとして渡されるので、構造分割（デストラクチャリング）という書き方を使うとコードがすっきりします。


function Profile({ name, age }) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

function App() {
  return <Profile name="次郎" age={25} />;
}

export default App;

（画面に「名前: 次郎」「年齢: 25」と表示されます）

この書き方ならprops.nameやprops.ageと書かずに、直接変数として使えるので便利です。

5. Propsを使った親子関係のイメージ

初心者が混乱しやすいのは「なぜ親から子へしかデータが渡せないのか」という点です。Reactではデータの流れをわかりやすくするために「一方向のデータフロー」というルールを守っています。

生活の例で言うと、親が子にお弁当を持たせるようなものです。子供はそのお弁当を食べることはできますが、中身を入れ替えることはできません。同じように、子コンポーネントはPropsを受け取って使うだけで、勝手に変更はできません。

6. Propsを使うと何が便利なのか？

Propsを使うことで、同じコンポーネントを使い回すことができ、コードがシンプルになります。たとえばボタンやカードデザインを複数作るときでも、文字や色をPropsで変えるだけで見た目を切り替えられるのです。

これは大きなアプリを作るときに特に重要で、無駄な重複を減らし、保守性を高める効果があります。

まとめ

今回の記事では、ReactのPropsについて基本から応用まで学びました。Propsは親コンポーネントから子コンポーネントへデータを渡すための重要な仕組みであり、データの一方向の流れを保ちながらコンポーネント間の情報伝達を可能にします。親が渡したデータを子コンポーネントは表示や処理に利用できる一方で、直接変更することはできません。これにより、データの整合性が保たれ、予期せぬ動作を防ぐことができます。

具体的な例として、単純な文字列を渡す方法、複数のPropsをまとめて渡す方法、オブジェクトのデストラクチャリングを使った書き方などを解説しました。Propsを使うことで、同じコンポーネントでも異なる値を表示でき、再利用性や保守性が格段に向上します。特に大規模アプリケーションにおいては、Propsを効果的に活用することでコードの冗長性を減らし、見通しの良い構造を作ることが可能です。

また、Propsは親子関係のデータフローを明確にするため、一方向の流れであることを意識する必要があります。親が子にデータを渡すイメージは、まるで親がお弁当を子に渡すようなもので、子はそれを受け取って使うだけで内容を変更できません。これを守ることで、Reactアプリの状態管理やUI更新が予測しやすくなります。

サンプルプログラムで復習


function Child({ name, age }) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Child name="太郎" age={30} />
      <Child name="花子" age={25} />
    </div>
  );
}

export default App;

（同じChildコンポーネントに異なるPropsを渡すことで、それぞれ異なる名前と年齢が画面に表示されます）

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

生徒

「Propsを使うと親から子へデータを簡単に渡せることがわかりました。同じコンポーネントでも異なる値を表示できるので便利ですね。」

先生

「その通りです。Propsは一方向のデータフローを守ることで、Reactアプリの状態を安定させます。子コンポーネントは受け取ったデータを表示するだけで、直接変更できないことも重要なポイントです。」

生徒

「複数のPropsをまとめて渡す方法や、デストラクチャリングで書くとコードがスッキリすることも理解できました。」

先生

「そうです。Propsを効果的に使うことで、再利用性が高く、保守性に優れたReactコンポーネントを作れるようになります。特に大規模アプリでは、Propsを上手に活用することが安定したUI構築の鍵になります。」

生徒

「親子関係の例えで理解しやすかったです。親が渡すデータを子が受け取って使うだけ、という一方向の流れを意識することが大事ですね。」