ReactのPropsを使ってコンポーネントの表示を動的に切り替える方法を解説！初心者でもわかるReact入門

1. Propsでコンポーネントを使い回すとは？

1. Propsでコンポーネントを使い回すとは？

ReactのProps（プロップス）とは、コンポーネントに“外から渡す追加情報”のことです。コンポーネントは、いわば「同じ形の器」のようなものですが、Propsを渡すことで、その器の中身だけを自由に変えられるようになります。これによって、同じコンポーネントでも役割を切り替えながら使い回すことができ、開発がとても効率的になります。

例えば、同じボタンコンポーネントでも、Propsに違う文字を渡せば、表示内容だけを簡単に変更できます。これは、家の設計図は同じでも、壁紙や家具を変えるだけで雰囲気が変わるのと同じ仕組みです。「ボタンの形は共通だけど、書かれる文字はその都度変えたい」そんな場面でPropsが活躍します。

よりイメージしやすいように、以下のようなシンプルなボタンコンポーネントの例を見てみましょう。Propsを使うことで、1つのコンポーネントが何通りにも姿を変えられることが分かります。

import React from "react";

function SimpleButton(props) {
  return <button>{props.text}</button>;
}

function App() {
  return (
    <div>
      <h1>Propsで表示を変える例</h1>
      <SimpleButton text="保存" />
      <SimpleButton text="削除" />
      <SimpleButton text="編集" />
    </div>
  );
}

export default App;

このように、Propsはコンポーネントの表示を柔軟に変える“設定値”のようなものです。プログラミング未経験の方でも「同じ部品に違うラベルを貼って使うイメージ」と考えると理解しやすいでしょう。Propsを使うことで、コードの重複を減らしつつ、見た目と役割を自由に切り替えられるようになります。

2. Propsを使った動的表示の基本コード

2. Propsを使った動的表示の基本コード

ここでは、Propsを使ってコンポーネントの表示内容を自由に切り替える、一番基本的な例を紹介します。Propsは「コンポーネントに渡す情報」のようなもので、渡された値に応じて見た目を変えられるようになります。特にボタンのようなよく使うパーツは、毎回新しく作るのではなく、Propsで表示を差し替えながら使い回すととても便利です。

import React from "react";

// 共通ボタンコンポーネント
function MyButton(props) {
  return <button>{props.label}</button>;
}

// ボタンを使うAppコンポーネント
function App() {
  return (
    <div>
      <h1>Propsでボタンの文字を切り替える例</h1>
      <MyButton label="保存する" />
      <MyButton label="削除する" />
      <MyButton label="編集する" />
    </div>
  );
}

export default App;

このサンプルでは、MyButtonというひとつのコンポーネントに対して、labelというPropsを渡しています。Propsに違う文字を渡すことで、同じボタンでも用途に応じて表示を変えられます。プログラミング初心者でも「ボタンの形は同じだけど、中に入れる文字を渡しているだけ」と考えるととても理解しやすい仕組みです。

たった数行のコードでも、Propsのおかげでコンポーネントが柔軟に変化します。もしボタンのデザインを変えたくなった場合も、MyButtonを1箇所修正するだけで、すべてのボタンに自動で変更が反映されるため、管理がとても楽になります。

3. 条件によってPropsを変える

3. 条件によってPropsを変える

ここでは、アプリの状態に応じてPropsを切り替える基本的な方法を紹介します。Reactでは「状況によって表示内容を変えたい」というケースがよくあります。例えば、ログイン前とログイン後でボタンの文言を変えたい場合などが典型的です。こうした場面でも、Propsを使えばシンプルなコードで直感的に実装できます。

import React from "react";

// 状態によって表示を変えるボタン
function ActionButton(props) {
  return <button>{props.label}</button>;
}

function App() {
  const isLoggedIn = true; // 状態の例：ログインしているかどうか

  return (
    <div>
      <h1>ログイン状態による表示切り替え</h1>
      {isLoggedIn ? (
        <ActionButton label="ログアウト" />
      ) : (
        <ActionButton label="ログイン" />
      )}
    </div>
  );
}

export default App;

このサンプルでは、isLoggedInという変数を使って状態を判定し、必要に応じて渡すPropsを切り替えています。表示されるボタンは常に1つですが、状況によって文言が変わることで、より現実のアプリに近いインタラクションを再現できます。

プログラミング未経験の方は、「条件によって違うラベルを渡しているだけ」と考えると理解しやすいでしょう。同じコンポーネントを使い回しながら、Propsを変更するだけで役割を切り替えられるため、コードの見通しもよくなり、アプリの拡張もしやすくなります。

4. Propsでアイコンや色を変える応用例

4. Propsでアイコンや色を変える応用例

Propsは文字だけでなく、色やアイコンのようなスタイルを切り替えるのにも活用できます。例えば、同じボタンでも「成功の緑ボタン」と「警告の赤ボタン」を作ることができます。

import React from "react";

