コンポーネントはReactアプリケーションの構成要素であり、複雑なユーザーインターフェースを小さく管理しやすい単位に分割することで、大規模なアプリの開発や保守を容易にしてくれます。

コンポーネントの種類

Reactには主に以下の2種類のコンポーネントがあります：

関数型コンポーネント（Functional Components）
クラスベースコンポーネント（Class-based Components）

現在のReactでは、関数型コンポーネントが主流です。本記事でもすべて関数型の例を用いています。

コンポーネントの基本的な考え方

コンポーネントは、UIを記述する要素を返すJavaScript関数のようなものです。このUIは、JSXというJavaScriptの拡張構文で表現されます。JSXはHTMLに似ていますが、より宣言的な記述が可能です。

コンポーネントの例

function Greeting() {
  const name = "John";
  {/* 結果：Hello John */}
  return <h1 className="title">Hello {name}</h1>;
}

この例では、Greeting というコンポーネントを定義しています。h1タグの中の {} はJavaScriptの式を埋め込むために使われており、name 変数の値が表示されます。

classではなく className を使っているのは、classがJavaScriptの予約語だからです。

また、JSX内のコメントは {/* コメント */} の形式で書く必要があります。

コンポーネント名は大文字で始める理由

Reactでは、大文字で始まる名前を「カスタムコンポーネント」として認識します。一方で、小文字で始まるタグ（例：<div> や <span>）はHTMLの標準要素として扱われます。この区別によって、ReactはHTMLタグと開発者が定義したコンポーネントを区別します。

コンポーネントの使い方

Greeting コンポーネントを使用するには、次のように記述します：

<Greeting />

<Greeting /> とスラッシュで閉じているのは、JSXではすべてのタグが明示的に閉じられている必要があるためです。子要素がないコンポーネントやタグでも、/> が必要です。

複数要素の返却とFragmentの使い方

以下のように複数の要素を返そうとすると、エラーになります：

function Greeting() {
  const name = "John";
  return <h1>Hello {name}</h1>
  <p>Nice to meet you.</p>
}

エラーメッセージ：

Adjacent JSX elements must be wrapped in an enclosing tag
（隣接するJSX要素は囲むタグでラップする必要があります）

このエラーを解消するには、<div>などの親要素で囲むか、React Fragmentを使います。

import { Fragment } from 'react';

function Greeting() {
  const name = "John";
  return (
    <Fragment>
      <h1>Hello {name}</h1>
      <p>Nice to meet you.</p>
    </Fragment>
  );
}

省略記法として、空のタグ <> と </> を使うこともできます：

function Greeting() {
  const name = "John";
  return (
    <>
      <h1>Hello {name}</h1>
      <p>Nice to meet you.</p>
    </>
  );
}

まとめ

Reactコンポーネントは、UIを小さな部品に分割して再利用可能にするための仕組みです。JSXを使って見た目を定義し、propsやstateによって動的な振る舞いを実現します。現代のReactでは関数型コンポーネントが主流であり、JSXと組み合わせることで直感的かつ強力なUI開発が可能になります。