# 画面設計書 3-レイアウト

## 概要

本ドキュメントは、Next.js Playgroundのルートレイアウト（`playgrounds/nextjs/app/layout.tsx`）の画面設計書である。Next.js App Router構成におけるルートレイアウトコンポーネントであり、Interフォントの適用、メタデータの設定、子要素のラップ処理、およびTailwind CSS（`@tailwindcss/postcss`経由）のスタイル統合について記述する。

### 本画面の処理概要

本レイアウトは、Next.js Playgroundにおけるすべてのページに共通適用されるルートレベルのレイアウトコンポーネントである。HTMLドキュメント全体の構造（`<html>`、`<body>`）を定義し、Google FontsのInterフォントを適用する。

**業務上の目的・背景**：Tailwind CSS v4の`@tailwindcss/postcss`プラグインがNext.js環境で正しく動作することを検証するためのデモレイアウトである。Next.js App Routerのレイアウトシステムにおいて、PostCSS経由でTailwind CSSのコンパイルパイプライン（globals.cssの`@import 'tailwindcss'`の解決、候補クラスのスキャン・抽出、CSSの生成・最適化）が正常に機能することを確認する目的で使用される。

**画面へのアクセス方法**：Next.js開発サーバー起動後（`next dev`）、ブラウザで`http://localhost:3000/`にアクセスする。本レイアウトはすべてのページに自動的に適用されるため、直接アクセスするものではなく、ページコンポーネント（page.tsx）を通じて間接的に描画される。

**主要な操作・処理内容**：
1. `import './globals.css'`によりglobals.css（`@import 'tailwindcss'`）が読み込まれる
2. PostCSSプラグイン（`@tailwindcss/postcss`）がglobals.cssをコンパイルし、Tailwind CSSのスタイルシートを生成する
3. `Inter`フォント（Google Fonts）が`next/font/google`を通じてロードされ、`latin`サブセットが指定される
4. `<html lang="en">`でHTML要素が生成され、`<body>`に`inter.className`（フォントクラス）が適用される
5. `{children}`により、ルーティングに基づくページコンポーネント（page.tsx）が子要素として挿入される

**画面遷移**：本レイアウトはNext.js Playgroundの全ページに共通適用される。現在のPlayground構成では、トップページ（No.4 page.tsx）のみが子要素として表示される。ページ間遷移は存在しない。

**権限による表示制御**：認証・認可の仕組みは存在しない。すべてのユーザーが同一のレイアウトを閲覧できる。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | CSS入力のコンパイル（compile） | 主機能 | globals.cssの`@import 'tailwindcss'`により、Tailwind CSSのコンパイルパイプラインが実行される |
| 25 | @importの解決（substituteAtImports） | 主機能 | globals.cssの`@import 'tailwindcss'`ディレクティブを解決し、Tailwind CSSのスタイルシートをインライン展開する |
| 51 | PostCSSプラグイン（@tailwindcss/postcss） | 主機能 | postcss.config.jsで`@tailwindcss/postcss`が登録されており、PostCSSビルド時にTailwind CSSの処理を統合する |
| 26 | ファイルスキャナー（Scanner - Rust/oxide） | 補助機能 | PostCSSプラグイン経由でソースファイルからTailwind CSS候補クラスをスキャンする |
| 27 | 候補抽出器（Extractor - Rust/oxide） | 補助機能 | PostCSSプラグイン経由でスキャンされたファイルから候補クラス名を抽出する |
| 30 | CSS最適化（optimize） | 補助機能 | PostCSSプラグイン内でLightning CSSによるCSS最適化が実行される |

## 画面種別

レイアウト（共通テンプレート）

## URL/ルーティング

- **URL**: すべてのページに適用（Next.js App Routerのルートレイアウト）
- **ルーティング方式**: Next.js App Router。`app/layout.tsx`がルートレイアウトとして機能し、`app/`配下のすべてのpage.tsxを`{children}`として内包する。

## 入出力項目

| 項目名 | 種別 | 型 | 説明 |
|--------|------|-----|------|
| children | 入力（props） | `React.ReactNode` | Next.jsのルーティングにより挿入されるページコンポーネント |

## 表示項目

