モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 16：Props

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 16：Props 前半 ― 「コンポーネントにデータを渡す」感覚を身につける
  2. Propsとは ― 「コンポーネントに渡す“情報のパラメータ”」
    1. コンポーネントに“入力”を渡す仕組み
    2. 関数とコンポーネントのイメージを重ねる
  3. 親から子へのデータ ― 「親が持つ情報を子に渡す」
    1. 親コンポーネントが“データの持ち主”になる
  4. Propsの受け取り ― 「props引数でまとめて受ける」
    1. 基本形：function Component(props) { ... }
  5. 分割代入 ― 「propsから必要な値だけを取り出す」
    1. propsから取り出すコードを読みやすくする
  6. String・Number・Boolean ― 「基本的な型のPropsを使ってみる」
    1. String（文字列）をPropsとして渡す
    2. Number（数値）をPropsとして渡す
    3. Boolean（真偽値）をPropsとして渡す
  7. DAY 16 前半のミニテンプレート ― Propsの基本をまとめた例
  8. DAY 16：Props 前半のまとめ
  9. DAY 16：Props 中盤 ― 「同じコンポーネントを違うデータで使い回す」感覚を育てる
  10. Propsとは ― 「コンポーネントを“汎用部品”に変えるための入力」
    1. 同じコンポーネントを、違う内容で表示する
  11. 親から子へのデータ ― 「親がデータを管理し、子は表示に集中する」
    1. 親コンポーネントに「レッスン一覧のデータ」を持たせる
  12. Propsの受け取り ― 「分割代入で読みやすくする」
    1. propsから分割代入で取り出す
  13. String・Number・Boolean ― 「表示と条件分岐に使い分ける」
    1. String（文字列）で表示内容を変える
    2. Number（数値）で進捗や番号を扱う
    3. Boolean（真偽値）で表示を切り替える
  14. DAY 16 中盤のミニテンプレート ― 「レッスン一覧＋Props」まとめ
  15. DAY 16：Props 中盤のまとめ
  16. DAY 16：Props 後半 ― 「Propsを意識して設計できる自分」に近づく
  17. Propsとは ― 「コンポーネントの“外からの入力”である」
    1. コンポーネントは“箱”、Propsは“箱に入れる中身”
  18. 親から子へのデータ ― 「親が“データの責任者”になる」
    1. 親コンポーネントがデータを持ち、子に渡す
  19. Propsの受け取り ― 「分割代入を前提にした書き方に慣れる」
    1. propsをそのまま使う書き方と、分割代入の書き方
  20. String・Number・Boolean ― 「型ごとの役割を意識して使う」
    1. String（文字列）Propsの役割
    2. Number（数値）Propsの役割
    3. Boolean（真偽値）Propsの役割
  21. Props設計の“ちょっと実務寄り”な考え方
    1. 「このコンポーネントは何を変えられるべきか？」を考える
  22. DAY 16 後半の「Props総まとめテンプレート」
  23. DAY 16：Props 後半のまとめ

DAY 16：Props 前半 ― 「コンポーネントにデータを渡す」感覚を身につける

DAY 16は、Reactの中でも特に重要なテーマである Props を扱います。 ここから、コンポーネントが「ただの部品」から「データを受け取って変化する部品」に進化していきます。

この前半で押さえるキーワードは次のとおりです。

  • Propsとは
  • 親から子へのデータ
  • Propsの受け取り
  • 分割代入
  • String
  • Number
  • Boolean

「Propsって何？」を、“なんとなく”ではなく“自分で使える”レベルまで持っていくことを目標にします。

Propsとは ― 「コンポーネントに渡す“情報のパラメータ”」

コンポーネントに“入力”を渡す仕組み

まず、Propsを一言で言うと、

コンポーネントに渡す“情報のパラメータ”

です。

JavaScriptの関数に引数を渡すのと同じように、 Reactのコンポーネントにも「外から情報を渡す」ことができます。 その情報のまとまりを Props（プロップス） と呼びます。

