C
React 一覧
前へ4 / 22次へ
React/コンポーネント/Lesson 04

Props

30分·theory
このチャプター
2/4
JavaScript

Props

💡 なぜ学ぶ必要があるのか？

🎯 親コンポーネントと子コンポーネント間のデータ通信の基本です。
💼 同じコンポーネントをさまざまなデータで再利用できます。
⚡ React開発において最も重要な概念です。
🏢 실무에서는
実務では、Buttonコンポーネントにlabelやcolorやsizeをpropsとして渡してさまざまなボタンを作ります。UserCardコンポーネントに名前・メール・写真をpropsとして渡して複数のユーザーカードを表示します。

Props — 親から子へ送る荷物

日常の例え：宅配ボックス

親コンポーネントが子にデータを詰めた荷物を送ります。
子は荷物を受け取って使いますが、中身を変えることはできません。

主な特性

  • ▸一方向: 親 → 子のみ（子 → 親はcallback関数で行う）
  • ▸読み取り専用: 子コンポーネントでpropsを直接変更不可
  • ▸任意の値: 文字列、数値、関数、コンポーネントも渡せる

使い方

jsx
// 親 (送信)
<Greeting name="山田太郎" age={25} />

// 子 (受信)
function Greeting({ name, age }) {
  return <p>{name}さん、{age}歳、ようこそ！</p>;
}
💻 Propsの受け渡し — さまざまな型 
// ===== 入力: 親から様々な型のpropsを渡す =====
function App() {
  const user = { name: "山田太郎", age: 25 };

  return (
    <div>
      {/* 文字列、数値、boolean、関数、オブジェクトを渡す */}
      <Greeting
        name="山田太郎"
        age={25}
        isLoggedIn={true}
        onLogout={() => alert("ログアウト")}
        user={user}
      />
    </div>
  );
}

// ===== 処理: 子コンポーネントでpropsを受信する =====
function Greeting({ name, age, isLoggedIn, onLogout, user }) {
  // 分割代入でpropsを直接取り出して使用
  return (
    <div>
      <h2>こんにちは、{name}さん！ ({age}歳)</h2>
      {isLoggedIn ? (
        <button onClick={onLogout}>ログアウト</button>
      ) : (
        <p>ログインが必要です</p>
      )}
      <p>オブジェクトprops: {user.name}</p>
    </div>
  );
}

// ===== propsのデフォルト値設定 =====
function Badge({ label = "デフォルト", color = "gray" }) {
  // デフォルト値を指定してundefinedを防止
  return (
    <span style={{ background: color, padding: "2px 8px" }}>
      {label}
    </span>
  );
}

💡 💡 Propsのヒント

  • ▸分割代入: ({ name, age }) パターンを使う
  • ▸Optional: ?で任意propsを示す
  • ▸extends: HTML属性の継承（React.InputHTMLAttributes）
  • ▸React 19: Props drillingの代わりにuse(Context)を活用

この概念はReactコンポーネント開発において根幹をなします。Reactの宣言的UIパラダイムを理解し、propsとstateの違いを明確に区別してください。コンポーネントは、同じ入力（props）に対して常に同じ出力（JSX）を返す純粋関数のように動作する必要があります。

⚛️ Reactパターン — Props

Reactでのpropsの使い方をコードとともにステップごとに学びましょう。
1 🧩 1. コンポーネントの定義
関数がそのままコンポーネントになる
function Greeting({ name }) {
  return <h1>こんにちは、{name}！</h1>;
}
↓
2 📤 2. Propsの受け渡し
親 → 子への一方向データフロー
<Greeting name="山田太郎" />
↓
3 🔁 3. 再利用
同じコンポーネントを、異なるpropsで何度でも使い回す
<Greeting name="Alice" />
<Greeting name="Bob" />
↓
4 💡 4. 一方向データフロー
子が親のstateを変更するには、コールバック関数をpropsとして受け取る

📤 Props — 親→子へのデータ受け渡し

コードを直接編集すると0.7秒後に自動的に反映されます。React 18 + Babelを使用してブラウザ上で即時実行されます。
🖥️ 実行結果 — レンダリングされたReactコンポーネント
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — まず結果を確認し、エディタで自由に編集できます。

確認クイズ

子コンポーネントでpropsを変更しようとするとどうなりますか？
💡 propsは読み取り専用（read-only）です。子が親のデータを変更するには、親からsetState関数をpropsとして渡す必要があります。この単方向データフローがReactの核心です！
先に読むとよい概念: コンポーネントの基礎
次のおすすめ: 条件付きレンダリング
前へ一覧次へ
Props - React