AI時代のReact入門第6回：コンポーネントの基礎（関数コンポーネント）

「Reactのコンポーネントって結局何なの？なんでわざわざ関数でHTMLを書くの？」

HTMLファイルをそのまま書いてきた方にとって、Reactのコンポーネントという考え方は少し不思議に感じるかもしれません。でも、実はコンポーネントを使うことで、コードの再利用性が高まり、メンテナンスもしやすくなるんです。

今回は、Reactの核となる「関数コンポーネント」の基礎を、実践的なコード例を交えながら解説していきます。この記事を読めば、コンポーネントの考え方が理解でき、モダンなReactアプリケーションの開発への第一歩を踏み出せるはずです。

Reactのコンポーネント基礎：関数コンポーネントを理解しよう
- コンポーネントとは何か
- なぜコンポーネントを使うのか
関数コンポーネントの書き方
- 実践的なコンポーネントの例
よくある間違いと解決方法
まとめ

Reactのコンポーネント基礎：関数コンポーネントを理解しよう

「Reactのコンポーネントって結局何なの？なんでわざわざ関数でHTMLを書くの？」

コンポーネントとは何か

コンポーネントとは、UIの「部品」です。たとえば、Webサイトのヘッダー、ナビゲーションメニュー、記事のカード、ボタンなど、画面を構成する要素をそれぞれ独立した部品として作ることができます。

従来のHTMLでは、以下のようにすべてを1つのファイルに書いていました：

HTML

<header>
  <h1>私のブログ</h1>
  <nav>
    <a href="/">ホーム</a>
    <a href="/about">about</a>
  </nav>
</header>
<main>
  <article>
    <h2>記事タイトル</h2>
    <p>記事の内容...</p>
  </article>
</main>

Reactでは、これらを機能ごとにコンポーネントとして分割できます：

jsx

function Header() {
  return (
    <header>
      <h1>私のブログ</h1>
      <Nav />
    </header>
  );
}

function Nav() {
  return (
    <nav>
      <a href="/">ホーム</a>
      <a href="/about">about</a>
    </nav>
  );
}

function Article() {
  return (
    <article>
      <h2>記事タイトル</h2>
      <p>記事の内容...</p>
    </article>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <Article />
      </main>
    </div>
  );
}

なぜコンポーネントを使うのか

コンポーネントには、以下のような大きなメリットがあります：

再利用性 同じデザインのボタンやカードを、コピー&ペーストせずに何度でも使える
メンテナンス性 デザインの変更が必要な場合、コンポーネントのコードを1箇所変更するだけでOK
責務の分離 それぞれのコンポーネントが特定の役割だけを持つため、コードが整理しやすい

関数コンポーネントの書き方

基本的な関数コンポーネントは、以下のような構造になります：

jsx

function Button() {
  return (
    <button className="button">
      クリック
    </button>
  );
}

export default Button;

重要なポイントは：

関数名は必ず大文字で始める（パスカルケース）
JSXを返す際は必ずreturnを書く
JSXは1つの親要素で囲む
他のファイルで使うためにexportする

アロー関数を使って書くこともできます：

jsx

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

export default Button;

実践的なコンポーネントの例

では、よく使うコンポーネントの例を見ていきましょう。

汎用的なボタンコンポーネント

jsx

function Button() {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded">
      クリック
    </button>
  );
}

カード型コンポーネント

jsx

function Card() {
  return (
    <div className="border rounded-lg p-4 shadow">
      <h3 className="text-xl font-bold">タイトル</h3>
      <p className="mt-2">カードの内容がここに入ります</p>
    </div>
  );
}

よくある間違いと解決方法

1. コンポーネント名が小文字から始まっている

jsx

// ❌ 誤った書き方
function button() {
  return <button>クリック</button>;
}

// ✅ 正しい書き方
function Button() {
  return <button>クリック</button>;
}

2. returnを忘れている

jsx

// ❌ 誤った書き方
function Button() {
  <button>クリック</button>;
}

// ✅ 正しい書き方
function Button() {
  return <button>クリック</button>;
}

3. JSXのルート要素がない

jsx

// ❌ 誤った書き方
function Header() {
  return (
    <h1>タイトル</h1>
    <p>説明文</p>
  );
}

// ✅ 正しい書き方
function Header() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>説明文</p>
    </div>
  );
}