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

画面設計とレイアウトへ【次章へ】

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

この節で学ぶこと

このページは、第3章で学んだ React コンポーネントの基本 を、次章の 画面設計とレイアウト へつなげるためのまとめです。

React 公式では、UI をコンポーネントの集まりとして考え、まず部品へ分け、次にそれらをつなぎ、最後にデータを流す、という順序で捉えることが勧められています。

Next.js 側でも、page.tsx と layout.tsx を使ってページと共通枠を組み立てる考え方が基礎として整理されています。

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

  1. コンポーネント、JSX、props、イベント処理が 1本の流れ として見えることです。
  2. 小さな UI 部品を自分で作り、ページへ組み込めることです。
  3. 次章で扱う「レイアウト」や「画面全体の設計」が、今まで作ってきた部品の延長線上にあると理解することです。
  4. Next.js 公式のコンポーネント一覧ページを参照しながら、自分で学習を広げられる状態になることです。

Next.js 公式には built-in components の一覧があり、Link、Image、Form、Script、Font などが整理されています。

第3章の全体像

ここまでで学んだこと

第3章では、次の流れを順に学んできました。

  • コンポーネントベース開発とは何か
  • React コンポーネントの基本構造
  • JSX と画面表示の仕組み
  • props によるデータの受け渡し
  • TypeScript による props 型定義
  • コンポーネント分割と再利用設計
  • イベント処理の基本
  • 実践として基本コンポーネント作成
  • UI 部品を分割して組み立てる演習

この順序は、React 公式の学習導線ともかなり近いです。React 公式は、最初のコンポーネント、props、イベント処理、Thinking in React という流れで、部品化と UI 設計の考え方を積み上げています。

いま理解しておきたい本質

この章で本当に大切なのは、個々の文法を暗記することではありません。

本質は、画面は部品の集まりとして作れる という感覚を持つことです。

React 公式は、UI を pieces に分け、各コンポーネントの visual states を考え、それらを connect するという順序で説明しています。

つまり、今の段階で持っていてほしい理解は次のようなものです。

  • JSX は、画面の見た目を書くための書き方
  • コンポーネントは、その見た目をまとめた部品
  • props は、部品へ渡すデータ
  • イベントハンドラは、部品に動きを与えるもの
  • page.tsx は、それらを組み立てる場所

これが見えるだけで、次章の「レイアウト」や「画面構造」がかなり自然に入ってきます。

次章とどうつながるのか

部品から画面へ進む

第3章では、主に「部品をどう作るか」を見てきました。

次章では、その部品を どう配置するか、どう画面全体として設計するか が中心になります。

Next.js 公式では、layout.tsx は共有 UI、page.tsx は route-unique UI と説明されています。

つまり、次章は「コンポーネントを作る」から「コンポーネントを並べて、ページとして意味を持たせる」段階へ進む章です。

layout.tsx は大きなコンポーネントとして見る

次章に入る前に押さえたいのは、Next.js の layout.tsx も、結局は React コンポーネントの1つ だということです。Next.js 公式では、layouts are shared between multiple routes と説明されており、共通 UI を包む役割を持ちます。

たとえば、次のようなコードです。

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

このコードは特別な魔法ではなく、children を受け取って共通の外枠で包むコンポーネントです。ここまで学んだ props と children の理解が、そのまま次章のレイアウト設計へつながります。children は React 公式でも、親コンポーネントの中へ JSX を差し込むための特別な props として説明されています。

まとめとして作る小さな UI

今回作るもの

ここでは、第3章のまとめとして、次のような小さな UI を作ります。

  • ページタイトル

  • 説明文

  • 情報カード

  • ナビゲーション用ボタン 見た目はシンプルですが、ここまで学んだ内容がかなり詰まっています。

  • コンポーネント分割

  • props

  • children

  • イベント処理

  • Next.js の Link を使った画面遷移の入口 Next.js の Link コンポーネントは、HTML の <a> を拡張し、client-side navigation と prefetching を提供する主要コンポーネントです。

完成イメージ

まず、部品を 3 つ作る前提で考えます。

Page
 ├─ PageIntro
 ├─ SummaryCard
 └─ NextStepLink

React 公式の UI tree の考え方に沿えば、これは非常に自然な分割です。

練習1 ページ導入部分を作る

問題

PageIntro というコンポーネントを作ってください。条件は次のとおりです。

  • title と description を props で受け取る
  • title は <h1>
  • description は <p>
  • TypeScript で型を付ける

答え

type PageIntroProps = {
  title: string
  description: string
}

export default function PageIntro({
  title,
  description,
}: PageIntroProps) {
  return (
    <section>
      <h1>{title}</h1>
      <p>{description}</p>
    </section>
  )
}

解説

これは、第3章で学んだ props と TypeScript 型定義の復習です。React 公式は、親コンポーネントが子へ props を渡して情報を伝えると説明しています。TypeScript で型を付けると、どんな値を受け取る部品かが明確になります。

