propsとは？初心者にもわかりやすい使い方と実務での活用事例

フロントエンド開発•2025/1/26

はじめに

props とは、コンポーネント間でデータを受け渡すための仕組みのことです。 Reactをはじめとするフロントエンド開発では、コンポーネントを組み合わせて画面を構築するケースが多いですよね。そのとき、あるコンポーネントから別のコンポーネントにデータを届けたい場面がしばしば出てきます。そんなときに役立つのが、propsという概念です。

これを正しく理解しておくと、コンポーネント同士の連携がスムーズになり、管理しやすいコードを書くことにもつながります。シンプルなしくみですが、初心者の皆さんの中には「どうやって渡すのだろう？」と戸惑うかもしれません。そこで本記事では、propsの基本から実務での活用まで、なるべく分かりやすく解説していきます。

この記事を読むとわかること

propsの意味と基本的な使い方
propsを使ったデータの流れの仕組み
コンポーネント間の連携時の注意点
実務で想定される具体的な活用シーン
トラブルシュートのためのヒントやコツ

ここで解説する内容を押さえると、Reactでのコンポーネント構築がより理解しやすくなるのではないでしょうか。それでは次のセクションから、propsの基本をもう少し噛み砕いて見ていきます。

propsの基本をおさえよう

propsの目的は「子コンポーネントにデータを受け渡すこと」です。コンポーネントを細かく分割するときに、上位のコンポーネント（親）から下位のコンポーネント（子）へ値を渡したいケースは多いです。このとき、直接的に外部の変数を参照するのではなく、引数として値を受け取る仕組みを用意するのがReactの考え方です。

具体的には、以下のように使われます。


function ParentComponent() {
  const userName = "React太郎";

  return (
    <div>
      <ChildComponent name={userName} />
    </div>
  );
}

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

親コンポーネントが子コンポーネントを呼び出すときに name={userName} のように属性をセットし、子コンポーネントは props から読み取るだけです。このように、親から子へとデータを伝達することで、画面表示や機能を柔軟に分割・再利用することができます。

propsとstateの違いを意識する

Reactにはstateと呼ばれるものも存在します。 propsは「外から渡される読み取り専用のデータ」、stateは「コンポーネント内部で保持するデータ」という点で役割が違います。

下記のような表にまとめると、よりイメージしやすいかもしれません。

	props	state
定義場所	親など外部で定義した値を子コンポーネントへ渡す	コンポーネント内部で管理
読み取り/書き込み	読み取り専用	状態を更新できる
主な用途	表示や動作に必要な外部データを受け取る	コンポーネント内で動的に変化する値を追跡

propsは書き換えないように作られているので、値の変更が必要な場合は親側で新しい値を渡すイメージになります。ここを混同すると「propsを直接変更しようとしてエラーが出る」といった問題が起きやすいです。

propsを用いた実務シーン

propsの基本を理解したら、今度は実際の開発現場でどんなふうに役立つか見てみましょう。具体的な業務シーンをいくつか挙げると、イメージが湧きやすくなると思います。

ページ内でのモジュール化

たとえばECサイトのトップページには、商品一覧やおすすめランキング、ユーザー情報などさまざまなコンポーネントが並ぶことがあります。こうしたコンポーネント同士が互いにデータをやり取りする際は、propsを通じて必要な情報を子コンポーネントへ渡します。独立したコンポーネント同士での連携が必要な場合、必要最小限の情報だけをprops経由で送ると、コードが整理しやすいでしょう。

ステートレスコンポーネントの活用

表示専用のコンポーネントを作るとき、そこではstateを管理する必要がありません。逆に、外部からデータを受け取って表示するだけなら、propsだけで完結します。これにより、扱うべきデータの範囲が明確になり、テストもしやすくなります。「これは受け取ったデータをそのまま表示しているだけだ」と把握できるメリットがあるわけです。

propsとstateの役割が分離していると、チーム開発でも可読性が高まりやすくなります。

propsを正しく受け取るためのポイント

初心者の皆さんが初めてpropsを使うとき、意外とつまずきがちな部分もあります。ここでは正しく受け取るためのポイントをいくつかピックアップしておきます。

名前をわかりやすくする

親コンポーネントから子コンポーネントへデータを渡すときには、属性名を自由に設定できます。「name」と「title」など、明確に意味が分かる名前にしておくと、後から読み返すときに混乱が少なくなります。抽象的すぎる名称は避けておくとよいでしょう。