関数とコンポーネントのイメージを重ねる

通常の関数だと、次のように引数を渡します。

function greet(name) {
  console.log(`こんにちは、${name}さん`);
}

greet("太郎"); // 「こんにちは、太郎さん」と表示
JavaScript

Reactのコンポーネントでは、これに近いことを JSXの属性 を使って行います。

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

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

ここで起きていることをステップで整理すると、

  1. Greeting はコンポーネント（Function Component）です。
  2. Appの中で <Greeting name="太郎" /> と書いています。
  3. name="太郎" が、Greetingコンポーネントに渡される Props です。
  4. Greetingの中では、props.name としてその値を参照しています。
  5. 結果として、「こんにちは、太郎さん」「こんにちは、花子さん」と表示されます。

重要ポイント：

  • Propsは「コンポーネントに渡すデータ」です。
  • 関数の引数と同じように、「外から中へ情報を渡す仕組み」として理解すると分かりやすいです。

親から子へのデータ ― 「親が持つ情報を子に渡す」

親コンポーネントが“データの持ち主”になる

Propsは、基本的に 親コンポーネントから子コンポーネントへ 渡されます。

例として、親コンポーネント App が「受講者名」と「完了レッスン数」を持っていて、 それを子コンポーネントに渡すイメージを考えます。

function Progress(props) {
  return (
    <p>
      {props.userName}さんの完了レッスン：{props.completed} / 60
    </p>
  );
}

function App() {
  const userName = "受講者A";
  const completed = 5;

  return (
    <div>
      <h1>React入門 60日コース</h1>
      <Progress userName={userName} completed={completed} />
    </div>
  );
}
JSX

ここで起きていることをステップで整理すると、

  1. App は親コンポーネントです。
  2. Appの中で、userName と completed という変数を持っています。
  3. <Progress userName={userName} completed={completed} /> と書くことで、 その値を Progress コンポーネントに渡しています。
  4. Progress は子コンポーネントとして、props.userName と props.completed を使って表示を行います。

重要ポイント：

  • 親コンポーネントは「データの持ち主」となり、子コンポーネントに必要な情報だけを渡します。
  • 子コンポーネントは「渡されたデータを使ってUIを描画する役割」を持ちます。

Propsの受け取り ― 「props引数でまとめて受ける」

基本形：function Component(props) { ... }

Propsを受け取るコンポーネントの基本形は、次のようになります。

function ComponentName(props) {
  return (
    // propsから必要な値を取り出してUIを描画
  );
}
JSX

先ほどの Progress をもう一度見てみます。

function Progress(props) {
  return (
    <p>
      {props.userName}さんの完了レッスン：{props.completed} / 60
    </p>
  );
}
JSX

ここで起きていることを整理すると、

  1. Progress は props という引数を受け取っています。
  2. Appから渡された userName と completed は、props.userName と props.completed に入っています。
  3. JSXの中で {props.userName} や {props.completed} と書くことで、その値を表示しています。

重要ポイント：

  • Propsは、コンポーネントの引数 props として受け取ります。
  • props.プロパティ名 で、渡された値にアクセスできます。

分割代入 ― 「propsから必要な値だけを取り出す」

propsから取り出すコードを読みやすくする

props.userName や props.completed を何度も書くと、 コードが少し読みにくくなってきます。

そこで、JavaScriptの 分割代入 を使って、 propsから必要な値だけを取り出す書き方がよく使われます。

function Progress(props) {
  const { userName, completed } = props;

  return (
    <p>
      {userName}さんの完了レッスン：{completed} / 60
    </p>
  );
}
JSX

さらに、コンポーネントの引数のところで直接分割代入することもできます。

function Progress({ userName, completed }) {
  return (
    <p>
      {userName}さんの完了レッスン：{completed} / 60
    </p>
  );
}
JSX

