Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – props

この課題のねらい

この演習は、「props の感覚を体に入れる」ためのものです。

親コンポーネントから子コンポーネントへ値を渡す
子コンポーネントでその値を使って表示する
必要なら console.log で中身を覗いてみる

ここまでできれば、React の「データの受け渡し」の基礎はちゃんと掴めています。

必須課題① 親から子へ文字列を渡して表示

propsとは「関数の引数」と同じイメージ

コンポーネントは「見た目を返す関数」でした。
関数に引数を渡すように、コンポーネントには props を渡します。

まずはシンプルな例から。

親コンポーネント（ページ）
子コンポーネント（メッセージ表示専用）

を作って、親から子へ文字列を渡してみます。

// app/page.tsx

type GreetingProps = {
  message: string;
};

function Greeting(props: GreetingProps) {
  return <p>{props.message}</p>;
}

export default function Page() {
  return (
    <main>
      <h1>props の練習</h1>
      <Greeting message="React の props を勉強中です" />
    </main>
  );
}

// app/page.tsx

type GreetingProps = {
  message: string;
};

function Greeting(props: GreetingProps) {
  return <p>{props.message}</p>;
}

export default function Page() {
  return (
    <main>
      <h1>props の練習</h1>
      <Greeting message="React の props を勉強中です" />
    </main>
  );
}

ここでやっていることを丁寧に分解します。

子側（Greeting コンポーネント）で
GreetingProps という「props の形」を型として定義
props: GreetingProps として引数を受け取る
props.message を JSX の中で表示する

親側（Page コンポーネント）で
<Greeting message="React の props を勉強中です" /> と書いて、
message という名前で文字列を渡している

つまり、

親が「message という名前のデータ」を渡す
子が「props.message」として受け取って使う

という流れです。

分割代入でさらに読みやすくする

props.message と書くのが少し長く感じたら、分割代入でスッキリさせられます。

type GreetingProps = {
  message: string;
};

function Greeting({ message }: GreetingProps) {
  return <p>{message}</p>;
}

type GreetingProps = {
  message: string;
};

function Greeting({ message }: GreetingProps) {
  return <p>{message}</p>;
}

こうすると、「このコンポーネントは message だけ受け取ります」ということが一目で分かります。

必須課題② propsをconsole.logで確認

「ちゃんと渡せているか」を目で確認する

props がどう見えているかが不安なときは、遠慮なく console.log で中身を確認してOKです。
開発中のデバッグとしてはむしろ推奨です。

さっきの Greeting コンポーネントに console.log を仕込んでみます。

type GreetingProps = {
  message: string;
};

function Greeting(props: GreetingProps) {
  console.log("Greeting の props:", props);

  return <p>{props.message}</p>;
}

type GreetingProps = {
  message: string;
};

function Greeting(props: GreetingProps) {
  console.log("Greeting の props:", props);

  return <p>{props.message}</p>;
}

ブラウザの開発者ツール（F12）を開いて「Console」タブを見ると、

Greeting の props: { message: "React の props を勉強中です" }

のように表示されるはずです。

ここで分かるのは、

props は「オブジェクト」で渡される
その中に、message というキーで文字列が入っている

ということです。

分割代入を使う場合でも、同じようにログを見られます。

function Greeting({ message }: GreetingProps) {
  console.log("Greeting の message:", message);

  return <p>{message}</p>;
}

function Greeting({ message }: GreetingProps) {
  console.log("Greeting の message:", message);

  return <p>{message}</p>;
}

このように「props の中身を目で確認する」癖をつけておくと、
「渡せていないのか」「渡しているけど名前を間違えているのか」がすぐ切り分けられるようになります。

挑戦課題 数値propsを受け取って計算表示

数値を渡して、子で計算させてみる

次は一歩進めて、「数値を props として渡し、子で計算して表示する」パターンです。

例として、「受講済みレッスン数と全レッスン数を渡して、進捗を表示する」コンポーネントを作ります。

// app/page.tsx

type ProgressProps = {
  completed: number;
  total: number;
};

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

  return (
    <section>
      <h2>学習進捗</h2>
      <p>
        {total} レッスン中 {completed} レッスン完了
      </p>
      <p>進捗率: {percent} %</p>
    </section>
  );
}

export default function Page() {
  return (
    <main>
      <h1>props の数値練習</h1>
      <Progress completed={3} total={10} />
    </main>
  );
}

// app/page.tsx

type ProgressProps = {
  completed: number;
  total: number;
};

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

  return (
    <section>
      <h2>学習進捗</h2>
      <p>
        {total} レッスン中 {completed} レッスン完了
      </p>
      <p>進捗率: {percent} %</p>
    </section>
  );
}

export default function Page() {
  return (
    <main>
      <h1>props の数値練習</h1>
      <Progress completed={3} total={10} />
    </main>
  );
}

ここでのポイントを整理します。

親側で
<Progress completed={3} total={10} /> のように、
数値をそのまま {3} {10} として渡している

子側で
ProgressProps で completed: number; total: number; と型を定義
分割代入で { completed, total } を受け取る
(completed / total) * 100 で進捗率を計算し、Math.round で丸める
計算結果を {percent} として JSX の中で表示

つまり、「計算ロジックを持っているのは子コンポーネント」です。

親は「データ（3 と 10）」だけを渡し、
子が「どう見せるか」「どう計算するか」を担当する、という役割分担になっています。

さらに console.log で確認してみる

計算がちゃんとできているか心配なら、ここでも console.log を使って確かめられます。

function Progress({ completed, total }: ProgressProps) {
  const percent = Math.round((completed / total) * 100);
  console.log("Progress props:", { completed, total, percent });

  return (
    // JSX は同じ
  );
}

function Progress({ completed, total }: ProgressProps) {
  const percent = Math.round((completed / total) * 100);
  console.log("Progress props:", { completed, total, percent });

  return (
    // JSX は同じ
  );
}

コンソールで、

Progress props: { completed: 3, total: 10, percent: 30 }

のように出ていれば、「渡されている値」と「計算結果」がひと目で確認できます。

まとめ：この課題でつかんでほしいこと

この props 演習で、本当に身につけてほしいことは次の3つです。

props は「親から子に渡すオブジェクト」であり、コンポーネントの引数として受け取る
JSX の中では、{props.xxx} や {xxx} として、文字列でも数値でも自由に使える
分からなくなったら console.log で props の中身を確認しながら考える

これさえ体に入っていれば、

記事カードコンポーネントにタイトル・著者・日付を渡す
ボタンコンポーネントにラベルやクリック時の処理を渡す
チャートコンポーネントに数値データを渡す

といった「本番寄りの UI」も自然に組み立てられるようになっていきます。