React プロップス (Props)

Volardev 編集部 April 28, 2026

プロップス（Props）は、React コンポーネントに渡される引数（Arguments）です。
HTML の属性（Attributes）と同じ形式でコンポーネントに渡されます。
なお、props は「Properties（プロパティ）」の略称です。

1. React プロップス (React Props)

React プロップスは、JavaScript の関数における引数や、HTML の属性のような役割を果たします。
コンポーネントにプロップスを送るには、HTML 属性と同じ構文を使用します。

1.1 プロップスの送信

以下のように、Car エレメントに brand 属性を追加します。

createRoot(document.getElementById('root')).render(
  <Car brand="フォード" />
);

1.2 プロップスの受信

コンポーネントは、引数を props オブジェクトとして受け取ります。

function Car(props) {
  return (
    <h2>私は {props.brand} です！</h2>
  );
}

このオブジェクトの名前は慣習的に props と呼ばれますが、任意の名前を付けることも可能です。

function Car(myobj) {
  return (
    <h2>私は {myobj.brand} です！</h2>
  );
}

2. 複数のプロパティを渡す

プロパティは、必要に応じていくつでも送ることができます。
すべての属性は、オブジェクトのプロパティとして Car コンポーネントに送られます。

2.1 複数プロパティの送信例

createRoot(document.getElementById('root')).render(
  <Car brand="フォード" model="マスタング" color="赤" />
);

2.2 受信側での利用

すべてのプロパティは props オブジェクトの中に格納されています。

function Car(props) {
  return (
    <h2>私は {props.color} の {props.brand} {props.model} です！</h2>
  );
}

3. 多様なデータ型

React のプロップスは、変数、数値、文字列、オブジェクト、配列など、あらゆるデータ型を渡すことができます。
文字列は引用符（" "）で囲んで送りますが、数値、変数、オブジェクトなどは波括弧 { } で囲む必要があります。

3.1 数値を渡す場合

数値として扱うには波括弧を使用します。

createRoot(document.getElementById('root')).render(
  <Car year={1969} />
);

3.2 変数（Variables）を渡す場合

let x = "フォード";
createRoot(document.getElementById('root')).render(
  <Car brand={x} />
);

3.3 オブジェクトや配列を渡す場合

let x = [1964, 1965, 1966];
let y = {name: "フォード", model: "マスタング"};
createRoot(document.getElementById('root')).render(
  <Car years={x} carinfo={y} />
);

4. オブジェクトのプロップス

コンポーネント内でもオブジェクトはオブジェクトとして扱われ、ドット記法（Dot notation）を使ってプロパティにアクセスできます。

function Car(props) {
  return (
    <>
      <h2>私の {props.carinfo.name} {props.carinfo.model}！</h2>
      <p>色は {props.carinfo.color} で、{props.carinfo.year} 年製です！</p>
    </>
  );
}

const carInfo = {
  name: "フォード",
  model: "マスタング",
  color: "赤",
  year: 1969
};

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

5. 配列のプロップス

配列のプロップスには、インデックス番号を使ってアクセスできます。

function Car(props) {
  return (
    <h2>私の車は {props.carinfo[0]} {props.carinfo[1]} です！</h2>
  );
}

const carInfo = ["フォード", "マスタング"];

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

6. コンポーネント間でのデータ受け渡し

属性（Attributes）を利用することで、あるコンポーネントから別のコンポーネントへデータをパラメーターとして受け渡すことができます。

function Car(props) {
  return (
    <h2>私は {props.brand} です！</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>私のガレージには誰が住んでいる？</h1>
      <Car brand="フォード" />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

注意： React プロップスは読み取り専用（Read-only）です！値を変更しようとするとエラーが発生します。コンポーネント側で受け取ったデータを直接書き換えてはいけません。