ここで起きていることを整理すると、

  1. Progress({ userName, completed }) という書き方で、 props.userName と props.completed を直接 userName と completed に展開しています。
  2. JSXの中では、props. を付けずに userName と completed をそのまま使えます。
  3. コードが短く・読みやすくなります。

重要ポイント：

  • 分割代入は「propsから必要な値だけを取り出す」ためのテクニックです。
  • function Component({ foo, bar }) { ... } という書き方は、Reactで非常によく使われます。

String・Number・Boolean ― 「基本的な型のPropsを使ってみる」

String（文字列）をPropsとして渡す

文字列のPropsは、最もよく使うパターンです。

function LessonTitle({ title }) {
  return <h2>{title}</h2>;
}

function App() {
  return (
    <div>
      <LessonTitle title="DAY 16：Props" />
      <LessonTitle title="DAY 17：State" />
    </div>
  );
}
JSX

ここでは、

  • title="DAY 16：Props" という文字列が、LessonTitle に渡されています。
  • LessonTitle は {title} としてその文字列を表示しています。

Number（数値）をPropsとして渡す

数値も、進捗やカウントなどでよく使います。

function Progress({ completed, total }) {
  return (
    <p>
      完了レッスン：{completed} / {total}
    </p>
  );
}

function App() {
  return (
    <div>
      <Progress completed={5} total={60} />
    </div>
  );
}
JSX

ここでは、

  • completed={5} と total={60} が数値として渡されています。
  • JSXの中で {completed} や {total} としてそのまま表示できます。

Boolean（真偽値）をPropsとして渡す

真偽値は、「表示するかどうか」「強調するかどうか」などの条件に使えます。

function LessonBadge({ isImportant }) {
  return (
    <span>
      {isImportant ? "重要レッスン" : "通常レッスン"}
    </span>
  );
}

function App() {
  return (
    <div>
      <LessonBadge isImportant={true} />
      <LessonBadge isImportant={false} />
    </div>
  );
}
JSX

ここで起きていることを整理すると、

  1. LessonBadge は isImportant というBooleanのPropsを受け取っています。
  2. {isImportant ? "重要レッスン" : "通常レッスン"} という三項演算子で、表示内容を切り替えています。
  3. isImportant={true} のときは「重要レッスン」、isImportant={false} のときは「通常レッスン」と表示されます。

重要ポイント：

  • String・Number・Booleanは、Propsとして最も基本的な型です。
  • 文字列は "..."、数値や真偽値は {...} で渡すのがポイントです。

DAY 16 前半のミニテンプレート ― Propsの基本をまとめた例

最後に、DAY 16 前半の内容をすべて含んだミニテンプレートを示します。

function LessonTitle({ title }) {
  return <h2>{title}</h2>;
}

function Progress({ userName, completed, total }) {
  return (
    <p>
      {userName}さんの完了レッスン：{completed} / {total}
    </p>
  );
}

function LessonBadge({ isImportant }) {
  return (
    <span>
      {isImportant ? "重要レッスン" : "通常レッスン"}
    </span>
  );
}

function App() {
  const userName = "受講者A";

  return (
    <div>
      <h1>React入門 60日コース</h1>

      <LessonTitle title="DAY 16：Props" />

      <Progress userName={userName} completed={5} total={60} />

      <p>
        このレッスンは <LessonBadge isImportant={true} /> です。
      </p>
    </div>
  );
}

export default App;
JSX

このコードには、

  • Propsとは（コンポーネントに渡すデータ）
  • 親から子へのデータ（App → LessonTitle・Progress・LessonBadge）
  • Propsの受け取り（function Component({ ... })）
  • 分割代入（引数で { title, userName, completed, total, isImportant } を受け取る）
  • String（title）
  • Number（completed, total）
  • Boolean（isImportant）

がすべて含まれています。

DAY 16：Props 前半のまとめ

