コンポーネントとは

コンポーネントとは、UI（ユーザーインターフェース）を構成する再利用可能な部品のことです。ボタン、フォーム、カード、ページ全体など、あらゆるものがコンポーネントになります。

🏠 家に例えたコンポーネントの考え方

💡 家とコンポーネントの対応関係

🏠 家全体:Webアプリケーション全体（例: ECサイト、ブログなど）
🚪 ドア:ボタンコンポーネント（同じデザインのボタンを何度でも使える）
🪟 窓:カードコンポーネント（商品カード、記事カードなど）
🧱 壁:レイアウトコンポーネント（コンテナ、グリッドなど）
🏡 屋根:ヘッダーコンポーネント（ページの上部）

✅ コンポーネントのメリット

再利用性: 同じドアや窓の設計図を何度でも使えるように、コンポーネントも何度でも使えます
保守性: ドアのデザインを変えたい時、設計図を1つ変更すれば、すべてのドアに反映されます
分割統治: 家を小さな部品に分けて考えることで、複雑なアプリも管理しやすくなります
独立性: 各部品（コンポーネント）は独立しているため、他の部分に影響を与えずに変更できます

🔄 実際の例

ECサイトを作る場合、商品カードコンポーネントを1つ作れば、それを100個の商品に対して使い回せます。カードのデザインを変更したい時も、コンポーネントを1つ修正するだけで、すべての商品カードに反映されます。

💡 コンポーネントの例

ボタンコンポーネント
入力フォームコンポーネント
商品カードコンポーネント
ヘッダーコンポーネント
フッターコンポーネント

コンポーネントを使うことで、同じコードを何度も書く必要がなくなり、コードの再利用性と保守性が向上します。

関数コンポーネントの基本

関数コンポーネントは、JavaScriptの関数を使ってコンポーネントを定義する方法です。現在のReactでは、最も一般的なコンポーネントの書き方です。

📝 基本的な関数コンポーネント

const Welcome = () => {
  return <h1>ようこそ！</h1>;
};

これは「Welcome」という名前のコンポーネントです。JSXを返すことで、UI要素を表示します。

✅ ポイント

コンポーネント名は大文字で始める（Welcome）
アロー関数またはfunctionキーワードで定義できる
JSXを返す必要がある
1つのコンポーネントには1つの最上位要素を返す

🏠 重要なルール: 1つのコンポーネントには1つの最上位要素を返す

コンポーネントが複数の要素を返す場合は、それらを必ず1つの親要素（通常はdiv）で囲む必要があります。これは、家に例えると「1つの家には1つの入口（玄関）が必要」というルールに似ています。

❌ 間違った例（エラーになります）

const UserProfile = () => {
  return (
    <h2>山田太郎</h2>
    <p>年齢: 25歳</p>
    <p>職業: エンジニア</p>
  );
};

⚠️ このコードは動作しません！

エラーメッセージ: "Adjacent JSX elements must be wrapped in an enclosing tag" （隣接するJSX要素は、囲むタグで包む必要があります）

🏠 例え:家に複数の入口（玄関）があるのは不自然です。1つの家には1つの入口が必要です。

✅ 正しい例（動作します）

const UserProfile = () => {
  return (
    <div>
      <h2>山田太郎</h2>
      <p>年齢: 25歳</p>
      <p>職業: エンジニア</p>
    </div>
  );
};

✅ このコードは正しく動作します

• すべての要素が1つのdivで囲まれています

• divが「最上位要素」として機能しています

• その中に複数の子要素（h2、pタグ）を含められます

🏠 例え:家の入口（div）は1つで、その中に複数の部屋（h2、pタグ）がある構造です。

📊 構造の図解

❌ 間違った構造（複数の最上位要素）:

<h2> ← 最上位要素1

<p> ← 最上位要素2（エラー！）

<p> ← 最上位要素3（エラー！）

✅ 正しい構造（1つの最上位要素）:

<div> ← 最上位要素（OK！）

<h2> ← 子要素1

<p> ← 子要素2

<p> ← 子要素3

</div>

💡 なぜこのルールがあるのか？

Reactの仕様: Reactは、コンポーネントが1つの要素を返すことを前提に設計されています。複数の要素を返すと、Reactがどのようにレンダリングすべきか判断できません。
パフォーマンス: 1つのルート要素があることで、Reactは変更を効率的に検出できます。
明確性: コードの構造が明確になり、どの要素がどこに配置されるかが分かりやすくなります。