練習2 枠だけ共通化する

問題

SummaryCard というコンポーネントを作ってください。条件は次のとおりです。

  • title と children を受け取る
  • title は <h2>
  • children はカード本文として表示する
  • children の型は React.ReactNode にする

答え

type SummaryCardProps = {
  title: string
  children: React.ReactNode
}

export default function SummaryCard({
  title,
  children,
}: SummaryCardProps) {
  return (
    <section>
      <h2>{title}</h2>
      <div>{children}</div>
    </section>
  )
}

解説

この設計では、枠だけを共通化し、中身は使う側が自由に差し込めます。React 公式は、ネストした JSX が children props として渡されることを説明しています。こうしたラッパー型コンポーネントは、画面設計やレイアウト設計へつながる重要な部品です。

練習3 次章へのリンク部品を作る

問題

NextStepLink というコンポーネントを作ってください。条件は次のとおりです。

  • href と label を props で受け取る
  • next/link を使う
  • リンク文言を label として表示する

答え

import Link from 'next/link'

type NextStepLinkProps = {
  href: string
  label: string
}

export default function NextStepLink({
  href,
  label,
}: NextStepLinkProps) {
  return <Link href={href}>{label}</Link>
}

解説

Next.js の Link は、client-side navigation を提供する built-in component です。ページ間移動の基本になるため、次章の「画面設計とレイアウト」へ進む導入としても自然です。

練習4 最後に組み立てる

問題

今まで作った PageIntro、SummaryCard、NextStepLink を使って、次のようなまとめページを作ってください。

  • ページタイトルは「第3章のまとめ」
  • 説明文は「コンポーネントの基本を学び、UI を部品として考える土台を作りました。」
  • カードは2枚置く
  • 最後に「次章へ進む」というリンクを置く

答え

import PageIntro from '@/components/PageIntro'
import SummaryCard from '@/components/SummaryCard'
import NextStepLink from '@/components/NextStepLink'

export default function Page() {
  return (
    <main>
      <PageIntro
        title="第3章のまとめ"
        description="コンポーネントの基本を学び、UI を部品として考える土台を作りました。"
      />

      <SummaryCard title="できるようになったこと">
        <p>
          JSX、props、イベント処理を使って基本部品を作れるようになりました。
        </p>
      </SummaryCard>

      <SummaryCard title="次章で学ぶこと">
        <p>
          部品をどう配置し、共通レイアウトとして設計するかを学びます。
        </p>
      </SummaryCard>

      <NextStepLink
        href="/next-chapter"
        label="次章へ進む"
      />
    </main>
  )
}

解説

この小さな UI には、第3章の内容がかなり詰まっています。

PageIntro は props によるデータ受け渡し、SummaryCard は children によるラッパー設計、NextStepLink は Next.js の built-in component 利用です。

これらを page.tsx で組み立てることで、コンポーネントを 作る だけでなく 配置して画面にする ところまで体験できます。

React 公式の “Thinking in React” の考え方と、Next.js の layouts and pages の考え方が、ここで自然につながります。

次章へ進む前に整理したいこと

ここまでで見えているべきもの

次章へ進む前に、少なくとも次の感覚があれば十分です。

  • 1つの画面は、複数コンポーネントの組み合わせでできる
  • page.tsx は、部品を並べて画面を作る入口
  • children を使うと、共通の枠を作りやすい
  • Link のような Next.js 標準コンポーネントも、普通の React コンポーネントのように扱える

これは、次章の「レイアウト」や「画面設計」を理解するうえでかなり重要です。Next.js 公式でも、pages と layouts を組み合わせて route ごとの UI と共有 UI を整理する考え方が中心に置かれています。

まとめ

第3章で本当に身につけたかったのは、React コンポーネントを 文法として知ること ではなく、UI を部品として考えられるようになること でした。

React 公式は、コンポーネント、props、イベント処理、UI の分解を一連の流れとして学ぶ構造を取っています。

Next.js 側でも、pages と layouts を通じて、そうした部品を画面へ配置する考え方が土台になっています。

このページで作った小さなまとめ UI はシンプルですが、次章への橋としては十分です。

ページ導入、カード、リンク。これらを自分で分けて組み立てられたなら、もう次は「部品をどう置くか」「共通レイアウトをどう作るか」という、1段上の話へ進めます。

そこから先は、部品を作るだけでなく、画面全体を設計する視点 が中心になっていきます。

参考文献

  • React Docs, Your First Component.
  • React Docs, Passing Props to a Component.
  • React Docs, Responding to Events.
  • React Docs, Thinking in React.
  • Next.js Docs, Components - API Reference.
  • Next.js Docs, Link Component.
  • Next.js Docs, Getting Started: Layouts and Pages.
  • Next.js Docs, Getting Started: Project Structure.
前の節UI部品を分割して組み立てる【演習】
教材トップへ戻る