コンポーネントは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開発が可能になります。