React Propsとは？たったの「3分」で理解｜親子コンポーネントでのデータ渡し方をコード付きで解説

はじめに｜なぜReact Propsの記事を書こうと思ったのか

React Propsとは…

Reactを学び始めたとき、僕が最初につまずいたのは 「コンポーネント同士でデータを渡す仕組み」 でした。

ReactではJavaScriptの中でHTMLを書くことができ、

ボタンやヘッダー、フッターなど、画面の部品単位でパーツを作れます。

これをコンポーネントと言います。

「親から子に渡す？」「Stateとは違うの？」と混乱して、コードが動かずに頭を抱えた記憶があります。

でも、一度Propsを理解すると「Reactってこういう仕組みで成り立っているんだ！」と世界が一気に広がりました。

この記事では、初心者の方が同じように悩まずに済むよう、Propsとは何か？どう使うのか？ を具体的なコードと図解を交えて解説します。

要点だけ抑えて3分ほどで読み終えるようにまとめたのでぜひ最後までご覧ください！

React Propsとは？コンポーネント間でデータを渡す仕組み

まず定義から。

Props（プロップス）とは、コンポーネントに渡す“引数”のようなものです。

親コンポーネント → 子コンポーネントに渡すデータ
文字列や数値、関数など自由に渡せる
子コンポーネント側では props 経由で参照する

よく比較されるのが State（ステート） です。

State：コンポーネントが内部で持つデータ（自分自身で変更可能）
Props：親から渡されるデータ（自分で勝手に変更はできない）

この違いを押さえておくと、Reactの「一方向データフロー」が理解しやすくなります。

React Propsを使った最小のサンプルコード

まずはシンプルなコードから。

App.js

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

function App() {
  return (
    <div>
      <Welcome name="太郎" />
      <Welcome name="花子" />
    </div>
  );
}

export default App;

抜粋して解説

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

ここでは Welcome という子コンポーネントが、受け取った props.name を画面に表示しています。

<Welcome name="太郎" />
<Welcome name="花子" />

親コンポーネント App から Welcome に対して、name というPropsを渡しているのがポイントです。
これにより、子コンポーネントの表示内容が変わります。

React Propsで数値や式を渡す方法

Propsは文字列だけでなく、数値や変数、さらには関数まで渡すことができます。

App.js

function UserAge(props) {
  return <p>{props.name}さんの年齢は {props.age} 歳です。</p>;
}

function App() {
  const userAge = 25;

  return (
    <div>
      <UserAge name="太郎" age={userAge} />
    </div>
  );
}

export default App;

ここでは age={userAge} として、変数を直接渡しています。
このように {} を使うことで、JavaScriptの式をPropsとして埋め込めます。

親子コンポーネント間のReact Propsの流れを図解で理解

Propsのイメージは「親 → 子」への一方向データフローです。

親：App.js
子：Welcome.js / UserAge.js

図にするとこうなります

ここで重要なのは、子コンポーネントから親のPropsを直接書き換えることはできない ということ。
Reactは「一方向のデータの流れ」を基本としているためです。

React Propsで初心者がつまずきやすいポイント

Propsを学び始めて自分がよく混乱したポイントは以下です。

子コンポーネントにPropsを渡し忘れる
→ 子で props.name を使おうとしてもエラーになる。
Propsの名前を間違える
→ 親で name を渡しているのに、子で props.username を参照して動かない。
Propsを直接変更しようとしてしまう
→ これはエラー。Propsは読み取り専用。変更したいなら親のStateを操作する必要がある。

React Propsの応用：関数を渡して親に通知する方法

実はPropsを使えば「子から親に通知する」ことも可能です。
そのためによく使うのが 関数をPropsとして渡す パターンです。

App.js

function Child(props) {
  return <button onClick={props.onClick}>クリック！</button>;
}

function App() {
  const handleClick = () => {
    alert("子コンポーネントのボタンがクリックされました！");
  };

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

export default App;

この例では、親コンポーネント App が handleClick を定義し、それを子コンポーネントに渡しています。

子はPropsとして受け取った関数を呼び出すだけ。これで「親のStateを更新する」処理につなげられるわけです。