この前半では、

  • Propsが「コンポーネントに渡すデータ」であり、関数の引数のような役割を持つこと
  • 親コンポーネントがデータを持ち、子コンポーネントに必要な情報だけを渡す流れを確認したこと
  • props引数でPropsを受け取り、props.プロパティ名としてアクセスする基本形を押さえたこと
  • 分割代入を使って、function Component({ foo, bar }) { ... } という読みやすい書き方を体感したこと
  • String・Number・Booleanという基本的な型をPropsとして渡し、表示や条件分岐に使うイメージを持てたこと

が大きなポイントになります。

中盤・後半では、 このPropsを使って「複数のレッスンカードを動的に表示する」「親から子へ柔軟にデータを渡す」といった、 より実践的なパターンへと進んでいきます。

DAY 16：Props 中盤 ― 「同じコンポーネントを違うデータで使い回す」感覚を育てる

DAY 16の中盤では、前半で学んだ

  • Propsとは
  • 親から子へのデータ
  • Propsの受け取り
  • 分割代入
  • String
  • Number
  • Boolean

を、もう一歩踏み込んで「同じコンポーネントを、違うデータで何度も使い回す」練習をしていきます。 ここでは、レッスンカードを題材にして、Propsを使った再利用の感覚をステップバイステップで確認していきます。

Propsとは ― 「コンポーネントを“汎用部品”に変えるための入力」

同じコンポーネントを、違う内容で表示する

まず、「レッスンカード」を1つのコンポーネントとして定義してみます。

function LessonCard({ day, title, isImportant }) {
  return (
    <div>
      <h3>
        DAY {day}：{title}
      </h3>
      <p>
        このレッスンは
        {isImportant ? "重要レッスンです。" : "通常レッスンです。"}
      </p>
    </div>
  );
}
JSX

この LessonCard は、Propsとして

  • day（Number）
  • title（String）
  • isImportant（Boolean）

を受け取っています。

これを親コンポーネントから呼び出すとき、次のように書けます。

function App() {
  return (
    <div>
      <LessonCard day={16} title="Props" isImportant={true} />
      <LessonCard day={17} title="State" isImportant={true} />
      <LessonCard day={18} title="イベントハンドリング" isImportant={false} />
    </div>
  );
}
JSX

ここで起きていることを整理すると、

  1. LessonCard は「レッスン情報を表示する汎用的な部品」です。
  2. 親コンポーネント App は、day・title・isImportant に違う値を渡しています。
  3. 同じ LessonCard コンポーネントが、渡されたPropsによって違う内容を表示しています。

重要ポイント：

  • Propsは「同じコンポーネントを、違うデータで使い回すための入力」です。
  • コンポーネントを汎用部品にすることで、再利用性が一気に高まります。

親から子へのデータ ― 「親がデータを管理し、子は表示に集中する」

親コンポーネントに「レッスン一覧のデータ」を持たせる

次に、親コンポーネント側にレッスン一覧のデータをまとめて持たせてみます。

function App() {
  const lessons = [
    { day: 16, title: "Props", isImportant: true },
    { day: 17, title: "State", isImportant: true },
    { day: 18, title: "イベントハンドリング", isImportant: false },
  ];

  return (
    <div>
      <h1>React入門 60日コース</h1>
      {lessons.map((lesson) => (
        <LessonCard
          key={lesson.day}
          day={lesson.day}
          title={lesson.title}
          isImportant={lesson.isImportant}
        />
      ))}
    </div>
  );
}
JSX

ここで起きていることをステップで整理すると、

  1. App は親コンポーネントとして、lessons という配列を持っています。
  2. lessons の各要素は、day・title・isImportant を持つオブジェクトです。
  3. lessons.map(...) を使って、配列の各要素に対して LessonCard を呼び出しています。
  4. それぞれの LessonCard に、対応する day・title・isImportant をPropsとして渡しています。

重要ポイント：

  • 親コンポーネントは「データの管理役」です。
  • 子コンポーネントは「渡されたデータを使ってUIを描画する役」です。
  • この役割分担によって、コードが整理され、変更に強くなります。

Propsの受け取り ― 「分割代入で読みやすくする」

