Propsとは？親子コンポーネントでデータを受け渡す方法をやさしく解説

Reactでコンポーネントを作成できるようになると、次に学ぶのがProps（プロップス）です。

前回の記事では、コンポーネントを作成し、Appコンポーネントから呼び出す方法を学びました。

しかし、そのままでは毎回同じボタンしか表示できません。

「送信」「保存」「キャンセル」など、表示内容や見た目を変えたい場合はどうすればよいのでしょうか？

そんなときに利用するのがPropsです。

この記事では、ReactにおけるPropsの役割や使い方、親子コンポーネント間でデータを受け渡す方法を初心者向けにわかりやすく解説します。

---

Propsとは？

Props（プロップス）は、親コンポーネントから子コンポーネントへデータを渡す仕組みです。

Reactでは、コンポーネント同士が親子関係を持っています。

App
 ├── Button
 ├── Button
 └── Button

親コンポーネントは、それぞれの子コンポーネントへいろんなデータを渡すことができます。

---

なぜPropsが必要なの？

前回作成したボタンは、次のような固定のものでした。

const Button = () => {
  return <button>ボタン</button>;
};

これでは、

• 送信
• 保存
• キャンセル

といったボタンを作りたい場合、わざわざ別々のコンポーネントを作る必要があります。

Reactでは、この問題をPropsで解決します。

---

Propsを使ったデータの受け渡し

例えば親コンポーネントが、

• ボタンの文字：送信
• ボタンの色：blue

というデータをButtonコンポーネントへ渡すことで、表示内容やデザインを自由に変更できます。

これによって、同じButtonコンポーネントでも、

• 送信（青）
• 保存（緑）
• キャンセル（グレー）

といったように、用途に応じて使い分けられるようになります。

---

Buttonコンポーネントを作成する

1. まず受け取るデータの型を定義する

今回のケースでは、Buttonコンポーネントは、親コンポーネント（App.tsx）から以下の2つの情報を受け取るとしましょう。

<Button text="文字" color="red" />

この場合、

• text → ボタンに表示する文字
• color → ボタンの色

です。

TypeScriptでは「このコンポーネントはどんなデータを受け取れるのか」を型で定義します。

type ButtonProps = {
  text: string;
  color: string;
};

これは、

という宣言です。

JavaでいうDTOやメソッドの引数定義に近い考え方です。

2. Propsを受け取る

Reactでは、親コンポーネントから渡されたデータを
Props（プロップス）
と呼びます。

例えば、

<Button text="文字" color="red" />

で渡した値は、Button側ではPropsとして受け取ります。

書き方は以下です。

const Button = ({ text, color }: ButtonProps) => {

({ text, color }: ButtonProps)

は、

という意味です。

{ text, color }

これはPropsから必要な値だけ取り出しています。

本来は以下のようにも書けます。

const Button = (props: ButtonProps) => {
  return (
    <button>
      {props.text}
    </button>
  );
};

ただ、Reactではよく以下のように短く書きます。

const Button = ({ text, color }: ButtonProps) => {

これは分割代入というJavaScriptの書き方です。

3. 受け取った値を画面に表示する

return (
  <button className={color}>
    {text}
  </button>
);

ここでは、

{text}

で受け取った文字を表示しています。

また、

className={color}

では、

color="red"

として渡された値をCSSのクラス名として利用しています。

つまり、

<button class="red">
  文字
</button>

のようになります。

CSS側で、

.red {
  color: red;
}

のように定義すれば、赤文字のボタンになります。

完成したButton.tsx

type ButtonProps = {
  text: string;
  color: string;
};


const Button = ({ text, color }: ButtonProps) => {
  return (
    <button className={color}>
      {text}
    </button>
  );
};


export default Button;

コンポーネントのデータの流れ

今回の一番大事なポイントはここです。

App.tsx
  |
  | text="文字"
  | color="red"
  ↓
Button.tsx
  |
  | Propsとして受け取る
  ↓
画面表示

Reactでは、このように

という流れが基本になります。

---

親コンポーネントからPropsを渡す

子コンポーネントへは、HTMLの属性を書くような感覚でデータを渡します。

<Button
  text="送信"
  color="blue"
/>

<Button
  text="キャンセル"
  color="gray"
/>

同じButtonコンポーネントでも、渡すPropsを変更するだけで表示内容を簡単に切り替えられます。

---

TypeScriptが型をチェックしてくれる

Propsには型を定義しているため、誤ったデータを渡すとTypeScriptがエラーを検出してくれます。

<Button
  text= 100
  color="blue"
/>

この例では、textには文字列を渡す必要があるため、数値を指定するとエラーになります。

---

Propsでは関数も渡せる

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

const handleClick = () => {
  alert("クリックされました");
};

<Button
  text="送信"
  color="blue"
  onClick={handleClick}
/>

ボタンがクリックされたときの処理などは、このように親コンポーネントから渡すケースが非常によくあります。

---

Propsを利用するメリット

Propsを利用することで、次のようなメリットがあります。

• 同じコンポーネントを何度でも再利用できる
• 表示内容だけを簡単に変更できる
• コードの重複を減らせる
• 保守しやすい設計になる

---

まとめ

PropsはReact開発において最も重要な機能の一つです。

同じコンポーネントを使い回しながら、表示内容や動作だけを変更できるため、保守性・再利用性の高いアプリケーションを作成できます。

Reactらしいコンポーネント設計を身につけるためにも、まずはPropsを使ったデータ受け渡しに慣れていきましょう。