Props（プロップス）

Props

programming development beginner

Reactなどのコンポーネント開発で、親コンポーネントから子コンポーネントへ情報を渡す仕組み。

概要（サマリー）

Props（プロップス）は、Reactなどのコンポーネント開発で、親コンポーネントから子コンポーネントへ情報を渡すための仕組みである。

たとえば、同じ「ボタン」コンポーネントを使いながら、ある場所では「保存」、別の場所では「削除」と表示したい場合がある。このとき、親コンポーネントから子コンポーネントへ label のような値を渡すことで、同じ部品を用途に合わせて変化させられる。

Propsは、JavaScriptの引数に近い役割を持つ。コンポーネントを呼び出す側が値を渡し、呼び出される側がその値を読んで表示や処理に使う。

詳細解説

Propsとは何か

コンポーネントは、画面を小さな部品に分けて作る考え方である。

たとえば、プロフィールカード、ボタン、見出し、商品カードなどをコンポーネントとして作っておくと、同じ部品を複数の場所で再利用できる。

しかし、再利用できる部品でも、表示する内容は場所によって変わる。プロフィールカードなら名前や画像、ボタンなら文言や色、商品カードなら商品名や価格が変わる。

Propsは、このような「外から変えたい情報」をコンポーネントに渡すために使う。

Reactでは、親コンポーネントが子コンポーネントを呼び出すときに、HTMLの属性のような形でpropsを渡す。

基本的なコード例

次の例では、App から WelcomeMessage へ name というpropsを渡している。

Reactの例

function WelcomeMessage({ name }) {
  return <h1>こんにちは、{name}さん</h1>;
}

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

このコードでは、WelcomeMessage という同じコンポーネントを2回使っている。しかし、渡している name が違うため、画面には「こんにちは、太郎さん」と「こんにちは、花子さん」が表示される。

このように、Propsを使うと、同じコンポーネントを使い回しながら、表示内容だけを変えられる。

propsは読み取り専用

Propsの重要な特徴は、受け取った側の子コンポーネントで直接書き換えないことである。

親から渡されたpropsは、子コンポーネントにとって「外から与えられた情報」である。子コンポーネントが勝手に書き換えると、どこでデータが変わったのか分かりにくくなり、バグの原因になる。

たとえば、子コンポーネントの中で props.name = "別の名前" のように変更する設計は避ける。

もし子コンポーネントから何かを変更したい場合は、親コンポーネントが変更用の関数を用意し、その関数をpropsとして子に渡す。子はその関数を呼び出すことで、親に「変更してほしい」と伝える。

PropsとStateの違い

Reactでは、PropsとStateがよく比較される。

Propsは、親コンポーネントから渡される情報である。子コンポーネントはそれを読んで表示や処理に使うが、自分で直接変更しない。

Stateは、コンポーネント自身が内部で持つ状態である。ボタンを押した回数、入力欄の値、モーダルが開いているかどうかなど、ユーザー操作や処理の結果で変化する値に使われる。

簡単に言えば、Propsは「外から渡される設定」、Stateは「自分の中で変わる状態」である。

オブジェクトや関数も渡せる

Propsで渡せるのは文字列だけではない。数値、真偽値、配列、オブジェクト、関数、JSX要素なども渡せる。

たとえば、ボタンが押されたときの処理を関数として渡すことができる。

関数をpropsとして渡す例

function ActionButton({ label, onAction }) {
  return <button onClick={onAction}>{label}</button>;
}

function App() {
  function saveData() {
    alert('保存しました');
  }

  return <ActionButton label="保存" onAction={saveData} />;
}

この例では、ActionButton は「何を実行するボタンなのか」を自分では決めていない。親から渡された label と onAction によって、表示文言と処理内容が決まる。

Props Drillingに注意する

Propsは便利だが、コンポーネント階層が深くなると、親から子、さらに孫、さらにその下へと同じpropsを渡し続けることがある。

この状態は、Props Drilling（プロップスドリリング）と呼ばれる。日本語では「propsのバケツリレー」と説明されることもある。

Props Drillingが増えると、中間のコンポーネントが実際には使わないpropsを受け取って、ただ下に渡すだけになる。その結果、コードの見通しが悪くなり、変更にも弱くなる。

小さなアプリでは問題にならないことも多いが、階層が深くなった場合は、React Context、状態管理ライブラリ、コンポーネント分割の見直しなどを検討する。

AIコーディングとの関係

AIコーディングでは、Propsはコンポーネント設計を依頼するときに重要になる。

たとえば、「商品カードを作って」とだけ依頼すると、AIは表示内容をコンポーネント内に直接書いてしまうことがある。再利用しやすくしたい場合は、どの情報をpropsとして受け取るのかを明示するとよい。

AIに依頼するときは、次のように伝えると扱いやすい。

Reactで商品カードコンポーネントを作ってください。
商品名、価格、画像URL、クリック時の処理をpropsとして受け取る設計にしてください。
表示文言をコンポーネント内に固定せず、親から渡せるようにしてください。

また、既存コードをAIに見せて「propsが多すぎないか」「Props Drillingが起きていないか」「Stateにすべき値をpropsで渡していないか」をレビューさせるのも有効である。

よくある勘違い

Propsは子コンポーネント内で書き換えてよい？

基本的に書き換えない。

Propsは親から渡された情報であり、子コンポーネントはそれを読んで使う。変更が必要な場合は、親側でStateを更新し、その結果として新しいpropsを子へ渡す流れにする。

PropsとStateは同じもの？

同じではない。

Propsは外から渡される値で、Stateはコンポーネント自身が管理する値である。どちらも画面表示に使えるが、責任の場所が違う。

たとえば、ボタンに表示する文字はpropsで渡すことが多い。一方、ボタンを何回押したかのように内部で変化する値はStateで持つことが多い。

PropsはReact専用の考え方？

propsという言葉はReactでよく使われるが、「親から子の部品へ情報を渡す」という考え方は、他のコンポーネント型のフレームワークにも存在する。

ただし、書き方や細かいルールはフレームワークごとに違う。Reactの記事を読んでいる場合は、まずReactのpropsとして理解するとよい。

Propsは少ないほどよい？

少なければ常に良いわけではない。

必要な情報を明示的にpropsとして渡すことで、コンポーネントの使い方が分かりやすくなることもある。ただし、似た値が増えすぎたり、深い階層まで渡し続けたりする場合は、設計を見直すサインになる。

まとめ

Propsは、親コンポーネントから子コンポーネントへ情報を渡す仕組みである。
同じコンポーネントでも、propsを変えることで表示内容や動作を変えられる。
子コンポーネントは、受け取ったpropsを直接書き換えない。
Propsは外から渡される値、Stateはコンポーネント自身が管理する値である。
AIにReactコンポーネントを依頼するときは、どの値をpropsにするか明示すると再利用しやすいコードになりやすい。

情報ソース

より詳しくAIに聞いてみよう

ReactのPropsとは何かを、初心者向けに具体例つきで説明してください。
PropsとStateの違いを、実際の画面例で比較してください。
親コンポーネントから子コンポーネントへ関数をpropsとして渡す例を教えてください。
TypeScriptでReactコンポーネントのPropsの型を定義する方法を教えてください。
Props Drillingが起きているReactコードを改善する方法を教えてください。