先生と生徒の会話形式で理解しよう

生徒

「Reactって小さな部品を作るのはわかるんですけど、それを組み合わせてページを作るにはどうしたらいいんですか？」

先生

「Reactのコンポーネントはまさに積み木のようなものです。小さなコンポーネントを組み合わせれば、大きなページ全体を作ることができるんですよ。」

生徒

「積み木みたいに？具体的にはどう組み立てるんですか？」

先生

「では、実際にReactでコンポーネントを組み合わせてページを作る方法を見ていきましょう！」

1. Reactコンポーネントを組み合わせる考え方

Reactの基本は「コンポーネント」です。コンポーネントとは、画面の一部を部品化したものです。たとえば「ヘッダー」「フッター」「サイドバー」「メインの本文」など、それぞれを1つの部品（コンポーネント）として作成します。

初心者の方にわかりやすいように例えると、コンポーネントは「お弁当の具材」のようなものです。卵焼きやハンバーグを個別に用意して、それをお弁当箱に詰めると1つのランチになります。Reactでも同じで、小さな部品を組み合わせて1つのページを完成させます。

2. コンポーネントを分割するメリット

Reactでページを作るとき、最初から大きな1つのコンポーネントに全部書いてしまうこともできますが、それだとコードが読みにくく管理が大変になります。

コンポーネントを分割することで、次のようなメリットがあります。

再利用できる（同じヘッダーやフッターを別ページでも使える）
管理しやすい（1つのファイルに全部書かず、部品ごとに分けられる）
見やすい（役割ごとに整理されるので初心者でも理解しやすい）

3. 基本的なページ構成の例

まずは「ヘッダー」「メイン」「フッター」を別々のコンポーネントとして作り、それをAppコンポーネントで組み合わせてページを作る例を見てみましょう。


import React from "react";

function Header() {
  return <header><h1>サイトのタイトル</h1></header>;
}

function MainContent() {
  return <main><p>ここがメインの内容です。</p></main>;
}

function Footer() {
  return <footer><p>© 2025 サンプルサイト</p></footer>;
}

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

export default App;

このように小さなコンポーネントを呼び出して配置することで、ページ全体を組み立てることができます。

4. propsを使って柔軟に組み合わせる

コンポーネントをさらに便利にするには、propsという仕組みを使います。propsとは、コンポーネントに外から値を渡せる仕組みのことです。たとえば「ユーザー名を表示するコンポーネント」を作って、ページごとに違う名前を渡せるようにできます。


function Greeting(props) {
  return <h2>こんにちは、{props.name}さん！</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting name="花子" />
    </div>
  );
}

（画面に「こんにちは、太郎さん！」「こんにちは、花子さん！」と表示されます）

このようにpropsを使うと、同じコンポーネントを繰り返し使っても表示内容を変えられるので、ページ作りがとても柔軟になります。

5. ページ全体を組み立てるイメージ

実際のWebページは「ヘッダー」「サイドバー」「メインコンテンツ」「フッター」など複数の部分で構成されます。Reactでは、それぞれをコンポーネントとして作ってAppに組み込めば、1つのページとして完成します。

例えるなら、家を建てるときに「屋根」「壁」「窓」「ドア」などをそれぞれ部品として用意して、最終的に組み合わせて家を完成させるようなものです。Reactのコンポーネントも同じで、部品を組み合わせることでページ全体を作ります。

6. 初心者が意識すべきポイント

Reactでコンポーネントを組み合わせてページを作るときに、初心者が意識すべきポイントをまとめておきます。

部品ごとにコンポーネントを分ける（大きな1つに全部書かない）
propsを活用して柔軟にデータを渡す
ページ全体の構造を意識して組み合わせる

これらを意識するだけで、Reactのコンポーネントを組み合わせてページを作る力がぐんと伸びます。初心者でも安心して取り組めるので、ぜひ実際に試してみてください。

まとめ

Reactのコンポーネントを組み合わせてページを構築する考え方は、初心者にとって理解しやすく、実際のWeb制作でも応用しやすい重要な基礎です。今回の記事では、ヘッダーやメイン、フッターのような部品をそれぞれ独立したコンポーネントとして作り、それらをAppコンポーネントで呼び出して全体を構成する具体的な方法を確認しました。こうした構造的な設計は、複雑なページを作る際にも役立ち、「再利用しやすい」「管理がしやすい」「役割が明確」といったメリットを自然に生み出します。特に、部品ごとにファイルを分けて整理することで、初心者でも理解しやすい整った構成になります。

また、propsを用いることで「同じコンポーネントを使い回しながら内容だけを変える」という柔軟な仕組みも学びました。たとえばユーザー名を表示するコンポーネントを作成して、さまざまなページで異なる名前を表示させるなど、実際のWebアプリ開発でもよく利用される考え方です。こうしたコンポーネント間のデータ受け渡しがスムーズになることで、全体の開発効率も格段に向上します。

ページ全体を組み立てる際には、家を建てるイメージのように「屋根」「壁」「窓」「ドア」を順に組み合わせて形にしていく流れと同じ発想が重要です。Reactでは、その一つひとつを部品として扱い、Appコンポーネントで最終的に組み合わせることで全体の構造を完成させます。大きなページを最初から一気に作るのではなく、細かい要素に分けて積み上げていくことこそがReactの真価であり、初心者にとっても習得しやすいポイントです。

特に初心者は、コンポーネント単位で整理された構造に慣れることで、エラーの原因を追いやすくなり、見通しのよいコードを書く習慣も身につきます。さらに、React開発ではページ構成を考えることが大切で、ヘッダー、サイドバー、メインコンテンツ、フッターといった全体の骨組みを理解し、それぞれをどう配置するかを意識することが、完成度の高いページ作りへつながります。

サンプルプログラムの振り返り

ここでは記事内で扱った内容を振り返りながら、Reactの構造を再確認できるシンプルなサンプルプログラムを示します。Reactでは部品となるコンポーネントを小さく分け、ページ全体の構成を見やすく整理することが重要です。


function Layout(props) {
  return (
    <div>
      <Header />
      <main className="content">{props.children}</main>
      <Footer />
    </div>
  );
}

function App() {
  return (
    <Layout>
      <h2>ようこそReactページへ</h2>
      <p>この記事ではReactコンポーネントの組み立て方を学びました。</p>
    </Layout>
  );
}

この例では、Layoutコンポーネントの中にヘッダーやフッターを組み込み、その中にページごとの内容をprops.childrenとして挿入しています。こうすることで、ページ共通部分とページ固有の内容を分けて管理でき、規模が大きくなったときにも非常に見通しのよい設計になります。

先生と生徒の振り返り会話

生徒「Reactのページって、コンポーネントを積み木みたいに組み合わせると作りやすいんですね！」

先生「その通りです。例えばヘッダーやフッターのような共通部分は一度作るだけで何度も使えますよ。」

生徒「propsを使えば、中身だけ変えて再利用できるっていうのも便利でした！」

先生「柔軟にページを作りたいときにとても役立ちます。データをどう渡すかを考えると、もっと複雑な構成も作れるようになりますよ。」

生徒「家を作るみたいに、小さな部品を集めてページ全体にしていくイメージもわかりやすかったです！」

先生「コンポーネントを使いこなせればReact開発がぐっと楽になります。今回学んだ構成の考え方を実際の制作でも試してみてくださいね。」