Next.jsで学ぶReact講座 | Reactの基本操作 – 名前だけを変えて挨拶するコンポーネント

このテーマのゴール

「名前だけを変えて挨拶するコンポーネント」は、React の いちばん基本的な“部品の考え方” をつかむための題材です。

同じ「挨拶」という見た目・構造を使い回しつつ、
「名前だけを変えたい」──このときに登場するのが props（プロップス） です。

ここを理解できると、

• 「同じコンポーネントを、違う中身で何度も使う」
• 「親から子に“値”を渡す」

という React の超基本パターンが、スッと入ってきます。

まずは完成イメージを見てみる

シンプルな挨拶コンポーネントの例

// Greeting.tsx
type GreetingProps = {
  name: string;
};

export function Greeting({ name }: GreetingProps) {
  return <p>こんにちは、{name}さん！</p>;
}

// Greeting.tsx
type GreetingProps = {
  name: string;
};

export function Greeting({ name }: GreetingProps) {
  return <p>こんにちは、{name}さん！</p>;
}

// page.tsx（Next.js のページ）
import { Greeting } from "./Greeting";

export default function Page() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>挨拶コンポーネントの例</h1>
      <Greeting name="太郎" />
      <Greeting name="花子" />
      <Greeting name="ジョン" />
    </main>
  );
}

// page.tsx（Next.js のページ）
import { Greeting } from "./Greeting";

export default function Page() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>挨拶コンポーネントの例</h1>
      <Greeting name="太郎" />
      <Greeting name="花子" />
      <Greeting name="ジョン" />
    </main>
  );
}

画面にはこう表示されます。

• こんにちは、太郎さん！
• こんにちは、花子さん！
• こんにちは、ジョンさん！

同じ <Greeting /> を3回使っているのに、名前だけが変わっているのがポイントです。

props とは何かをちゃんと理解する

「コンポーネントに渡す“引数”」だと思っていい

Greeting コンポーネントの定義をもう一度見てください。

type GreetingProps = {
  name: string;
};

export function Greeting({ name }: GreetingProps) {
  return <p>こんにちは、{name}さん！</p>;
}

type GreetingProps = {
  name: string;
};

export function Greeting({ name }: GreetingProps) {
  return <p>こんにちは、{name}さん！</p>;
}

ここで重要なのは 2 つです。

1. GreetingProps という「型」を定義している

type GreetingProps = {
  name: string;
};

type GreetingProps = {
  name: string;
};

「このコンポーネントは name という文字列を受け取りますよ」という宣言です。
TypeScript を使うことで、「何を受け取るコンポーネントなのか」がハッキリします。

2. 関数の引数で props を受け取っている

export function Greeting({ name }: GreetingProps) {
  return <p>こんにちは、{name}さん！</p>;
}

export function Greeting({ name }: GreetingProps) {
  return <p>こんにちは、{name}さん！</p>;
}

({ name }: GreetingProps) の部分は、

• Greeting は GreetingProps 型のオブジェクトを受け取る
• そのオブジェクトから name だけを取り出して使う

という意味です。

イメージとしては、こうです。

Greeting({ name: "太郎" });
Greeting({ name: "花子" });

Greeting({ name: "太郎" });
Greeting({ name: "花子" });

JSX で書くと <Greeting name="太郎" /> ですが、
中身では「name というプロパティを持つオブジェクト」が渡されている、と考えると分かりやすいです。

同じコンポーネントを「名前だけ変えて」使い回す

親コンポーネントから値を渡す

page.tsx 側のコードをもう一度見てみましょう。

export default function Page() {
  return (
    <main>
      <h1>挨拶コンポーネントの例</h1>
      <Greeting name="太郎" />
      <Greeting name="花子" />
      <Greeting name="ジョン" />
    </main>
  );
}

export default function Page() {
  return (
    <main>
      <h1>挨拶コンポーネントの例</h1>
      <Greeting name="太郎" />
      <Greeting name="花子" />
      <Greeting name="ジョン" />
    </main>
  );
}

ここでやっていることは、とてもシンプルです。

• <Greeting name="太郎" />
  → Greeting に { name: "太郎" } を渡している
• <Greeting name="花子" />
  → Greeting に { name: "花子" } を渡している
• <Greeting name="ジョン" />
  → Greeting に { name: "ジョン" } を渡している

中身のコンポーネントはまったく同じ。
違うのは 渡している name の値だけ。

これが「名前だけを変えて挨拶するコンポーネント」の正体です。

もう一歩：配列からまとめて挨拶する

配列＋map で「人数が増えても楽に」

少しだけレベルを上げて、「名前の配列からまとめて挨拶する」パターンも見てみましょう。

const names = ["太郎", "花子", "ジョン", "アリス"];

export default function Page() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>みんなに挨拶</h1>
      {names.map((n) => (
        <Greeting key={n} name={n} />
      ))}
    </main>
  );
}

const names = ["太郎", "花子", "ジョン", "アリス"];

export default function Page() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>みんなに挨拶</h1>
      {names.map((n) => (
        <Greeting key={n} name={n} />
      ))}
    </main>
  );
}

ここでのポイントは、

• names という配列に名前をまとめておく
• map で1人ずつ <Greeting /> に変換している

というところです。

もし名前が 100 人になっても、配列に追加するだけで済みます。
コンポーネント側は一切変えなくていい──これが「再利用できる部品」としての強さです。

まとめ：この小さなコンポーネントからつかんでほしいこと

この「名前だけを変えて挨拶するコンポーネント」で、いちばんつかんでほしいのは次の感覚です。

コンポーネントは「見た目＋ロジックのテンプレート」
props は「そのテンプレートに渡す具体的な値」
同じコンポーネントでも、props を変えれば違う表示になる

ここが腑に落ちると、

• 「ユーザー名だけ違うカード」
• 「金額だけ違う商品一覧」
• 「タイトルだけ違う記事リスト」

みたいな UI を、全部「同じコンポーネント＋違う props」で表現できるようになります。

もしよければ、Greeting を少しアレンジしてみてください。

• 「時間帯で挨拶を変える（おはよう／こんにちは／こんばんは）」
• 「敬称を変える（さん／くん／さま）」

みたいな要素を props に増やすと、「props でコンポーネントの振る舞いを変える」感覚がさらに深くなります。