未定義のときの対策

propsは必ずしも渡されるとは限りません。値がundefinedやnullになってしまうケースも考えられます。その際にエラーが出ないよう、受け取った値を利用するときは「実際に存在するかどうか」を確認する工夫も有効です。


function Greeting(props) {
  if (!props.name) {
    return <p>名前が設定されていません</p>;
  }

  return <p>こんにちは、{props.name}さん</p>;
}

これにより、props.nameが存在しないときは別の処理を行うため、画面がクラッシュするリスクを減らせます。

propsとイベントハンドラのやりとり

コンポーネント間で単に文字列や数値を渡すだけでなく、関数を渡すこともあります。たとえば、子コンポーネントでボタンがクリックされたタイミングを親コンポーネントに伝える場合、propsを使ってイベントハンドラを渡す方法がよく使われます。

イベントを親に伝達する流れ

以下の例では、子コンポーネントにあるボタンがクリックされたとき、親コンポーネントの関数が呼び出されます。


function ParentComponent() {
  const handleClick = () => {
    alert("ボタンがクリックされました");
  };

  return <ChildComponent onButtonClick={handleClick} />;
}

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

Reactではデータの流れが基本的に「上から下」へ向かいますが、イベントハンドラを渡すことで、下のコンポーネントから上に通知を送ることが可能です。イベントが発生したらprops経由で受け取った関数を呼び出すという形ですね。

実務でのメリット

業務システムでは、ユーザー操作に応じてサーバーへ通信したり、別の画面に切り替えたりといった機能がよく求められます。ボタンを押す側のコンポーネントは単純であっても、その背後で呼び出される処理が複雑になることもあるでしょう。そんなときでも、子はpropsとして渡された関数を呼ぶだけなので、関数の中身を意識せずに再利用しやすいメリットがあります。

propsの受け取り方をバリエーションで知る

関数コンポーネントでは、propsを引数で受け取る以外にも、オブジェクト分割代入を使う手法があります。スッキリ書きたい場合は、次のように書くパターンがよくあります。


function Profile({ user, onLogout }) {
  return (
    <div>
      <p>ユーザー名: {user.name}</p>
      <p>メールアドレス: {user.email}</p>
      <button onClick={onLogout}>ログアウト</button>
    </div>
  );
}

引数をそのまま ({ user, onLogout }) のように分割代入しているため、コードを読み返すときに「どんなpropsを受け取っているのか」が一目でわかります。特に、扱うpropsの数が多くなるほど役立ちます。ただし、あまりに多くのpropsを設定すると、それだけで複雑になりがちですので、コンポーネント設計の段階で取り回しを考えることも重要です。

propsを扱う上での注意点

propsを使い始めたばかりの頃には、いくつかの落とし穴に遭遇することがあります。ここでは代表的なものを挙げておきます。

propsを直接書き換えない

Reactでは、propsを渡された子コンポーネントの中でpropsの値を変更するのは推奨されません。もし新しい値が必要になった場合は、親コンポーネントのstateを変更し、その変更後のstateを再び子コンポーネントに渡すという流れを取ります。 propsは「読み取り専用」という認識を持っておくといいでしょう。

propsを上書きすると、レンダリング結果が意図せず変わるなどトラブルの原因になりがちです。

全コンポーネントに同じpropsを渡しすぎない

アプリケーションが大規模になると、どのコンポーネントにも同じようなpropsが渡されることがあります。必要のないコンポーネントにまでデータを渡すと、変更時に予想外の範囲に影響が出てしまうかもしれません。過剰なpropsの受け渡しはコードの見通しを悪くする要因になるので、本当に必要な箇所にだけ渡す設計を考えるとよいでしょう。

まとめ

ここまで、props の基本的な概念や実務シーンでの利用例、注意点などを見てきました。 Reactにおいてはコンポーネントをどんどん分割していくことが推奨されがちですが、それと同時にpropsの使い方もより重要になります。正しく設計すれば、それぞれのコンポーネントが明確な役割を果たし、お互いをわかりやすく連携させることができますね。

コンポーネントの分割に慣れてくると、「ここではこのデータを表示するだけ」「ここではこのイベントだけを管理する」といったように、役割をはっきりさせられるようになるでしょう。 propsはその橋渡しとして、とても便利な仕組みです。皆さんも実際にコードを書きつつ、この仕組みにぜひ慣れてみてください。