Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – Reactコンポーネントの基本

Next.js
スポンサーリンク

コンポーネントとは

「画面を小さな部品に分けて再利用する考え方」

コンポーネントは、ひと言でいうと「画面の部品」です。
もっと言うと、「ある見た目と振る舞いをひとつのまとまりとして名前をつけたもの」です。

例えば、よくあるWebページを思い浮かべてください。上にヘッダー、左にメニュー、真ん中に記事、下にフッターがあるようなページです。
これを React 的に見直すと、

ヘッダーというコンポーネント
メニューというコンポーネント
記事カードというコンポーネント
フッターというコンポーネント

といった感じで、画面を「部品」に分割して考えることができます。

この「部品」として切り出しておくと、同じデザインや同じ動きをいろいろなページで使い回せるようになります。
さらに、「ヘッダーをちょっと直したい」と思ったときに、ヘッダーコンポーネントだけを修正すれば、全ページに反映されます。

React では「コンポーネントを作る → 組み合わせる → 大きな画面になる」という流れが基本です。
大きいものを一気に書くのではなく、小さな部品を組み立てるイメージを持つと理解が進みます。

関数コンポーネント

Reactコンポーネントは「ただの関数」から始まる

React のコンポーネントは、今はほとんど「関数」で書きます。
これを「関数コンポーネント」と呼びます。

最低限のルールはとてもシンプルです。

名前を持つ JavaScript の関数であること
その関数が JSX を return で返すこと

たったこれだけです。

例えば、挨拶を表示するコンポーネントはこう書けます。

function Hello() {
  return <p>こんにちは！</p>;
}
JSX

この Hello 関数が、React コンポーネントです。
React はこの関数を呼び出して、<p>こんにちは！</p> という JSX を受け取り、それを画面に描画します。

Next.js の page.tsx にも、同じように関数コンポーネントを書きます。

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <p>ここが最初に表示される画面です。</p>
    </main>
  );
}
TSX

この場合、Page という関数コンポーネントが「トップページの中身」を表しています。

コンポーネント名は大文字から始める

関数コンポーネントの名前は、必ず大文字から始めます。
例えば Hello, UserCard, Header, Footer のような形です。

小文字で始めてしまうと、React はそれを「ただの HTML タグ」と勘違いしやすくなります。
<div> や <p> のようなタグは小文字なので、React が区別できるように「コンポーネント名は先頭を大文字にする」というルールになっています。

returnの意味

関数コンポーネントは「画面として何を描くか」を返している

関数コンポーネントの中で書く return は、とても重要な役割を持っています。
一言で言うと、「このコンポーネントが最終的に画面に描くもの」を React に渡しています。

例えば、次のコンポーネントを見てみます。

function Message() {
  const text = "Reactコンポーネントを勉強中です。";

  return (
    <section>
      <h2>メッセージ</h2>
      <p>{text}</p>
    </section>
  );
}
JSX

ここで行われていることを分解するとこうなります。

まず text という変数に文字列を入れる。
最後に return で、<section>... から </section> までの JSX を返す。

React はこの return の中身を受け取り、それをブラウザ上に描画します。
逆に言えば、「画面に何も出さないコンポーネント」はありえないので、必ず何かを return する必要があります。

return の中は「ひとつのかたまり」である必要がある

以前 JSX の話でも触れましたが、return の中で返す JSX は「親がひとつだけ」の構造でなければいけません。

例えば、これはエラーになります。

function Bad() {
  return (
    <h1>タイトル</h1>
    <p>本文</p>
  );
}
JSX

これを、何か一つの要素で包んであげると正しくなります。

function Good() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>本文</p>
    </div>
  );
}
JSX

もしくは、フラグメント <>...</> で包むこともできます。

return は「この関数は最終的にどんな UI を返しますか？」という問いに答える部分です。
ここに書いたものが、そのコンポーネントの「見た目」としてブラウザに表示されます。

コンポーネントを分ける理由

見た目を分けることで「コードが読みやすくなる」

最初は、何も考えずにひとつのコンポーネントに全部書きたくなります。
例えば、トップページ全部を Page の中に書いてしまう、という状態です。

しかし、画面が少し複雑になると、ひとつのコンポーネントの return がどんどん長くなり、100行、200行と増えていきます。
そうなると、どこに何が書いてあるのか分からなくなってしまいます。