propsから分割代入で取り出す

先ほどの LessonCard を、分割代入を使わない形で書くと次のようになります。

function LessonCard(props) {
  return (
    <div>
      <h3>
        DAY {props.day}：{props.title}
      </h3>
      <p>
        このレッスンは
        {props.isImportant ? "重要レッスンです。" : "通常レッスンです。"}
      </p>
    </div>
  );
}
JSX

これでも動きますが、props. が何度も出てきて少し読みにくくなります。 そこで、分割代入を使って書き換えます。

function LessonCard({ day, title, isImportant }) {
  return (
    <div>
      <h3>
        DAY {day}：{title}
      </h3>
      <p>
        このレッスンは
        {isImportant ? "重要レッスンです。" : "通常レッスンです。"}
      </p>
    </div>
  );
}
JSX

ここで起きていることを整理すると、

  1. function LessonCard({ day, title, isImportant }) という書き方で、 props.day・props.title・props.isImportant を直接 day・title・isImportant に展開しています。
  2. JSXの中では、props. を付けずに day・title・isImportant をそのまま使えます。
  3. コードが短く・読みやすくなります。

重要ポイント：

  • 分割代入は「propsから必要な値だけを取り出す」ためのテクニックです。
  • function Component({ foo, bar }) { ... } という書き方は、Reactで非常によく使われます。

String・Number・Boolean ― 「表示と条件分岐に使い分ける」

String（文字列）で表示内容を変える

title のような文字列Propsは、見出しや説明文に使われます。

function LessonTitle({ title }) {
  return <h2>{title}</h2>;
}

function App() {
  return (
    <div>
      <LessonTitle title="DAY 16：Props" />
      <LessonTitle title="DAY 17：State" />
    </div>
  );
}
JSX

ここでは、

  • title="DAY 16：Props" という文字列が、LessonTitle に渡されています。
  • LessonTitle は {title} としてその文字列を表示しています。

Number（数値）で進捗や番号を扱う

day や completed のような数値Propsは、進捗や番号に使われます。

function Progress({ completed, total }) {
  const percentage = Math.round((completed / total) * 100);

  return (
    <p>
      完了レッスン：{completed} / {total}（{percentage}%）
    </p>
  );
}

function App() {
  return (
    <div>
      <Progress completed={5} total={60} />
    </div>
  );
}
JSX

ここでは、

  • completed={5} と total={60} が数値として渡されています。
  • コンポーネント内で計算を行い、percentage を表示しています。

Boolean（真偽値）で表示を切り替える

isImportant のような真偽値Propsは、表示の切り替えに使われます。

function LessonBadge({ isImportant }) {
  return (
    <span>
      {isImportant ? "重要レッスン" : "通常レッスン"}
    </span>
  );
}

function App() {
  return (
    <div>
      <LessonBadge isImportant={true} />
      <LessonBadge isImportant={false} />
    </div>
  );
}
JSX

ここで起きていることを整理すると、

  1. LessonBadge は isImportant というBooleanのPropsを受け取っています。
  2. {isImportant ? "重要レッスン" : "通常レッスン"} という三項演算子で、表示内容を切り替えています。
  3. isImportant={true} のときは「重要レッスン」、isImportant={false} のときは「通常レッスン」と表示されます。

重要ポイント：

  • Stringは「表示する文字」、Numberは「計算や番号」、Booleanは「条件分岐」に使うのが基本的なパターンです。
  • それぞれの型をPropsとして使い分けることで、コンポーネントの表現力が一気に広がります。

DAY 16 中盤のミニテンプレート ― 「レッスン一覧＋Props」まとめ

最後に、DAY 16 中盤の内容をすべて含んだミニテンプレートを示します。

function LessonCard({ day, title, isImportant }) {
  return (
    <div>
      <h3>
        DAY {day}：{title}
      </h3>
      <p>
        このレッスンは
        {isImportant ? "重要レッスンです。" : "通常レッスンです。"}
      </p>
    </div>
  );
}

