Next.jsによるWebアプリケーション開発概論

【概要と到達目標】コンポーネントベース開発とは何か

第1節Next.js基礎：ReactコンポーネントとJSX・Propsの基本
Next.jsTailwind CSSアプリ開発開発Web開発

この節で学ぶこと

この節では、コンポーネントベース開発とは何かを、Next.js 学習の入口として整理します。

React の公式ドキュメントでは、React アプリはコンポーネントでできており、コンポーネントは UI の一部分で、独自の見た目とロジックを持てると説明されています。

また、React の学習導線でも「Your First Component」「Importing and Exporting Components」「Passing Props to a Component」など、コンポーネントを中心に基礎が組まれています。

この節の到達目標は4つです。

  1. コンポーネントが「画面を小さな部品に分けて作る考え方」だと説明できることです。
  2. React コンポーネントが JavaScript の関数として書けることを理解することです。
  3. Next.js ではその部品を app 配下のページやレイアウトの中で組み合わせて使うとイメージできることです。
  4. 次節以降で JSX、Props、イベント処理を学ぶ意味が見えることです。

React はコンポーネントのネストや props によるデータ受け渡しを前提に UI を組み立て、Next.js は App Router の pages と layouts で画面構造を組み立てます。

コンポーネントベース開発とは何か

画面を部品として考える開発方法

コンポーネントベース開発とは、1枚の画面を巨大なひとかたまりとして作るのではなく、見出し、ボタン、カード、プロフィール欄、一覧、フォームのような部品に分けて設計し、それらを組み合わせて UI を作る考え方です。

React の公式では、React アプリはコンポーネントでできており、コンポーネントは小さなボタンにも、大きなページ全体にもなり得ると説明されています。

この考え方が大切なのは、実際の Web アプリがたいてい繰り返しでできているからです。

たとえば EC サイトなら商品カード、ブログなら記事一覧、管理画面なら表や入力欄が何度も出てきます。

毎回ゼロから書くより、同じ形を部品として使い回せた方が速く、直しやすく、見た目もそろいやすくなります。

React の公式学習でも、コンポーネントはネストでき、親コンポーネントの中に子コンポーネントを配置して UI を構築すると説明されています。

料理やレゴに近い発想

初心者向けにたとえるなら、コンポーネントベース開発は「一軒家を1回で彫刻する」方法ではなく、「部屋、窓、ドア、机を先に部品として作り、あとで組み立てる」方法です。

React 公式も、コンポーネントは入れ子にできると説明しており、あるコンポーネントの中に別のコンポーネントを置いていく流れを基本として示しています。

ここで重要なのは、部品に分けること自体が目的ではないという点です。目的は、再利用しやすく、読みやすく、変更に強い UI を作ることです。

部品に分けるのは、そのための手段です。React の学習導線でも、コンポーネント、props、条件分岐、リスト、イベント、状態管理という順で、部品をどう賢く扱うかを積み上げていきます。

React におけるコンポーネントの意味

React コンポーネントは関数として書ける

React の公式では、React コンポーネントは JavaScript functions that return markup と説明されています。つまり、React コンポーネントの基本形は「関数である」ということです。

たとえば、最小のコンポーネントは次のように書けます。

function MyButton() {
  return <button>ボタンです</button>
}

このコードのポイントは、とても素朴です。

MyButton という名前の関数があり、その戻り値として JSX を返しています。React では、この戻り値の JSX が画面に表示される材料になります。React 公式も、関数コンポーネントがマークアップを返す例を最初の導入で示しています。

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

React 公式では、<MyButton /> のように大文字で始まるものが React コンポーネントであり、HTML タグは小文字で書くと説明されています。

これは見た目のルールのようでいて、React が「これは独自コンポーネントか、通常の HTML 要素か」を見分ける重要な手がかりです。

たとえば次の2つは意味が違います。

function MyButton() {
  return <button>送信</button>
}

export default function Page() {
  return (
    <div>
      <h1>お問い合わせ</h1>
      <MyButton />
    </div>
  )
}

button は HTML のボタン要素です。

一方 MyButton は、自分で作った部品です。React ではこの区別が大切で、コンポーネント名は大文字で始める必要があります。

1枚の画面はどう組み立てられるのか

親コンポーネントと子コンポーネント

コンポーネントベース開発では、あるコンポーネントの中に別のコンポーネントを置く、いわゆるネストが基本になります。React の公式では、宣言したコンポーネントを別のコンポーネントの中にネストできると説明しています。

たとえば、プロフィールカードを考えてみます。

function Avatar() {
  return <img src="/avatar.png" alt="プロフィール画像" />
}