function StyledButton(props) {
  const style = {
    backgroundColor: props.color,
    color: "white",
    padding: "10px 20px",
    border: "none",
    borderRadius: "5px",
    margin: "5px"
  };

  return <button style={style}>{props.label}</button>;
}

function App() {
  return (
    <div>
      <h1>色を切り替えるボタン</h1>
      <StyledButton label="成功" color="green" />
      <StyledButton label="警告" color="red" />
    </div>
  );
}

export default App;

この例では、Propsにlabelだけでなくcolorも渡しています。これにより、コンポーネントを再利用しながらデザインや見た目を柔軟に切り替えることができます。

5. Propsを使うメリットを理解しよう

5. Propsを使うメリットを理解しよう

Propsを使って表示を動的に切り替える方法を学んできましたが、そのメリットは次のとおりです。

• 同じコンポーネントを何度も書かずに再利用できる
• 変更が必要なときもPropsを差し替えるだけで済む
• 見た目や動きを簡単に切り替えられるので、メンテナンス性が高まる

プログラミング未経験の方でも、Propsは「コンポーネントに渡す設定値」と覚えておけば理解しやすいです。テレビのリモコンの「入力切替ボタン」をイメージするとわかりやすいでしょう。テレビ本体は同じでも、入力の切り替えによって表示内容（地上波、BS、HDMIなど）が変わります。Propsもまさに同じような役割を果たしています。

まとめ

まとめ

ReactのPropsを使ったコンポーネントの動的表示切り替えは、初心者にとって理解することで一気に開発の幅が広がる重要な考え方です。Propsによって文字や色、ボタンの種類、画面の状態に応じた出し分けなどを柔軟に変更でき、ひとつのコンポーネントを複数の用途に応用できるのが大きな魅力です。特に「保存」「削除」「編集」のように表示内容が頻繁に変わる場面では、Propsを利用することで重複したコードを書く必要がなくなり、メンテナンスも容易になります。コンポーネントを再利用しやすい形で設計することは、Reactを学ぶうえで欠かせない重要ポイントとなります。また、Propsと条件分岐を組み合わせれば、ログイン状態やフラグの有無などによって表示を変える動的UIが簡単に実現できます。さらに、色やスタイルをPropsに渡すことで、より直感的で視覚的に分かりやすいUIを構築できるのも大きな利点です。Propsという「外から設定を受け取る仕組み」を活かし、用途に応じてコンポーネントの見た目や役割を柔軟に変えられる点こそ、Reactの再利用性を高める最重要の基礎といえるでしょう。

Propsを使った応用サンプル

ここでは、コンポーネントの役割と色、さらにアイコンをPropsで切り替える応用例を示します。

import React from "react";

function IconButton(props) {
  const style = {
    backgroundColor: props.color,
    color: "white",
    padding: "10px 20px",
    borderRadius: "5px",
    display: "inline-flex",
    alignItems: "center",
    margin: "6px"
  };

  return (
    <button style={style}>
      <span className="me-2">{props.icon}</span>
      {props.label}
    </button>
  );
}

function App() {
  return (
    <div>
      <h1>Propsで色やアイコンを切り替える例</h1>
      <IconButton label="保存" color="green" icon="✔" />
      <IconButton label="警告" color="red" icon="⚠" />
      <IconButton label="編集" color="blue" icon="✎" />
    </div>
  );
}

export default App;

このサンプルでは、Propsにlabelとcolorに加えてiconも渡すことで、より視覚的にわかりやすい表示を実現しています。Propsは複数の値をまとめて扱うことができるため、UIのパターンを増やしたいときにも非常に便利です。複雑なUIであっても、Propsを上手に活用することでコンポーネントの数を増やしすぎず、整理されたコード構成を保つことができます。特にプロジェクトが大きくなると、小さなコンポーネントを組み合わせて画面全体を構築するスタイルが主流となるため、Propsを通じた柔軟な受け渡しは欠かせません。また、今回紹介した色やアイコンの切り替え以外にも、サイズ、幅、高さ、フォントなどのスタイルをProps経由で制御することも一般的で、画面の用途に応じたコンポーネントカスタマイズの幅がさらに広がります。

Propsはコンポーネントを再利用しやすくするだけではなく、アプリ全体の見通しを良くし、条件による分岐をわかりやすく整理できるという利点もあります。たとえば、ログイン中かどうかによってボタンの表示を切り替える場合や、エラーメッセージの種類によってテキストや色を変更する場合など、Propsの活用次第で見た目と機能のどちらも柔軟に切り替えることが可能です。こうした特性によって、Reactアプリは多様な画面構成を効率良く作成でき、ユーザーの使いやすさを高めるUIデザインにもつながります。初心者のうちにPropsの基本と応用を押さえておくことで、より実践的で表現力豊かなアプリ開発が実現し、プロジェクトの規模が大きくなっても困らない基礎スキルが身につくでしょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

ReactのPropsとは何ですか？初心者でも理解できるように教えてください。

ReactのPropsとは、コンポーネントに外部から値を渡す仕組みのことです。表示するテキストやスタイルなどを柔軟に切り替えるために使います。