function Progress({ userName, completed, total }) {
  const percentage = Math.round((completed / total) * 100);

  return (
    <p>
      {userName}さんの完了レッスン：{completed} / {total}（{percentage}%）
    </p>
  );
}

function App() {
  const userName = "受講者A";

  const lessons = [
    { day: 16, title: "Props", isImportant: true },
    { day: 17, title: "State", isImportant: true },
    { day: 18, title: "イベントハンドリング", isImportant: false },
  ];

  return (
    <div>
      <h1>React入門 60日コース</h1>

      <Progress userName={userName} completed={5} total={60} />

      {lessons.map((lesson) => (
        <LessonCard
          key={lesson.day}
          day={lesson.day}
          title={lesson.title}
          isImportant={lesson.isImportant}
        />
      ))}
    </div>
  );
}

export default App;
JSX

このコードには、

  • Propsとは（コンポーネントに渡すデータ）
  • 親から子へのデータ（App → LessonCard・Progress）
  • Propsの受け取り（分割代入で { day, title, isImportant }, { userName, completed, total } を受け取る）
  • String（title, userName）
  • Number（day, completed, total）
  • Boolean（isImportant）

がすべて含まれています。

DAY 16：Props 中盤のまとめ

この中盤では、

  • Propsが「同じコンポーネントを違うデータで使い回すための入力」であること
  • 親コンポーネントがデータを管理し、子コンポーネントに必要な情報だけを渡す流れを、配列＋mapを通して体感したこと
  • 分割代入を使うことで、Propsの受け取りコードが短く・読みやすくなること
  • String・Number・BooleanをPropsとして使い分けることで、表示・計算・条件分岐を柔軟に行えること

が大きなポイントになります。

後半では、 このPropsをさらに発展させて、「デフォルト値」「型の意識」「Props設計のコツ」などに触れながら、 より実務に近いPropsの使い方へと進んでいきます。

DAY 16：Props 後半 ― 「Propsを意識して設計できる自分」に近づく

DAY 16の後半では、これまでに学んだ

  • Propsとは
  • 親から子へのデータ
  • Propsの受け取り
  • 分割代入
  • String
  • Number
  • Boolean

を、「なんとなく分かった」から「意識して設計に使える」レベルに近づけることを目標にします。 ここでは、少しだけ実務寄りの視点を混ぜながら、Propsの設計と使い方をステップバイステップで整理していきます。

Propsとは ― 「コンポーネントの“外からの入力”である」

コンポーネントは“箱”、Propsは“箱に入れる中身”

まず、Propsのイメージをもう一度整理します。

  • コンポーネント → 「UIを描画する箱」
  • Props → 「その箱に入れる中身（入力データ）」

同じ箱でも、中身が変われば表示が変わります。 この「同じコンポーネントを、違うPropsで使い回す」という考え方が、Reactの再利用性の根本にあります。

例として、レッスンカードをもう一度見てみます。

function LessonCard({ day, title, isImportant }) {
  return (
    <div>
      <h3>
        DAY {day}：{title}
      </h3>
      <p>
        このレッスンは
        {isImportant ? "重要レッスンです。" : "通常レッスンです。"}
      </p>
    </div>
  );
}
JSX

ここで、

  • コンポーネント LessonCard は「レッスン情報を表示する箱」
  • Props day・title・isImportant は「箱に入れる中身」

という関係になっています。

重要ポイント：

  • Propsは「コンポーネントの外から渡される入力」です。
  • コンポーネントは「Propsを受け取ってUIを決める箱」として設計すると、再利用しやすくなります。

親から子へのデータ ― 「親が“データの責任者”になる」

親コンポーネントがデータを持ち、子に渡す

Propsは、基本的に 親コンポーネントから子コンポーネントへ 渡されます。 ここでは、親コンポーネントが「学習コースの状態」を持ち、子コンポーネントに渡す例を見ていきます。