| 項目名 | 表示内容 | スタイル | データソース |
|--------|----------|----------|-------------|
| htmlタグ | HTML文書ルート | `lang="en"` | layout.tsx 18行目 |
| headタグ | メタデータ領域 | コメントアウトされたCDNスクリプト | layout.tsx 19行目 |
| bodyタグ | ページコンテンツコンテナ | `inter.className`（Interフォント適用） | layout.tsx 20行目 |
| メタデータ - title | "Create Next App" | Next.jsの`<title>`タグとして出力 | layout.tsx 8行目 |
| メタデータ - description | "Generated by create next app" | Next.jsの`<meta name="description">`として出力 | layout.tsx 9行目 |

## イベント仕様

### 1-サーバーサイドレンダリング

1. Next.jsサーバーがリクエストを受信し、対応するページコンポーネントを特定する
2. RootLayout関数が呼び出され、`children`にページコンポーネントが渡される
3. `Inter`フォントのCSSが生成され、`inter.className`としてbody要素に適用される
4. PostCSSプラグインがglobals.cssをコンパイルし、Tailwind CSSの出力をページに含める
5. HTMLレスポンスがクライアントに返却される

### 2-メタデータ設定

1. `export const metadata: Metadata`によりNext.jsのメタデータAPIが有効化される
2. `title: 'Create Next App'`がHTMLの`<title>`タグとして出力される
3. `description: 'Generated by create next app'`が`<meta name="description">`として出力される

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | 本レイアウトはデータベースを使用しない |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| なし | - | - | 本レイアウトにメッセージ表示機能は存在しない |

## 例外処理

| 例外状況 | 動作 | ユーザーへの影響 |
|----------|------|----------------|
| Interフォントの読み込み失敗 | ブラウザのデフォルトフォントにフォールバックする | テキストのフォントがInterではなくシステムフォントで表示される |
| globals.cssのコンパイル失敗 | Next.jsの開発サーバーがエラーをコンソールに出力する | Tailwind CSSのスタイルが適用されない |
| childrenが未定義 | 空のbody要素が表示される | ページコンテンツが表示されない |

## 備考

- `<head>`内に`<script src="https://cdn.tailwindcss.com"></script>`がコメントアウトされている（layout.tsx 19行目）。これはCDN版Tailwind CSSの参照であり、開発時のデバッグ用に残されている可能性がある
- propsの`children`は`Readonly<{ children: React.ReactNode }>`として型定義されており、読み取り専用として扱われる
- PostCSSプラグインの設定は`postcss.config.js`で行われ、`@tailwindcss/postcss`が唯一のプラグインとして登録されている
- Interフォントは`next/font/google`を使用してロードされ、ビルド時にフォントファイルがローカルにダウンロードされる（外部リクエスト不要）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

Next.js App Routerのレイアウトコンポーネントの構造とメタデータ型を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | layout.tsx | `playgrounds/nextjs/app/layout.tsx` | 1行目: `import type { Metadata } from 'next'`でMetadata型をインポート。Next.jsのメタデータAPIの型定義 |
| 1-2 | layout.tsx | `playgrounds/nextjs/app/layout.tsx` | 7-10行目: `metadata`定数の構造（title、description）を確認 |
| 1-3 | layout.tsx | `playgrounds/nextjs/app/layout.tsx` | 13-15行目: `Readonly<{ children: React.ReactNode }>`のprops型を確認 |

**読解のコツ**: Next.js App Routerでは、`layout.tsx`はデフォルトエクスポートされるサーバーコンポーネントであり、`children`propsにルーティングで決定されたpage.tsxが渡される。`export const metadata`による静的メタデータ定義はNext.js固有の機能である。

#### Step 2: エントリーポイントを理解する

PostCSSプラグインとCSSの統合を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | globals.css | `playgrounds/nextjs/app/globals.css` | 1行目: `@import 'tailwindcss'`がTailwind CSSコンパイルのトリガー |
| 2-2 | postcss.config.js | `playgrounds/nextjs/postcss.config.js` | 1-5行目: `@tailwindcss/postcss`プラグインの登録 |

**主要処理フロー**:
1. **layout.tsx:3行目**: `import './globals.css'`でCSSファイルをインポート
2. **globals.css:1行目**: `@import 'tailwindcss'`ディレクティブ
3. **postcss.config.js:3行目**: `'@tailwindcss/postcss': {}`でPostCSSプラグインが有効化
4. PostCSSパイプラインで`@tailwindcss/postcss`がCSSをコンパイル

#### Step 3: レイアウトコンポーネントの構造を理解する

