# 画面設計書 6-トップページ

## 概要

本ドキュメントは、V3 Playground（Tailwind CSS v3互換）のトップページ（`playgrounds/v3/app/page.tsx`）の画面設計書である。Tailwind CSSユーティリティクラスを直接`className`属性に記述し、複数のユーティリティクラス（`text-3xl`、`font-bold`、`underline`、`border`、`ring`）による装飾を行うデモページの構造・スタイル・関連機能について記述する。

### 本画面の処理概要

本画面は、V3 Playgroundにおけるルートパス（`/`）に対応するページコンポーネントである。Tailwind CSSのユーティリティクラスを直接`className`属性に記述し、フォントサイズ・太字・下線・ボーダー・リングといった複数のスタイルを組み合わせたデモを行う。

**業務上の目的・背景**：Tailwind CSS v3互換環境において、複数のユーティリティクラスの組み合わせが正しくコンパイルされ、ブラウザ上で期待通りのスタイルが適用されることを検証するためのデモページである。特に、`text-3xl`（フォントサイズ）、`font-bold`（フォントウェイト）、`underline`（テキスト装飾）、`border`（ボーダー）、`ring`（リングシャドウ）といった異なるカテゴリのユーティリティクラスが同一要素に適用される場合の動作を確認する。また、No.5レイアウトの`[&_h1]:font-thin`バリアントが本ページのh1要素にどのように適用されるかも検証ポイントとなる。後方互換フック（`applyCompatibilityHooks`）経由でのコンパイルが正しく行われることも確認する。

**画面へのアクセス方法**：Next.js開発サーバー起動後（`next dev`）、ブラウザで`http://localhost:3000/`にアクセスする。No.5レイアウト（layout.tsx）の`{children}`として自動的にマウントされる。

**主要な操作・処理内容**：
1. Next.jsのApp Routerがルートパス（`/`）のリクエストを受信し、`app/page.tsx`をページコンポーネントとして特定する
2. `<h1 className="text-3xl font-bold underline border ring">Hello world!</h1>`でスタイル装飾済みの見出しが生成される
3. Scanner/Extractorにより`className`属性の各ユーティリティクラスが候補として検出される
4. `parseCandidate`が各クラス文字列をCandidate構造体に解析する
5. `compileCandidates`がASTノードを生成し、各ユーティリティクラスのCSSが出力される
6. No.5レイアウトの`[&_h1]:font-thin`バリアントにより、h1要素に`font-weight: 100`が追加適用される

**画面遷移**：本画面は単一ページ構成であり、他のページへの遷移は存在しない。ルートURL（`/`）のみに対応する。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | ユーティリティ登録・生成（Utilities） | 主機能 | `text-3xl`・`font-bold`・`underline`・`border`・`ring`等のユーティリティクラスのCSS生成を担当する |
| 3 | 候補クラスのコンパイル（compileCandidates） | 主機能 | className属性の`text-3xl`・`font-bold`・`underline`・`border`・`ring`等の候補クラスからASTノードを生成する |
| 17 | 候補パーサー（parseCandidate） | 補助機能 | `text-3xl`・`font-bold`・`underline`・`border`・`ring`等のクラス文字列をCandidate構造体に解析する |
| 11 | テーマ管理（Theme） | 補助機能 | `text-3xl`のフォントサイズ値等をテーマから解決する |
| 10 | デザインシステム構築（buildDesignSystem） | 補助機能 | ユーティリティ・テーマ・バリアントを統合したDesignSystemを提供する |
| 42 | 後方互換フック（applyCompatibilityHooks） | 補助機能 | v3互換のglobals.css構成によるコンパイルを後方互換レイヤーがサポートする |

## 画面種別

トップページ（ホームページ・v3互換構成）

## URL/ルーティング

- **URL**: `/`（ルート）
- **ルーティング方式**: Next.js App Router。`app/page.tsx`がルートパスに自動的にマッピングされる。

## 入出力項目

本画面にはフォーム入力項目は存在しない。

| 項目名 | 種別 | 説明 |
|--------|------|------|
| なし | - | 入力項目は存在しない |