function App() {
  const userName = "受講者A";
  const completed = 8;
  const total = 60;

  const lessons = [
    { day: 16, title: "Props", isImportant: true },
    { day: 17, title: "State", isImportant: true },
    { day: 18, title: "イベントハンドリング", isImportant: false },
  ];

  return (
    <div>
      <h1>React入門 60日コース</h1>

      <Progress userName={userName} completed={completed} total={total} />

      {lessons.map((lesson) => (
        <LessonCard
          key={lesson.day}
          day={lesson.day}
          title={lesson.title}
          isImportant={lesson.isImportant}
        />
      ))}
    </div>
  );
}
JSX

ここで起きていることをステップで整理すると、

  1. App は親コンポーネントとして、ユーザー名・完了レッスン数・レッスン一覧などのデータを持っています。
  2. Progress には、ユーザー名・完了レッスン数・総レッスン数をPropsとして渡しています。
  3. LessonCard には、各レッスンの day・title・isImportant をPropsとして渡しています。
  4. 子コンポーネントは「渡されたデータを使ってUIを描画する」ことに集中しています。

重要ポイント：

  • 親コンポーネントは「データの責任者」として、状態や一覧を管理します。
  • 子コンポーネントは「表示の責任者」として、渡されたPropsを使ってUIを描画します。
  • この役割分担が、Reactの設計の基本になります。

Propsの受け取り ― 「分割代入を前提にした書き方に慣れる」

propsをそのまま使う書き方と、分割代入の書き方

Propsの受け取り方には、主に2つのスタイルがあります。

1. propsをそのまま使うスタイル

function Progress(props) {
  const percentage = Math.round((props.completed / props.total) * 100);

  return (
    <p>
      {props.userName}さんの完了レッスン：
      {props.completed} / {props.total}（{percentage}%）
    </p>
  );
}
JSX

2. 分割代入を使うスタイル

function Progress({ userName, completed, total }) {
  const percentage = Math.round((completed / total) * 100);

  return (
    <p>
      {userName}さんの完了レッスン：
      {completed} / {total}（{percentage}%）
    </p>
  );
}
JSX

両方とも正しい書き方ですが、 Reactでは 分割代入を使うスタイル がよく使われます。

理由は、

  • props. を何度も書かなくてよい
  • どのPropsを使っているかが、引数のところを見れば一目で分かる
  • コードが短く・読みやすくなる

からです。

重要ポイント：

  • Propsの受け取りは、function Component({ foo, bar }) { ... } という分割代入スタイルに慣れておくと、後々楽になります。
  • 「このコンポーネントはどんなPropsを受け取るのか」が、引数の部分だけで分かるのが理想です。

String・Number・Boolean ― 「型ごとの役割を意識して使う」

String（文字列）Propsの役割

文字列Propsは、主に「表示するテキスト」を決めるために使います。

function LessonTitle({ title }) {
  return <h2>{title}</h2>;
}

function App() {
  return (
    <div>
      <LessonTitle title="DAY 16：Props" />
      <LessonTitle title="DAY 17：State" />
    </div>
  );
}
JSX

ここでは、

  • title が「見出しテキスト」を決める役割を持っています。

Number（数値）Propsの役割

数値Propsは、主に「進捗・番号・計算」に使います。

function Progress({ completed, total }) {
  const percentage = Math.round((completed / total) * 100);

  return (
    <p>
      完了レッスン：{completed} / {total}（{percentage}%）
    </p>
  );
}
JSX

ここでは、

  • completed と total が「進捗の計算」に使われています。

Boolean（真偽値）Propsの役割

真偽値Propsは、「条件によって表示を切り替える」ために使います。

function LessonBadge({ isImportant }) {
  return (
    <span>
      {isImportant ? "重要レッスン" : "通常レッスン"}
    </span>
  );
}
JSX

ここでは、

  • isImportant が「重要かどうか」を表し、表示内容を切り替える役割を持っています。

重要ポイント：

  • String → 表示する文字
  • Number → 計算・番号・進捗
  • Boolean → 条件分岐・表示の切り替え