RootLayout関数の実装詳細を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | layout.tsx | `playgrounds/nextjs/app/layout.tsx` | 2行目: `import { Inter } from 'next/font/google'`でInterフォントをインポート |
| 3-2 | layout.tsx | `playgrounds/nextjs/app/layout.tsx` | 5行目: `const inter = Inter({ subsets: ['latin'] })`でフォントインスタンスを生成 |
| 3-3 | layout.tsx | `playgrounds/nextjs/app/layout.tsx` | 12-23行目: RootLayout関数のJSX構造を確認 |

**主要処理フロー**:
- **layout.tsx:5行目**: `Inter({ subsets: ['latin'] })`でlatinサブセットのInterフォントを設定
- **layout.tsx:18行目**: `<html lang="en">`でHTML要素を生成
- **layout.tsx:19行目**: `<head>`内にコメントアウトされたCDNスクリプト
- **layout.tsx:20行目**: `<body className={inter.className}>`でInterフォントクラスをbodyに適用
- **layout.tsx:20行目**: `{children}`で子ページコンポーネントを挿入

#### Step 4: PostCSSプラグイン層を理解する

PostCSSビルドパイプラインにおけるTailwind CSS統合を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | index.ts（@tailwindcss/postcss） | `packages/@tailwindcss-postcss/src/index.ts` | 1-17行目: コア依存のインポート構造。compileAst、Scanner等の利用を確認 |
| 4-2 | index.ts（@tailwindcss/postcss） | `packages/@tailwindcss-postcss/src/index.ts` | 71-78行目: tailwindcss関数がPostCSSプラグインを返却する構造 |

### プログラム呼び出し階層図

```
layout.tsx (RootLayout)
    |
    +-- import './globals.css'
    |       |
    |       +-- @tailwindcss/postcss プラグイン [postcss.config.js]
    |               |
    |               +-- compileAst() [packages/tailwindcss/src/index.ts]
    |               |       |
    |               |       +-- substituteAtImports() [@importの解決]
    |               |
    |               +-- Scanner [packages/@tailwindcss-oxide]
    |               |       +-- ソースファイルのスキャン
    |               |
    |               +-- Extractor [packages/@tailwindcss-oxide]
    |               |       +-- 候補クラス名の抽出
    |               |
    |               +-- optimizeCss() [Lightning CSS最適化]
    |
    +-- import { Inter } from 'next/font/google'
    |       +-- Inter({ subsets: ['latin'] })
    |               +-- inter.className (bodyに適用)
    |
    +-- export const metadata: Metadata
    |       +-- title: 'Create Next App'
    |       +-- description: 'Generated by create next app'
    |
    +-- <html lang="en">
            +-- <body className={inter.className}>
                    +-- {children} (page.tsx)
```

### データフロー図

```
[入力]                        [処理]                           [出力]

globals.css          ------>  @tailwindcss/postcss       ------>  コンパイル済みCSS
  (@import                     |
   'tailwindcss')              +-> compileAst()
                               +-> Scanner/Extractor
                               +-> optimizeCss()

Inter フォント設定    ------>  next/font/google           ------>  フォントCSS +
  (subsets: latin)             (ビルド時ダウンロード)                inter.className

metadata定数         ------>  Next.jsメタデータAPI        ------>  <title> + <meta>

children (page.tsx)  ------>  RootLayout                 ------>  完成HTML
                               (サーバーサイドレンダリング)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| layout.tsx | `playgrounds/nextjs/app/layout.tsx` | ソース | ルートレイアウトコンポーネント。HTML構造・フォント・メタデータ定義 |
| globals.css | `playgrounds/nextjs/app/globals.css` | スタイル | Tailwind CSSのエントリポイント。`@import 'tailwindcss'`を記述 |
| postcss.config.js | `playgrounds/nextjs/postcss.config.js` | 設定 | PostCSSプラグイン設定。`@tailwindcss/postcss`の登録 |
| page.tsx | `playgrounds/nextjs/app/page.tsx` | ソース | トップページコンポーネント。childrenとしてレイアウトに挿入 |
| page.module.css | `playgrounds/nextjs/app/page.module.css` | スタイル | ページ固有のCSSモジュール |
| package.json | `playgrounds/nextjs/package.json` | 設定 | 依存関係定義。@tailwindcss/postcss、next等のworkspace参照 |
| index.ts | `packages/@tailwindcss-postcss/src/index.ts` | ソース | @tailwindcss/postcssプラグイン実装 |
| index.ts | `packages/tailwindcss/src/index.ts` | ソース | Tailwind CSSコアのcompile関数等 |
