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

生徒

「Reactのpropsって何ですか？なんだかよくわからなくて…」

先生

「propsは、親コンポーネントから子コンポーネントにデータを渡す仕組みですよ。」

生徒

「へぇ、どうやって使うんですか？何か特別なことが必要なんですか？」

先生

「難しくないですよ。具体的にReactのコードを見ながら学んでいきましょう！」

1. Reactのprops（プロップス）とは？

props（プロップス）は、Reactで使われる重要な機能のひとつで、「プロパティ（property）」の略です。

Reactではコンポーネントをたくさん作って画面を構築しますが、その中で「親から子に情報を渡したい」と思ったときに使うのがpropsです。

たとえば、「お名前を表示する」コンポーネントに、親コンポーネントから「たろう」という文字列を渡すようなときに使います。

2. propsを使って文字を渡す基本例

Reactでは、関数の引数としてpropsを受け取り、props.◯◯のようにして使います。以下に基本的な例を紹介します。

子コンポーネント（Hello.js）


import React from "react";

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

export default Hello;

親コンポーネント（App.js）


import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello name="たろう" />
    </div>
  );
}

export default App;

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

このように、name="たろう"と指定することで、親コンポーネント（App）から子コンポーネント（Hello）へ「たろう」というデータを渡せます。

3. 複数のpropsを渡して使ってみよう

propsは複数渡すこともできます。たとえば「名前」と「年齢」を表示するコンポーネントも作れます。

Profileコンポーネント


import React from "react";

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

export default Profile;

Appコンポーネントで呼び出す


import React from "react";
import Profile from "./Profile";

function App() {
  return (
    <div>
      <Profile name="はなこ" age={25} />
    </div>
  );
}

export default App;

（画面に「名前：はなこ」「年齢：25歳」と表示されます）

このように、文字列だけでなく数字もpropsで渡せます。数字を渡すときは{25}のように{}で囲みます。

4. propsを分割代入（分割して取り出す）で書いてみる

propsをもっとシンプルに書く方法として、分割代入（ぶんかつだいにゅう）という書き方があります。

これは、propsというオブジェクトからnameやageなどを直接取り出して使える便利な記述です。


import React from "react";

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

export default Profile;

このように書くことで、props.nameやprops.ageと書かなくてもよくなり、コードがすっきりします。

5. propsの値は読み取り専用（変更できない）

propsは、読み取り専用です。子コンポーネントの中でpropsの値を書き換えることはできません。

もし別の値にしたい場合は、親コンポーネントから渡す値を変える必要があります。

この「一方向のデータの流れ」は、Reactの特徴の一つで、データの動きがシンプルでわかりやすくなります。

6. propsに関数を渡すこともできる

propsでは、「値」だけでなく「関数（function）」を渡すこともできます。たとえば、ボタンをクリックしたときの動作を親が決めたいときに便利です。

Buttonコンポーネント


import React from "react";

function Button({ onClick }) {
  return (
    <button onClick={onClick}>押してね</button>
  );
}

export default Button;

Appコンポーネントで関数を渡す


import React from "react";
import Button from "./Button";

function App() {
  const handleClick = () => {
    alert("ボタンが押されました！");
  };

  return (
    <div>
      <Button onClick={handleClick} />
    </div>
  );
}

export default App;

（ボタンを押すと「ボタンが押されました！」というアラートが表示されます）

このように、親から関数を渡して子コンポーネントの中で使うことも可能です。

まとめ

propsの役割を全体から振り返ろう

この記事では、Reactにおけるpropsの基本的な考え方から、実際の使い方までを初心者向けに丁寧に解説してきました。 propsは、親コンポーネントから子コンポーネントへデータを渡すための仕組みであり、 Reactのコンポーネント設計を理解するうえで欠かせない重要な要素です。 Reactでは画面を小さな部品（コンポーネント）に分けて構築しますが、その部品同士をつなぐ役割を担っているのがpropsだと言えます。

文字列や数値といったシンプルなデータだけでなく、複数の値をまとめて渡したり、関数を渡したりできる点もpropsの大きな特徴です。これにより、子コンポーネントは「見た目や役割」に専念し、実際の処理やデータ管理は親コンポーネントが担当するといった、分かりやすい役割分担が可能になります。この考え方は、Reactらしい設計思想の中心にあります。

propsと状態（state）の違いを意識しよう

Reactを学び始めたばかりの方が混乱しやすいポイントとして、 propsとstateの違いがあります。 propsは親から渡される変更できない値であり、子コンポーネント側では読み取り専用として扱います。一方でstateは、コンポーネント自身が管理し、変化していく値です。

「親がデータを持ち、子は受け取って表示する」という一方向のデータの流れを意識すると、 propsの役割がとても分かりやすくなります。このルールを守ることで、データの流れが複雑にならず、バグの少ないReactアプリケーションを作ることができます。

サンプルプログラムでpropsの使い方を再確認

ここで、propsを使って親コンポーネントから子コンポーネントへデータと関数を渡す基本的なサンプルをあらためて確認してみましょう。 Reactでよく使われる典型的な構成です。


import React from "react";

function Message({ text, onButtonClick }) {
  return (
    <div>
      <p>{text}</p>
      <button onClick={onButtonClick}>クリック</button>
    </div>
  );
}

function App() {
  const handleClick = () => {
    alert("親コンポーネントの処理が実行されました");
  };

  return (
    <div>
      <Message
        text="propsでメッセージを表示しています"
        onButtonClick={handleClick}
      />
    </div>
  );
}

export default App;

この例では、文字列データと関数の両方をpropsとして子コンポーネントに渡しています。子コンポーネントは受け取ったpropsを使って表示やイベント処理を行い、実際の処理内容は親コンポーネントが管理しています。この構造を理解できると、Reactのコンポーネント設計が一気に分かりやすくなります。