コンポーネントの使い方

コンポーネントを定義したら、HTMLタグのように使うことができます。

📝 コンポーネントを使用する

// コンポーネントの定義
const Welcome = () => {
  return <h1>ようこそ！</h1>;
};

// コンポーネントの使用
const App = () => {
  return (
    <div>
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  );
};

同じコンポーネントを何度でも使えます。ここでは「Welcome」コンポーネントを3回使っています。

表示結果：

ようこそ！

より複雑なコンポーネント

コンポーネントの中に複数の要素を含めることもできます。ただし、複数の要素を返す場合は、divタグなどで囲む必要があります。

📝 複数の要素を含むコンポーネント

const UserProfile = () => {
  return (
    <div>
      <h2>山田太郎</h2>
      <p>年齢: 25歳</p>
      <p>職業: エンジニア</p>
    </div>
  );
};

複数の要素を返す場合は、必ず1つの親要素（ここではdiv）で囲む必要があります。

表示結果：

山田太郎

年齢: 25歳

職業: エンジニア

コンポーネントのネスト

コンポーネントの中に、別のコンポーネントを入れることもできます。これにより、大きなコンポーネントを小さなコンポーネントに分解できます。

📝 コンポーネントをネストする

// 小さなコンポーネント
const Header = () => {
  return <header>ヘッダー</header>;
};

const Footer = () => {
  return <footer>フッター</footer>;
};

// 大きなコンポーネント
const App = () => {
  return (
    <div>
      <Header />
      <main>メインコンテンツ</main>
      <Footer />
    </div>
  );
};

このように、小さなコンポーネントを組み合わせて、大きなアプリケーションを作ることができます。

📚 例題

実際にコンポーネントを作成して、使い方を理解しましょう。

例題1: ボタンコンポーネント

「クリック」というテキストを表示するボタンコンポーネントを作成してください。コンポーネント名は「Button」にしてください。

const Button = () => {
  return <button>クリック</button>;
};

💡 実際の表示結果:

このコードを実行すると、上のようなボタンが表示されます。ボタンをクリックしてみてください！（現在は機能はついていませんが、コンポーネントとして正しく表示されています）

例題2: カードコンポーネント

タイトルと説明文を含むカードコンポーネントを作成してください。コンポーネント名は「Card」にしてください。

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

💡 実際の表示結果:

タイトル

説明文がここに入ります

このコードを実行すると、上のようなカードが表示されます。カードコンポーネントは、情報を整理して見やすく表示するのに便利です。

例題3: コンポーネントを組み合わせる

Cardコンポーネントを3つ使って、商品リストを表示するコンポーネントを作成してください。

const Card = () => {
  return (
    <div className="card">
      <h3>商品名</h3>
      <p>商品の説明</p>
    </div>
  );
};

const ProductList = () => {
  return (
    <div>
      <Card />
      <Card />
      <Card />
    </div>
  );
};

💡 実際の表示結果:

商品名

商品の説明

商品名

商品の説明

商品名

商品の説明

このコードを実行すると、上のように3つのカードが並んで表示されます。同じCardコンポーネントを3回使うことで、効率的に商品リストを作成できました！

🎯 ポイント

この例では、Cardコンポーネントを1つ作って、それを3回使っています。これがコンポーネントの「再利用性」です。実際のECサイトでは、商品データに基づいて動的にカードを生成します。

まとめ

コンポーネントは、UIを構成する再利用可能な部品です。

関数コンポーネントは、JavaScriptの関数を使って定義します。

コンポーネントを組み合わせることで、大きなアプリケーションを構築できます。

コンポーネントを使うことで、コードの再利用性と保守性が向上します。

← 前のレッスン: JSXの基礎レッスン一覧に戻る次のレッスン: propsの使い方 →

コンポーネントの作成

コンポーネントとは

🏠 家に例えたコンポーネントの考え方

💡 家とコンポーネントの対応関係

✅ コンポーネントのメリット

🔄 実際の例

関数コンポーネントの基本

🏠 重要なルール: 1つのコンポーネントには1つの最上位要素を返す

コンポーネントの使い方

ようこそ！

ようこそ！

ようこそ！

より複雑なコンポーネント

山田太郎

コンポーネントのネスト

📚 例題

タイトル

商品名

商品名

商品名

まとめ