1. カードコンポーネントとは何か

カードコンポーネントとは、情報をひとまとめにして表示するための箱のような部品です。例えるなら、名刺や商品紹介カードのような存在で、タイトルや説明文、ボタンなどを一つの枠にまとめます。 Reactでは、このような見た目と役割を持つ部品をコンポーネントとして作ることで、同じ形を何度も使えるようになります。

初心者のうちは画面ごとにHTMLを書きがちですが、それだと修正が大変になります。カードを一つのコンポーネントにしておくと、デザイン変更も一か所直すだけで済みます。

2. 最もシンプルなカードコンポーネントを作る

まずは、とても基本的なカードコンポーネントを作ってみましょう。この段階では、固定された文字を表示するだけで構いません。「部品として切り出す」感覚をつかむことが目的です。


import React from "react";

function Card() {
  return (
    <div className="card p-3">
      <h3>タイトル</h3>
      <p>ここに説明文が入ります。</p>
    </div>
  );
}

export default Card;

（画面にタイトルと説明文が入ったシンプルなカードが表示されます）

3. propsを使って汎用的なカードにする

次に、カードの中身を自由に変えられるようにします。 Reactでは、コンポーネントに値を渡す仕組みをpropsと呼びます。 propsは「部品に渡す材料」のようなもので、同じ型のカードでも内容だけ変えられます。


import React from "react";

function Card(props) {
  return (
    <div className="card p-3">
      <h3>{props.title}</h3>
      <p>{props.text}</p>
    </div>
  );
}

export default Card;

このようにすると、タイトルや文章を外から指定できます。これが「汎用的な設計」の第一歩です。

4. 親コンポーネントからカードを使う

作ったカードコンポーネントは、別のコンポーネントから呼び出して使います。これを親コンポーネントと呼びます。親からpropsを渡すことで、同じカードでも内容の違う表示ができます。


import React from "react";
import Card from "./Card";

function App() {
  return (
    <div>
      <Card title="商品A" text="これは商品Aの説明です。" />
      <Card title="商品B" text="こちらは商品Bの説明です。" />
    </div>
  );
}

export default App;

（内容の違うカードが縦に並んで表示されます）

5. 子要素を自由に入れられる設計にする

さらに柔軟なカードにするために、childrenという仕組みを使います。 childrenは、コンポーネントの中に挟んだ要素を、そのまま表示できる仕組みです。箱の中に自由な物を入れられるイメージです。


import React from "react";

function Card({ title, children }) {
  return (
    <div className="card p-3">
      <h3>{title}</h3>
      <div>{children}</div>
    </div>
  );
}

export default Card;

この形にすると、文章だけでなくボタンや画像もカードの中に入れられます。

6. childrenを使ったカードの使用例

childrenを使うと、カードの使い道が一気に広がります。初心者のうちは少し難しく感じるかもしれませんが、「囲んだ中身がそのまま表示される」と考えると理解しやすくなります。


import React from "react";
import Card from "./Card";

function App() {
  return (
    <Card title="お知らせ">
      <p>本日はシステムメンテナンスがあります。</p>
      <button>詳細を見る</button>
    </Card>
  );
}

export default App;

（カードの中に文章とボタンが表示されます）