function UserName() {
  return <h2>佐藤太郎</h2>
}

export default function ProfileCard() {
  return (
    <section>
      <Avatar />
      <UserName />
    </section>
  )
}

ここでは ProfileCard が親コンポーネントで、Avatar と UserName が子コンポーネントです。

この分け方により、「画像の見た目を変えたい」「名前の表示ルールを変えたい」となったときに、触る場所が分かりやすくなります。React 公式の考え方に沿えば、UI はこうした部品の木構造として捉えられます。

UI は木構造で考えると分かりやすい

React の学習導線には “Your UI as a Tree” という項目があり、UI を親子関係のあるツリーとして考える視点が含まれています。

つまり、コンポーネントベース開発は「部品の一覧」ではなく、「部品同士のつながり」を意識する開発でもあります。

たとえば、ブログ記事一覧ページなら、頭の中では次のような構造になります。

Page
├─ Header
├─ ArticleList
│  ├─ ArticleCard
│  ├─ ArticleCard
│  └─ ArticleCard
└─ Footer

このように木構造で考えると、「何を1つの部品にするか」「どこまでまとめるか」が見えやすくなります。これは React に限らず、コンポーネントベース開発の中核の見方です。React の公式導線とかなり相性がよい考え方です。

Next.js でコンポーネントベース開発を考える

Next.js はページもレイアウトも部品として扱える

Next.js の App Router では、page.tsx がページ、layout.tsx が共有レイアウトの役割を持ちます。公式ドキュメントでは、page はルートに固有の UI、layout は複数ルートで共有される UI と説明されています。

これは、Next.js が「画面全体」までコンポーネントの発想で組めることを意味します。

たとえば、layout.tsx に共通ヘッダーやフッターを置き、page.tsx にそのページ固有の内容を書く形です。これもコンポーネントベース開発の延長線上にあります。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>
        {children}
      </body>
    </html>
  )
}

この children は、各ページの中身が差し込まれる場所です。

今は細かい文法を完璧に理解しなくても大丈夫です。ここでつかんでほしいのは、Next.js ではページそのものも「大きな部品」として扱える、という感覚です。Next.js 公式の layouts and pages の説明とも一致します。

app 配下に画面の入口がある

Next.js の Project Structure では、app が App Router 用のトップレベルフォルダとして整理されています。そこに page、layout、loading、error などのファイル規約が配置されます。

つまり、第3章で学ぶ React コンポーネントは、前章までで見てきた Next.js の app 構造の中で実際に生きてきます。React の部品の考え方と、Next.js のページ構造がここでつながります。これが腹落ちすると、「React を学んでいるのか、Next.js を学んでいるのか分からない」という混乱がかなり減ります。

コンポーネントに分けると何がうれしいのか

再利用できる

React 公式では、同じマークアップを複数の場所で使いたいとき、コンポーネントとして分ける考え方が自然に示されています。

1回作った MyButton を別の場所でも使えるように、同じ UI パターンを何度も呼び出せます。

たとえば、商品カードが10件並ぶページでも、10回 HTML をコピペするのではなく、ProductCard を1つ作ってデータだけ変えて使い回す方が自然です。

この発想があると、UI の見た目を統一しやすくなり、修正も一箇所で済みやすくなります。React 公式の props や list rendering の流れは、まさにこの再利用のためにあります。

修正しやすい

部品に分かれていると、どこを直せばよいかが見えやすくなります。

たとえばボタンの色を変えたいなら Button コンポーネント、プロフィール画像の形を変えたいなら Avatar コンポーネントを直せばよい、というように責任範囲が分かれます。React 公式でも、コンポーネントはそれぞれ独立したロジックと見た目を持てると説明されています。

チームで分担しやすい

これは実務的なメリットです。

1人がヘッダー、1人が商品カード、1人がフォームというように、部品単位で担当を分けやすくなります。React 公式が UI をコンポーネントの集まりとして説明しているのは、こうした分担や再利用にも相性がよいからです。

コンポーネントにしすぎるとどうなるか

細かく分ければよいわけではない

初心者が最初にやりがちなことの1つは、「分割こそ正義」と思って、何でもかんでも部品化してしまうことです。

ただ、React 公式が最初に示しているコンポーネント例は、UI の意味のあるまとまりとして作られています。ボタン、アバター、ページなど、見た目や役割としてまとまった単位です。

たとえば、単なる1行の <span> まで全部別ファイルにすると、かえって読みにくくなることがあります。

コンポーネントは「分けること」が目的ではなく、「再利用・責務分離・可読性向上」に役立つときに使うものです。この感覚は、あとで props や children を学ぶとよりはっきりしてきます。

