React コンポーネントの基礎｜関数コンポーネントの作成と分割の考え方

この記事でわかること

コンポーネントとは何か
なぜコンポーネントに分けるのか
関数コンポーネントの書き方・命名規則
適切な粒度での分割判断とよくある間違い

「Reactのコンポーネントって結局何なの？なんでわざわざ関数でHTMLを書くの？」

React コンポーネントの基礎を押さえることで、保守しやすく再利用可能なUI設計ができるようになります。

HTMLファイルをそのまま書いてきた方にとって、Reactのコンポーネントという考え方は少し不思議に感じるかもしれません。でも、実はコンポーネントを使うことで、コードの再利用性が高まり、メンテナンスもしやすくなるんです。

今回は、Reactの核となる「関数コンポーネント」の基礎を、実践的なコード例を交えながら解説していきます。この記事を読めば、コンポーネントの考え方が理解でき、モダンなReactアプリケーションの開発への第一歩を踏み出せるはずです。

コンポーネントは「UIを部品に分けて、組み立て直す」考え方です。HTMLを1枚で書くより、ボタン・カード・ヘッダーと部品にすると、直すのも使い回すのもラクになりますよ。

記事を書いている人

R（アール）

Web制作の現場で17年（現役進行中）。精密栄養カウンセラー。

個人開発をアプリ6本並行しながら、AIと「作る・届ける」を実験しています。

うまくいったことも、月収2,000円みたいな冴えない数字も、隠さず公開中。

教える人ではなく、少し先で転んで戻ってきた人として、あなたと同じ目線で現在地を観測していけたらと思います。

AIと「作る・届ける」の実験は、週1でメルマガにも書いています。→ のぞいてみる（限定特典つき無料）

Reactのコンポーネント基礎：関数コンポーネントを理解しよう
- コンポーネントとは何か
- なぜコンポーネントを使うのか
関数コンポーネントの書き方
- 実践的なコンポーネントの例
Reactコンポーネントのよくある間違いと解決方法
まとめ
あわせて読みたい
- Reactの関連記事
Git/Claude Code 使い込んでる人ほど、止まりがちです。

Reactのコンポーネント基礎：関数コンポーネントを理解しよう

「Reactのコンポーネントって結局何なの？なんでわざわざ関数でHTMLを書くの？」

コンポーネントとは何か

コンポーネントとは、UIの「部品」です。たとえば、Webサイトのヘッダー、ナビゲーションメニュー、記事のカード、ボタンなど、画面を構成する要素をそれぞれ独立した部品として作ることができます。

従来のHTMLでは、以下のようにすべてを1つのファイルに書いていました：

HTML

<header>
  <h1>私のブログ</h1>
  <nav>
    <a href="/">ホーム</a>
    <a href="/about">about</a>
  </nav>
</header>
<main>
  <article>
    <h2>記事タイトル</h2>
    <p>記事の内容...</p>
  </article>
</main>

Reactでは、これらを機能ごとにコンポーネントとして分割できます：

jsx

function Header() {
  return (
    <header>
      <h1>私のブログ</h1>
      <Nav />
    </header>
  );
}

function Nav() {
  return (
    <nav>
      <a href="/">ホーム</a>
      <a href="/about">about</a>
    </nav>
  );
}

function Article() {
  return (
    <article>
      <h2>記事タイトル</h2>
      <p>記事の内容...</p>
    </article>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <Article />
      </main>
    </div>
  );
}

なぜコンポーネントを使うのか

コンポーネントには、以下のような大きなメリットがあります：

再利用性 同じデザインのボタンやカードを、コピー&ペーストせずに何度でも使える
メンテナンス性 デザインの変更が必要な場合、コンポーネントのコードを1箇所変更するだけでOK
責務の分離 それぞれのコンポーネントが特定の役割だけを持つため、コードが整理しやすい

関数コンポーネントの書き方

基本的な関数コンポーネントは、以下のような構造になります：

jsx

function Button() {
  return (
    <button className="button">
      クリック
    </button>
  );
}

export default Button;

ここで押さえたいのは：

関数名は必ず大文字で始める（パスカルケース）
JSXを返す際は必ずreturnを書く
JSXは1つの親要素で囲む
他のファイルで使うためにexportする

アロー関数を使って書くこともできます：

jsx

const Button = () => {
  return (
    <button className="button">
      クリック
    </button>
  );
};

export default Button;

実践的なコンポーネントの例

では、よく使うコンポーネントの例を見ていきましょう。

汎用的なボタンコンポーネント

jsx

function Button() {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded">
      クリック
    </button>
  );
}

カード型コンポーネント

jsx

function Card() {
  return (
    <div className="border rounded-lg p-4 shadow">
      <h3 className="text-xl font-bold">タイトル</h3>
      <p className="mt-2">カードの内容がここに入ります</p>
    </div>
  );
}

Reactコンポーネントのよくある間違いと解決方法

とりさん

コンポーネントが表示されない…と思ったら、名前が小文字でした。なんで大文字じゃないとダメなんですか？

Reactは「小文字＝HTMLタグ、大文字＝自作コンポーネント」で見分けているんです。button は本物のbutton要素、Button はあなたの部品。だから先頭は必ず大文字。表示されない時は、まずここを疑うとだいたい解決しますよ。

1. コンポーネント名が小文字から始まっている

jsx

// ❌ 誤った書き方
function button() {
  return <button>クリック</button>;
}

// ✅ 正しい書き方
function Button() {
  return <button>クリック</button>;
}

2. returnを忘れている

jsx

// ❌ 誤った書き方
function Button() {
  <button>クリック</button>;
}

// ✅ 正しい書き方
function Button() {
  return <button>クリック</button>;
}

3. JSXのルート要素がない

jsx

// ❌ 誤った書き方
function Header() {
  return (
    <h1>タイトル</h1>
    <p>説明文</p>
  );
}

// ✅ 正しい書き方
function Header() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>説明文</p>
    </div>
  );
}

まとめ

関数コンポーネントは、Reactアプリケーションを構成する基本的な部品です。以下のポイントを押さえておきましょう：

コンポーネントは再利用可能なUI部品
関数名は必ず大文字で始める
JSXを返す際はreturnを忘れずに
複数の要素は必ず1つの親要素で囲む
他のファイルで使うためにexportする

次回は、これらのコンポーネントにデータを渡す「props」について学んでいきます。

コンポーネントの真価を発揮する「props」について学んでいきます。propsを使うことで、同じコンポーネントを異なる内容で表示できるようになります。例えば、先ほど作成したButtonコンポーネントに異なるテキストやスタイルを適用する方法を解説していきますので、お楽しみに！

そして、コンポーネントを作れること自体がゴールではありません。大事なのは、UIを書きながら「どこで1つの部品が大きくなりすぎているか」を観測することです。1つのコンポーネントに何でも詰め込んでいないか、同じJSXを何度も書いていないか——その”重さ”や”繰り返し”が、分割すべき場所のサインです。最初から完璧に分けようとするより、書いてから”太った所”を観測して切り出すほうが、自然な設計になります。

この記事は「AI時代のReact入門」シリーズの一部です。
→ シリーズ全体を見る