そこで、「意味のあるまとまりごとにコンポーネントを分ける」という発想が役に立ちます。

例えばトップページを考えると、

ページ全体を包むレイアウト
プロフィールのカード
お知らせの一覧

といった単位でコンポーネントを分割できます。

このように分けておくと、Page の中身はとても読みやすくなります。

export default function Page() {
  return (
    <main>
      <ProfileCard />
      <NewsList />
    </main>
  );
}
JSX

詳細が見たくなったときだけ ProfileCard や NewsList のファイルを開けば良いので、全体像をつかみやすくなります。

同じものを何度も使えるようになる（再利用性）

コンポーネントを分けるもう一つの大きな理由は、「再利用できるようにするため」です。

例えば、デザインのそろったボタンをいろいろな画面で使いたいとします。
毎回 HTML と CSS を手書きでコピペすると、修正が面倒ですし、どこかでスタイルがズレたりします。

そこで「ボタンコンポーネント」をひとつ作っておきます。

function PrimaryButton({ children, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor: "#2563eb",
        color: "white",
        padding: "8px 16px",
        borderRadius: "4px",
        border: "none",
        cursor: "pointer",
      }}
    >
      {children}
    </button>
  );
}
JSX

あとは、必要な場所でこのコンポーネントを呼び出すだけです。

function Page() {
  return (
    <main>
      <PrimaryButton onClick={() => alert("保存しました")}>
        保存
      </PrimaryButton>
      <PrimaryButton onClick={() => alert("キャンセルしました")}>
        キャンセル
      </PrimaryButton>
    </main>
  );
}
JSX

こうしておけば、「ボタンの色を変えたい」「フォントを変えたい」と思ったときに、PrimaryButton の中身を直すだけで、使っている全ての場所に自動的に反映されます。

これが「再利用性が高い」という状態です。
コンポーネントを上手に分けるほど、後からの変更や機能追加が楽になります。

ロジックも分けられて「考える範囲」が狭くなる

コンポーネントを分けると、「このコンポーネントが担当するのはこの役割だけ」と決めやすくなります。
例えば、

プロフィールカードは「ユーザー情報を表示すること」だけを担当する
ニュース一覧は「ニュースのリストを表示すること」だけを担当する

というように、「このコンポーネントは何をする人なのか」が明確になります。

結果として、そのコンポーネントのファイルを開いたときに、考えるべきことが少なくなります。
「このファイルの中では、プロフィールの表示のことだけ考えればいい」と分かるからです。

コードを書くときに、同時に考えることが少ないほど、バグも減り、修正もしやすくなります。
コンポーネント分割は、コードの見た目の問題だけでなく、「頭の中の負荷を下げる」ためにも重要なテクニックです。

小さな例で全体の流れをつかむ

最後に、シンプルなページを「コンポーネントを分けて書く」例を示します。
Next.js の app/page.tsx を想定したイメージです。

// app/page.tsx
function Header() {
  return (
    <header>
      <h1>Next.js × React 入門</h1>
    </header>
  );
}

function WelcomeMessage() {
  const name = "太郎";
  return <p>ようこそ、{name} さん！</p>;
}

function Footer() {
  return <footer>© 2025 My Site</footer>;
}

export default function Page() {
  return (
    <main>
      <Header />
      <WelcomeMessage />
      <Footer />
    </main>
  );
}
TSX

ここでやっていることをまとめると、

Header, WelcomeMessage, Footer という3つの関数コンポーネントを定義している。
各コンポーネントは return で、自分の担当部分の JSX を返している。
最後に Page コンポーネントの中で、それらを組み合わせて 1 つのページとして表示している。

このように、React の世界では、

小さなコンポーネントを書いて
それらを組み合わせて
大きな画面を作る

という流れで考えていきます。

この感覚がつかめてくると、「コードを書く」というより、「部品を設計して組み立てる」という感覚に近づいていきます。
次のステップとしては、自分で

ヘッダーコンポーネント
メインコンテンツコンポーネント
フッターコンポーネント

くらいを分けて、Page から組み合わせる練習をしてみると、コンポーネントの理解が一気に深まります。

スポンサーリンク
タイトルとURLをコピーしました