はじめに
この記事では、Reactの基本的な概念と特徴、そして最も重要な「コンポーネント」という考え方について解説します。特にコンポーネント設計については視覚的な図解を用いて、抽象的な概念を具体的にイメージできるよう工夫しました。これからReactを学ぼうとしている方や、基本概念を再確認したい方にとってお役に立てれば幸いです。
Reactとは
Reactは、Meta社が開発したJavaScriptライブラリで、ユーザーインターフェイス（UI）を構築するためのライブラリ(❌フレームワーク)です。
概要
Reactは2013年にオープンソースとして公開され、コンポーネントと呼ばれる再利用可能なUIパーツを組み合わせてアプリケーションを構築する考え方に基づいています。Reactの主な目的は、データの変更に応じて効率的にUIを更新することです。
Reactは完全なフレームワークではなく、UIレイヤーに特化したライブラリです。そのため、ルーティングやHTTPリクエストなどの機能は、React Router、Axiosなどの追加ライブラリと組み合わせて使用することが一般的です。
特徴
-
コンポーネントベース
Reactの最も基本的な特徴は、UIをコンポーネントと呼ばれる独立した再利用可能なパーツに分割することです。これにより、大規模なアプリケーションでも管理しやすく、コードの再利用性が高まります。各コンポーネントは独自のロジックと表示を持ち、他のコンポーネントと組み合わせて複雑なUIを構築できます。 -
仮想DOM（Virtual DOM）
Reactは仮想DOMを使用して効率的なレンダリングを実現します。実際のDOMを直接操作する代わりに、Reactは仮想DOMと呼ばれるメモリ上のDOMのコピーを作成します。データが変更されると、Reactは仮想DOMを更新し、前の状態と比較して、実際のDOMで変更が必要な部分だけを更新します。これにより、パフォーマンスが向上し、効率的なレンダリングが可能になります。DOM(Document Object Model)
HTMLなどの文書をツリー構造で表現し、JavaScript等からその文書を操作できるようにする仕組み。 -
単方位データフロー
Reactは親コンポーネントから子コンポーネントへの単方向データフローを採用しています。これにより、データの流れが予測しやすくなり、アプリケーションの状態管理が容易になります。 -
JSX
ReactではJSXという構文拡張を使用します。JSXはHTMLに似た構文でJavaScriptの中にマークアップを書くことができ、コンポーネントの見た目と機能を一つのファイルで表現できます。 -
宣言的UI
Reactは宣言的なアプローチを採用しています。開発者はUIがどのように見えるべきかを記述し、状態が変わったときにReactが自動的にUIを更新します。命令的なアプローチ（DOMを直接操作する）と比較して、コードが読みやすく、デバッグしやすくなります。
コンポーネントとは
直訳すると"部品"。ページ上に表示させるまでに必要な処理などを一つのオブジェクトにまとめたものです。
以下の図は私の個人的解釈を図解したものです。
解説
【コンポーネントの作成】
図の左上と下部では、開発者が基本となるフルーツコンポーネントのテンプレートを作成し、それを利用して3つの異なるフルーツを表現しています：
- りんご（Apple）
- ぶどう（grape）
- オレンジ（orange）
各フルーツは同じ基本構造（フレーム内に画像と名前を表示）を持ちながら、異なるコンテンツを表示する再利用可能なコンポーネントとして設計されています。
// 基本となるフルーツコンポーネント
function Fruit({ name, imageSrc }) {
return (
<div className="fruit-frame">
<img
src={imageSrc}
alt={name}
/>
<p className="fruit-name">{name}</p>
</div>
);
}
// 基本コンポーネントを利用した各フルーツの定義
function Apple() {
return <Fruit name="Apple" imageSrc="apple.jpg" />;
}
function Grape() {
return <Fruit name="grape" imageSrc="grape.jpg" />;
}
function Orange() {
return <Fruit name="orange" imageSrc="orange.jpg" />;
}
【コンポーネントの組み合わせ】
図の右側の「Gallery{}（エクスポート先）」では、作成した3つの異なるフルーツコンポーネントが「Fruits」というセクションを形成しています。閲覧者（ユーザー）が表示されており、完成したUIとしてGalleryを見ています。
export default function Gallery() {
return (
<section>
<h1>Fruits</h1>
{/* 各フルーツコンポーネントを配置 */}
<div className="fruits-container">
<Apple />
<Grape />
<Orange />
</div>
</section>
);
}
【コンポーネント設計の実践的メリット】
-
開発の効率化：
似たような構造を持つ要素（フルーツ）でも、コンポーネントとして一度設計すれば、内容を変えて何度でも再利用できます。 -
メンテナンスの容易さ：
例えば、すべてのフルーツコンポーネントのスタイルを変更したい場合、基本コンポーネントの定義を1か所変更するだけで済みます。 -
チーム開発の促進：
異なる開発者が異なるコンポーネント（Appleを担当する人、Orangeを担当する人など）を並行して開発できます。 -
拡張性：
新しいフルーツ（例：Banana）を追加したい場合、既存のパターンに従って新しいコンポーネントを作成し、Galleryに追加するだけです。
まとめ
この記事では、Reactの基本概念と特徴、そしてReactの中核となる「コンポーネント」について解説しました。Reactは単なるJavaScriptライブラリではなく、UIを構築するための新しい考え方を提供しています。
コンポーネントベースの開発アプローチにより、開発者は再利用可能で管理しやすいUIパーツを作成し、それらを組み合わせて複雑なアプリケーションを構築できます。仮想DOMや単方向データフロー、JSXといった特徴は、効率的で予測可能なアプリケーション開発を可能にします。
Reactの「小さな部品を作って組み合わせる」という哲学は、現代のWeb開発において非常に効果的なアプローチです。この基本を押さえることで、あなたのReact開発スキルは大きく向上するはずです。ぜひ実際にコードを書いて、Reactの魅力を体験してみてください。