まずは意味のあるまとまりで考える

最初は次のような単位で考えると分かりやすいです。

  • ボタン
  • カード
  • ヘッダー
  • フッター
  • 商品一覧
  • プロフィール欄
  • フォーム

このような「名前を付けやすい UI のまとまり」から始めると、コンポーネントベース開発はかなり理解しやすくなります。React 公式でも、コンポーネントは小さなボタンにも大きなページにもなり得るとされており、粒度は役割に応じて決めるものだと読み取れます。

次節以降で何を学ぶのか

JSX は部品を書くための記法

React 公式では、JSX はマークアップを書くための便利な構文で、ほとんどの React プロジェクトで使われると説明されています。また、JSX は HTML より厳密で、タグを閉じる必要があることや、複数要素を返すときは共通の親やフラグメントで包む必要があると説明されています。

つまり次節の JSX は、「新しい謎の言語」ではなく、コンポーネントの見た目を書くための書き方です。コンポーネントベース開発の入口として、ここが非常に大切です。

Props は部品へデータを渡す仕組み

React 公式では、props は親コンポーネントから子コンポーネントへ情報を渡すための仕組みです。これは再利用可能な部品を作るうえで欠かせません。ボタンのラベル、カードのタイトル、ユーザー名などを外から渡せるようになると、同じコンポーネントを何通りにも使えます。

たとえば、今はまだ詳しくやりませんが、次のような形です。

type GreetingProps = {
  name: string
}

function Greeting({ name }: GreetingProps) {
  return <p>こんにちは、{name}さん</p>
}

このように「部品の見た目は同じで、中身だけ変える」ために props を使います。第3章がコンポーネント理解から props、TypeScript による型定義へ進むのは、このためです。

練習問題

問1

React におけるコンポーネントの説明として最も適切なものはどれですか。

A. 画像だけを表示するための仕組み

B. UI の一部分で、独自の見た目やロジックを持てる部品

C. CSS 専用のファイル

D. データベース接続のための設定

答え

B

解説

React 公式では、React アプリはコンポーネントでできており、コンポーネントは UI の一部分で、独自のロジックと見た目を持てると説明されています。

問2

React コンポーネントの基本形として正しいものはどれですか。

A. JavaScript の関数として書き、マークアップを返す

B. 必ず class 構文でしか書けない

C. HTML ファイルの中にだけ書く

D. public フォルダに置く必要がある

答え

A

解説

React 公式は、React コンポーネントは JavaScript functions that return markup だと説明しています。

問3

React コンポーネント名について正しいものはどれですか。

A. かならず数字から始める

B. 小文字で始める必要がある

C. 大文字で始める必要がある

D. 日本語では書けない

答え

C

解説

React 公式では、React component names must always start with a capital letter と説明されています。HTML タグは小文字です。

問4

Next.js の App Router で、ページ固有の UI を表す代表的なファイルはどれですか。

A. package.json B. page.tsx C. tsconfig.json D. .env

答え

B

解説

Next.js 公式では、page は route-unique UI を定義するファイルとして説明されています。

問5

コンポーネントベース開発の利点として最も適切なものはどれですか。

A. 画面を1つの巨大ファイルにまとめやすい

B. 再利用しやすく、修正箇所を分けやすい

C. JavaScript を使わずに開発できる

D. どんな場合でも細かく分けるほど正しい

答え

B

解説

React 公式は、コンポーネントを作ってネストし、props で情報を渡しながら UI を構築する流れを示しています。これにより再利用や責務分離がしやすくなります。

まとめ

コンポーネントベース開発とは、画面を小さな意味のある部品に分け、その部品を組み合わせて UI を作る考え方です。

React 公式では、React アプリはコンポーネントでできており、コンポーネントは JavaScript 関数として書け、ネストして使えると説明されています。

Next.js では、その部品の考え方が page や layout にもつながり、App Router の構造の中で生きてきます。

この節で本当に持ち帰ってほしいのは、「React は部品で考える」「Next.js はその部品を画面構造に載せていく」という感覚です。

ここが見えると、次に学ぶ JSX、Props、イベント処理、型定義がすべてつながります。まだ完璧に書けなくて大丈夫です。

まずは、1つの画面を部品の集まりとして見る目 を持つことが、大切になります。

参考文献

  • React Docs, Quick Start
  • React Docs, Your First Component
  • React Docs, Importing and Exporting Components
  • React Docs, Passing Props to a Component
  • React Docs, Render and Commit
  • Next.js Docs, Getting Started: Layouts and Pages
  • Next.js Docs, Getting Started: Project Structure
次の節Reactコンポーネントの基本構造
教材トップへ戻る