LESSON 03 · 約25分

propsで、部品を使い回す

親から子へ入力を渡し、同じ部品から異なるカードを作ります。

コードを試す前に

01のVite reactテンプレート（JavaScript/JSX）を使います。特記のないApp.jsxは、そのレッスンだけで動く独立した例です。例同士を連結しないでください。

短い学習用の例です。各App.jsxは独立した例で、順に追記して一つの完成品にする形式ではありません。ファイル名、依存関係、未定義部分の前提は注記に記載します。問題内の抜粋や空欄は、そのまま実行するための完成コードではありません。

開発環境の準備を確認する →

このレッスンでわかること

propsを読み取り専用の入力として使える
childrenで部品を組み合わせられる

違いをpropsにする

タイトルだけ違うカードをコピーする代わりに、titleというpropsを渡します。子はfunction Card({ title })のように受け取ります。数値や真偽値、配列、関数も渡せます。propsはその描画時点の入力なので、子から書き換えません。変更が必要なら親の状態と更新用の関数を組み合わせます。

囲んだ内容はchildren

<Panel>...</Panel>の中身はchildrenとして受け取れます。枠を描くPanelと、中身の学習内容を分けると、枠の見た目を一か所で変更できます。何でも細かく分ける必要はありません。繰り返しや、名前で説明できる責任の境目から部品にします。

省略できる入力を明示する

{ minutes = 10 }という分割代入の初期値は、propsが省略された場合やundefinedの場合に使われます。0やnullを渡した場合に自動で10へ置き換わるわけではありません。部品が受け取る値と表示上の約束を小さく決めると、使う側も迷いません。

同じカードを二つ配置する

src/App.jsx

function Panel({ children }) {
  return <section className="panel">{children}</section>;
}

function LessonCard({ title, minutes = 10 }) {
  return (
    <Panel>
      <h2>{title}</h2>
      <p>目安 {minutes}分</p>
    </Panel>
  );
}

export default function App() {
  return (
    <main>
      <h1>学習メニュー</h1>
      <LessonCard title="JSX" minutes={15} />
      <LessonCard title="props" />
    </main>
  );
}

minutes={15}は数値、minutes="15"は文字列です。今回は計算しませんが、型の違いを意識します。

TRY IT YOURSELF

propsで3枚のカードを作る

3枚目のLessonCardを追加し、titleとminutesを変える
minutesを省略した場合と0を渡した場合を比較する
Panelの中へカードごとに異なる説明文を渡せるように、LessonCardでもchildrenを受け取る

できたらOK：カード3枚が同じ構造で表示され、子がpropsを書き換えずに内容を変えられる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。