## 表示項目

| 項目名 | 表示内容 | スタイル（Tailwind CSSクラス） | データソース |
|--------|----------|-------------------------------|-------------|
| 見出しテキスト | "Hello world!" | `text-3xl`（font-size: 1.875rem / line-height: 2.25rem）、`font-bold`（font-weight: 700）、`underline`（text-decoration-line: underline）、`border`（border-width: 1px）、`ring`（box-shadow: ring） | page.tsx 2行目 |

**注意**: No.5レイアウト（layout.tsx）の`[&_h1]:font-thin`バリアントにより、h1要素には追加で`font-weight: 100`が適用される。`font-bold`（700）と`font-thin`（100）が競合するため、CSSの詳細度・適用順序により最終的なfont-weightが決定される。

## イベント仕様

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

1. Next.jsのApp Routerがルートパス（`/`）へのリクエストを受信する
2. `app/page.tsx`のHome関数コンポーネントがサーバーサイドで実行される
3. JSXが`<h1>`要素として出力され、5つのユーティリティクラスが`className`属性に設定される
4. No.5レイアウト（layout.tsx）の`{children}`に挿入され、完全なHTMLレスポンスが生成される
5. v3互換のPostCSSパイプラインにより、各ユーティリティクラスのCSSが生成・最適化される

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| なし | - | - | 本画面にメッセージ表示機能は存在しない |

## 例外処理

| 例外状況 | 動作 | ユーザーへの影響 |
|----------|------|----------------|
| Tailwind CSSコンパイル失敗 | ユーティリティクラスが未解決となり、ブラウザのデフォルトスタイルで表示される | フォントサイズ・太字・下線・ボーダー・リングが適用されない |
| v3互換フックの処理失敗 | PostCSSパイプラインでエラーが発生し、ビルドが失敗する | ページが表示されない |

## 備考

- 本コンポーネントはステートレスな関数コンポーネントであり、propsを受け取らない
- `export default function Home()`としてデフォルトエクスポートされている
- 5つのユーティリティクラスを同一要素に適用するデモであり、それぞれ異なるCSSカテゴリに属する：
  - `text-3xl`: フォントサイズ（Typography）
  - `font-bold`: フォントウェイト（Typography）
  - `underline`: テキスト装飾（Typography）
  - `border`: ボーダー幅（Borders）
  - `ring`: リングシャドウ（Box Shadow）
- No.5レイアウトの`[&_h1]:font-thin`との`font-bold`の競合が発生する可能性がある。実際の表示はCSSの詳細度（specificity）と適用順序に依存する
- No.2 Appコンポーネント（Vite Playground）と比較すると、より多くのユーティリティクラスを使用しており、v3互換環境での動作検証範囲が広い

---

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

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

### 推奨読解順序

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

ページコンポーネントで使用されるユーティリティクラスの構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `playgrounds/v3/app/page.tsx` | 2行目: `className="text-3xl font-bold underline border ring"`で5つのユーティリティクラスを確認 |
| 1-2 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 24-29行目: `compileCandidates`、`buildDesignSystem`、`Theme`等のコアモジュールのインポート構造を確認 |

**読解のコツ**: `className`属性にスペース区切りで列挙された各クラス名が、Tailwind CSSの候補（candidate）として個別に処理される。各候補は独立してパース・コンパイルされ、それぞれ異なるCSSプロパティを生成する。

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

ページコンポーネントの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `playgrounds/v3/app/page.tsx` | 1行目: `export default function Home()`でデフォルトエクスポート。propsなし |
| 2-2 | page.tsx | `playgrounds/v3/app/page.tsx` | 2行目: JSXの唯一の要素。h1に5つのユーティリティクラスを適用 |

**主要処理フロー**:
1. **page.tsx:1行目**: `export default function Home()`でページコンポーネントを定義
2. **page.tsx:2行目**: `<h1 className="text-3xl font-bold underline border ring">Hello world!</h1>`で見出しを返却

#### Step 3: レイアウトとの関係を理解する

