React

React Props入門｜コンポーネントにデータを渡す

Reactでは、親コンポーネントから子コンポーネントにデータを渡す仕組みとしてProps（プロパティ）を使用します。Propsを使いこなすことで、再利用可能で柔軟なコンポーネントを作成できます。ここでは、Propsの基本から実践的な使い方までを解説します。

基本的な使い方

Step 1Propsの基本：データを渡す

Propsは、HTMLの属性と同じような書き方で親コンポーネントから子コンポーネントにデータを渡します。

src/App.js
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="太郎" age={25} />
      <Greeting name="花子" age={30} />
    </div>
  );
}

export default App;
src/Greeting.js
function Greeting({ name, age }) {
  return (
    <div>
      <h2>こんにちは、{name}さん！</h2>
      <p>年齢：{age}歳</p>
    </div>
  );
}

export default Greeting;

文字列は"値"で、数値やオブジェクトなど文字列以外のデータは{値}で渡します。子コンポーネントでは、引数の分割代入（{ name, age }）で受け取るのが一般的です。

Step 2propsオブジェクトで受け取る方法

分割代入を使わず、propsオブジェクトとして一括で受け取ることもできます。

src/Greeting.js
function Greeting(props) {
  return (
    <div>
      <h2>こんにちは、{props.name}さん！</h2>
      <p>年齢：{props.age}歳</p>
    </div>
  );
}

export default Greeting;

props.プロパティ名でアクセスできますが、分割代入のほうがコードが簡潔になるため推奨されています。

Step 3さまざまなデータ型を渡す

Propsでは文字列や数値だけでなく、配列・オブジェクト・関数など、あらゆるJavaScriptの値を渡すことができます。

JSX
function App() {
  const handleClick = () => alert('クリック！');
  const colors = ['赤', '青', '緑'];
  const user = { name: '太郎', role: '管理者' };

  return (
    <MyComponent
      title="サンプル"
      count={42}
      isActive={true}
      items={colors}
      user={user}
      onClick={handleClick}
    />
  );
}
src/MyComponent.js
function MyComponent({ title, count, isActive, items, user, onClick }) {
  return (
    <div>
      <h2>{title}（{count}件）</h2>
      <p>ステータス：{isActive ? '有効' : '無効'}</p>
      <p>ユーザー：{user.name}（{user.role}）</p>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={onClick}>ボタン</button>
    </div>
  );
}

export default MyComponent;

関数をPropsとして渡すことで、子コンポーネントから親コンポーネントの処理を実行できます。これはイベントハンドラを渡すときによく使われるパターンです。

Step 4デフォルト値の設定

Propsにデフォルト値を設定しておくと、値が渡されなかった場合にフォールバック値が使用されます。

JSX
function Button({ text = '送信', color = 'blue', size = 'medium' }) {
  return (
    <button style={{ backgroundColor: color, fontSize: size === 'large' ? '20px' : '14px' }}>
      {text}
    </button>
  );
}

// 使用例
<Button />                          {/* text="送信", color="blue" */}
<Button text="登録" color="green" /> {/* text="登録", color="green" */}

分割代入の= デフォルト値構文を使うことで、Propsが未指定のときのデフォルト値を簡潔に定義できます。

Step 5childrenプロパティ

コンポーネントの開始タグと終了タグの間に記述した内容は、childrenという特別なPropsとして子コンポーネントに渡されます。

JSX
function Card({ title, children }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <h3>{title}</h3>
      <div>{children}</div>
    </div>
  );
}

// 使用例
function App() {
  return (
    <Card title="お知らせ">
      <p>新しい機能が追加されました。</p>
      <p>詳細はこちらをご覧ください。</p>
    </Card>
  );
}

childrenを使うことで、レイアウト用のラッパーコンポーネント（カード、モーダル、サイドバーなど）を柔軟に作成できます。

注意

Propsは読み取り専用です。子コンポーネント内でPropsの値を直接変更することはできません。値を変更したい場合は、useStateを使って状態（state）として管理するか、親コンポーネントから更新用の関数をPropsとして渡してください。

まとめ

  • Propsは親コンポーネントから子コンポーネントにデータを渡す仕組み
  • 文字列は"値"、それ以外は{値}で渡す
  • 子コンポーネントでは分割代入（{ name, age }）で受け取るのが一般的
  • 配列・オブジェクト・関数など、あらゆるJavaScriptの値を渡せる
  • デフォルト値を設定しておくと、Props未指定時にフォールバックされる
  • childrenを使うと柔軟なラッパーコンポーネントが作れる
  • Propsは読み取り専用で、子コンポーネント内では変更できない