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

こんにちは、Reiです！

コンポーネントを分けられるようになると、
こんな場面に遭遇すると思います。

見た目は同じなのに、表示する文字だけ変えたい
ボタンの形は同じで、処理だけ変えたい

そんなときに使うのが Props（プロップス） です。

Propsを使うと、同じコンポーネントを使いながら
「中身だけ変える」ことができるようになります。

今回は、Propsとは何かという基本から、
実際にどう使うのかまで整理していきます！

同じ見た目で中身だけ変えたいときは？
親コンポーネントと子コンポーネント
親はタグに値を書いて子へ渡す
子は受け取ったPropsを使って表示する
分割代入でスッキリ書く
タグの中身は children で受け取る
Propsは書き換えられない
関数もPropsで渡せる
Propsが分かると設計が楽になる
まとめ

同じ見た目で中身だけ変えたいときは？

たとえば Message という
メッセージ表示用の部品があるとします。

この部品を使って、

ある場所では「お元気ですか？」
別の場所では「元気です！」

と表示したい場合、
毎回コンポーネントを作り直すこともできますが、
それだと同じ見た目のコードがどんどん増えてしまいます 💦

ここで考えたいのが、
「見た目はそのままで、中身だけ変えられないか？」 ということです。

親コンポーネントと子コンポーネント

Reactでは、コンポーネントの中で
別のコンポーネントを呼び出して使うことができます。

export const App = () => {
  return <Message />;
};

このときの関係はこうなります。

・呼び出す側（App） → 親コンポーネント
・呼び出される側（Message） → 子コンポーネント

この親子関係の中で、
親から子へ値を渡すことで、
同じコンポーネントでも表示を変えられるようになります。

この仕組みが Props です。

親はタグに値を書いて子へ渡す

Propsは、親コンポーネントから子コンポーネントへ渡します。

書き方は、HTMLの属性にかなり近いです。

import { Message } from "./components/Message";

export const App = () => {
  return (
    <>
      <h1>挨拶アプリ</h1>
      <Message color="blue" content="お元気ですか？" />
      <Message color="pink" content="元気です！" />
    </>
  );
};

同じ「Message」を使っていますが、
渡している値が違うので表示も変わります。

このように、
親で値を変えるだけで、同じコンポーネントを使い回せるのがPropsのポイントです。

子は受け取ったPropsを使って表示する

子コンポーネントでは、渡された値を受け取って使います。

親コンポーネントから渡された値は、関数の引数として props という形で受け取ります。

export const Message = (props) => {
  return <p>{props.content}</p>;
};

propsの中には、親から渡された値がまとまって入っているため、

props.content
props.color

のように取り出して使います。

分割代入でスッキリ書く

props.xxx と書き続けると少し見づらくなるため、
よく使われるのが分割代入です。

export const Message = ({ color, content }) => {
  const contentStyle = {
    color,
    fontSize: "20px",
  };  return <p style={contentStyle}>{content}</p>;
};

この書き方にすると、

・どのPropsを使っているか一目で分かる
・コードがすっきりする

というメリットがあります。

タグの中身は children で受け取る

Propsは属性だけでなく、
タグの中身も渡すことができます。

親側：

<Message color="green">タグで囲んだメッセージです</Message>

子側：

export const Message = ({ color, children }) => {
  return <p style={{ color }}>{children}</p>;
};

children には、タグの間に書いた内容がそのまま入ります。

この仕組みを使うと、
「中身を自由に差し替えられるコンポーネント」を作れるようになります。

Propsは書き換えられない

Propsは、親から渡される「読み取り専用のデータ」です。

そのため、子コンポーネントの中で
値を書き換えることはできません。

// NG例
props.content = "別の内容";

こういった変更はReactのルールとして禁止されています。

値を変えたい場合は、

・親で値を変えて渡す
・またはStateを使う

という形になります。

関数もPropsで渡せる

Propsでは、値だけでなく関数も渡せます。

const ActionButton = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};export const App = () => {
  const handleClick = () => {
    alert("親コンポーネントで処理を実行しました！");
  };  return <ActionButton label="保存する" onClick={handleClick} />;
};

このようにすると、

・見た目（ボタン）は子が担当
・処理の内容は親が決める

という役割分担ができます。

同じボタンでも、

・保存
・削除
・画面遷移

など、動きを変えられるようになります！

Propsが分かると設計が楽になる

Propsは単なるデータの受け渡しではなく、
役割を分けるための仕組みです。

・親：値や処理を用意する
・子：それを使って表示・実行する

この考え方で整理すると、
コードの見通しがかなり良くなります。

迷ったときは、

・値を決めているのはどこか
・表示しているのはどこか

この2つを意識してみてください！

まとめ

今回は、Propsの基本を見てきました。
Propsは、親コンポーネントから子コンポーネントへ渡すデータです。

＼＼　今回のまとめ　／／

・親は属性のように値を渡す
・子は受け取って表示や処理に使う
・childrenでタグの中身も渡せる
・関数も渡せるので動きも変えられる

最初は少し混乱しやすいですが、
「渡すのは親、使うのは子」と考えると整理しやすくなります。

次は、コンポーネント自身が値を持つ仕組み、
Stateについて見ていきましょう！