No.5レイアウトの任意値バリアントとの関係を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | layout.tsx | `playgrounds/v3/app/layout.tsx` | 18行目: `className="[&_h1]:font-thin"`がhtml要素に適用されている |
| 3-2 | layout.tsx | `playgrounds/v3/app/layout.tsx` | 20行目: `{children}`にpage.tsxが挿入される構造 |

**主要処理フロー**:
- **layout.tsx:18行目**: `[&_h1]:font-thin`により、html要素配下のh1要素に`font-weight: 100`が適用される
- page.tsxのh1要素は`font-bold`（`font-weight: 700`）を持つが、レイアウトの`font-thin`との詳細度の関係で最終的なfont-weightが決定される

#### Step 4: CSSコンパイルパイプラインを理解する

v3互換環境でのコンパイル処理の流れを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | globals.css | `playgrounds/v3/app/globals.css` | 1-3行目: v3形式の3分割@import構成 |
| 4-2 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 21行目: `applyCompatibilityHooks`のインポート。v3互換処理 |
| 4-3 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 27行目: `buildDesignSystem`のインポート。デザインシステム構築 |
| 4-4 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 29行目: `Theme`のインポート。テーマ値（フォントサイズ等）の解決 |

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

```
page.tsx (Home)
    |
    +-- <h1 className="text-3xl font-bold underline border ring">
            |
            +-- Scanner/Extractor [候補クラスの検出]
            |       +-- "text-3xl"
            |       +-- "font-bold"
            |       +-- "underline"
            |       +-- "border"
            |       +-- "ring"
            |
            +-- parseCandidate() [各クラスを解析]
            |       +-- parseCandidate("text-3xl")
            |       +-- parseCandidate("font-bold")
            |       +-- parseCandidate("underline")
            |       +-- parseCandidate("border")
            |       +-- parseCandidate("ring")
            |
            +-- compileCandidates() [ASTノード生成]
            |       |
            |       +-- Theme.resolve("3xl") [フォントサイズ解決]
            |       +-- Utilities.generate() [各ユーティリティのCSS生成]
            |       +-- buildDesignSystem() [デザインシステム参照]
            |
            +-- applyCompatibilityHooks() [v3互換レイヤー]
                    +-- v3形式@import -> v4形式変換
```

### データフロー図

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

page.tsx
  className属性      ------>  Scanner/Extractor          ------>  候補クラス一覧
  "text-3xl                   (ファイルスキャン)                    ["text-3xl",
   font-bold                                                       "font-bold",
   underline                                                       "underline",
   border ring"                                                    "border","ring"]

候補クラス一覧       ------>  parseCandidate()           ------>  Candidate構造体
                              (候補パーサー)                       (5個)

Candidate構造体      ------>  compileCandidates()        ------>  ASTノード
                              |                                    (各ユーティリティの
                              +-> Theme.resolve()                   CSSルール)
                              +-> Utilities.generate()
                              +-> buildDesignSystem()

ASTノード            ------>  toCss()                    ------>  CSSスタイルシート
                              (CSS出力)

layout.tsx
  "[&_h1]:font-thin" ------> バリアント処理              ------>  追加CSSルール
                              +-> parseVariant()                   html h1 {
                              +-> Variants.apply()                  font-weight: 100; }
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `playgrounds/v3/app/page.tsx` | ソース | トップページコンポーネント。5つのユーティリティクラスを使用したUI |
| layout.tsx | `playgrounds/v3/app/layout.tsx` | ソース | ルートレイアウト。[&_h1]:font-thinバリアントとchildren挿入 |
| globals.css | `playgrounds/v3/app/globals.css` | スタイル | v3形式の3分割@import構成 |
| postcss.config.js | `playgrounds/v3/postcss.config.js` | 設定 | PostCSS設定。tailwindcss + autoprefixer |
| package.json | `playgrounds/v3/package.json` | 設定 | 依存関係定義。tailwindcss ^3 |
| index.ts | `packages/tailwindcss/src/index.ts` | ソース | Tailwind CSSコア。compile、compileCandidates、Theme等 |