という役割を意識してPropsを設計すると、コンポーネントの意図が明確になります。

Props設計の“ちょっと実務寄り”な考え方

「このコンポーネントは何を変えられるべきか？」を考える

Propsを設計するときは、

「このコンポーネントは、何を外から変えられるべきか？」

という問いを自分に投げかけるとよいです。

例：LessonCard の場合

function LessonCard({ day, title, isImportant }) {
  return (
    <div>
      <h3>
        DAY {day}：{title}
      </h3>
      <p>
        このレッスンは
        {isImportant ? "重要レッスンです。" : "通常レッスンです。"}
      </p>
    </div>
  );
}
JSX

ここで、

  • day → レッスン番号を外から変えられるようにする
  • title → レッスンタイトルを外から変えられるようにする
  • isImportant → 重要かどうかを外から指定できるようにする

という設計になっています。

逆に、「このコンポーネントの中だけで完結しているべき情報」は、 Propsにせず、コンポーネント内に直接書いても構いません。

重要ポイント：

  • Propsにするのは「外から変えたい情報」です。
  • コンポーネント内で固定してよい情報は、無理にPropsにしなくても構いません。

DAY 16 後半の「Props総まとめテンプレート」

最後に、DAY 16の学習項目をすべて含んだテンプレートを示します。

function LessonCard({ day, title, isImportant }) {
  return (
    <div>
      <h3>
        DAY {day}：{title}
      </h3>
      <p>
        このレッスンは
        {isImportant ? "重要レッスンです。" : "通常レッスンです。"}
      </p>
    </div>
  );
}

function Progress({ userName, completed, total }) {
  const percentage = Math.round((completed / total) * 100);

  return (
    <p>
      {userName}さんの完了レッスン：
      {completed} / {total}（{percentage}%）
    </p>
  );
}

function App() {
  const userName = "受講者A";
  const completed = 8;
  const total = 60;

  const lessons = [
    { day: 16, title: "Props", isImportant: true },
    { day: 17, title: "State", isImportant: true },
    { day: 18, title: "イベントハンドリング", isImportant: false },
  ];

  return (
    <div>
      <h1>React入門 60日コース</h1>

      <Progress userName={userName} completed={completed} total={total} />

      {lessons.map((lesson) => (
        <LessonCard
          key={lesson.day}
          day={lesson.day}
          title={lesson.title}
          isImportant={lesson.isImportant}
        />
      ))}
    </div>
  );
}

export default App;
JSX

このテンプレートには、

  • Propsとは（コンポーネントに渡す外部入力）
  • 親から子へのデータ（App → Progress・LessonCard）
  • Propsの受け取り（分割代入で { userName, completed, total }, { day, title, isImportant } を受け取る）
  • String（title, userName）
  • Number（day, completed, total）
  • Boolean（isImportant）

がすべて含まれています。

DAY 16：Props 後半のまとめ

この後半では、

  • Propsを「コンポーネントの外から渡される入力」として、箱と中身のイメージで捉え直したこと
  • 親コンポーネントが「データの責任者」となり、子コンポーネントに必要な情報だけを渡す流れを確認したこと
  • 分割代入を前提にしたPropsの受け取りスタイルに慣れ、読みやすいコードの形を体感したこと
  • String・Number・Booleanを、それぞれ「表示」「計算」「条件分岐」の役割として意識して使い分けたこと
  • 「このコンポーネントは何を外から変えられるべきか？」という視点から、Props設計を考えるきっかけを持てたこと

が大きなポイントになります。

ここまで来た読者のみなさんは、 すでに「コンポーネントにデータを渡して、柔軟にUIを変える」というReactの重要な考え方を身につけています。 次のDAYからは、このPropsと対になる「State（コンポーネント自身が持つ状態）」へと進み、 よりインタラクティブで動きのあるUIを作っていくことになります。

スポンサーリンク
タイトルとURLをコピーしました