第4回：Reactコンポーネントの基本：UIを部品化して再利用する設計のコツ

前回：JSXとは？JavaScriptの中でHTMLを書く不思議なルールの正体では、JavaScriptの中にHTMLのような見た目を書く「JSX」の基本を学びました。

今回は、Reactの最も強力な特徴である**「コンポーネント」を攻略します。これを知ると、Webサイトを「1枚の大きなコード」ではなく、「レゴブロックのような部品の組み合わせ」**として作れるようになります。2026年のモダンな開発現場では欠かせない考え方です。

1. 「コンポーネント」とは何か？
1. コンポーネント化するメリット
2. コンポーネントを作る「2つのステップ」
3. 【実践】部品を作って並べてみよう
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の設計思想：コンポーネントは「小さく」作る
1. 今回のまとめ
2. 次回予告：部品に「データ」を渡して個性を出そう

1. 「コンポーネント」とは何か？

例えば、SNSのタイムラインを想像してください。投稿が100件あっても、その1つひとつの「投稿カード」の見た目や動き（いいねボタンなど）は同じですよね？

Reactでは、この「投稿カード」を**一つの部品（コンポーネント）**として定義します。一度作ってしまえば、あとは名前を呼び出すだけで何度でも使い回せるのです。

コンポーネント化するメリット

見やすい： コードが短く整理される。
直しやすい： 部品を1箇所修正すれば、使っている場所すべてが更新される。
共有しやすい： 他のプロジェクトでも同じ部品が使える。

2. コンポーネントを作る「2つのステップ」

コンポーネントを作る手順は非常にシンプルです。

定義する： function を作って、JSXを return する。
呼び出す： 別の場所で <名前 /> と書く。

ここで、第1回で少し触れた**「名前は大文字から始める」**というルールが重要になります。

3. 【実践】部品を作って並べてみよう

今回は「挨拶ボタン」という部品を作り、それを画面に3つ並べてみます。前回作成した環境の App.jsx を書き換えて動かしてみましょう。

App.jsx（最小構成版）

JavaScript

import React from 'react';

// 1. 部品（コンポーネント）を定義する
// 名前は必ず大文字（HelloButton）で始めます
function HelloButton() {
  return (
    <button onClick={() => alert("こんにちは！")}>
      挨拶するボタン
    </button>
  );
}

// 2. メインの画面（App）で部品を呼び出す
export default function App() {
  return (
    <div>
      <h1>コンポーネントの世界へようこそ</h1>
      <p>同じ部品を3回呼び出してみます：</p>
      
      {/* 自作した部品をHTMLタグのように使う */}
      <HelloButton />
      <HelloButton />
      <HelloButton />
      
      <p>※1つ修正すれば、3つすべての挙動が変わります。</p>
    </div>
  );
}

CodeSandboxでコンポーネントの動きを確認する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

関数の入れ子: JavaScriptでは関数の中に別の関数を書くこともできますが、Reactでは「部品（HelloButton）」と「画面全体（App）」を分けて定義するのが一般的です。
命令の再利用: 同じ関数を何度も実行しているだけなので、メモリ効率も良く、動作が安定します。

Reactのポイント

<HelloButton /> (自己完結タグ): 中身に文字を書かない場合は、末尾に / をつけることでスッキリ書けます。
大文字と小文字の区別: <div> や <button> はHTML標準のタグ。 <HelloButton> は私たちが作ったReact専用の部品。これを見分けるために、自作部品は大文字スタートにする必要があるのです。