# 画面設計書 2-Appコンポーネント

## 概要

本ドキュメントは、Vite PlaygroundのAppコンポーネント（`playgrounds/vite/src/app.tsx`）の画面設計書である。Vite + React構成のデモアプリケーションにおけるメインUIコンポーネントであり、Tailwind CSSユーティリティクラスを使用した表示要素の構造・スタイル・関連機能について記述する。

### 本画面の処理概要

Appコンポーネントは、Vite PlaygroundにおいてReactDOMによりマウントされるルートレベルのUIコンポーネントである。Tailwind CSSのユーティリティクラスを使用してスタイリングされた「Hello World」テキストを表示する。

**業務上の目的・背景**：Tailwind CSSのユーティリティクラス（`m-3`、`p-3`、`border`、`text-blue-500`）が正しくコンパイルされ、ブラウザ上で期待通りのスタイルが適用されることを検証するためのデモコンポーネントである。Tailwind CSSの`compileCandidates`機能がReactコンポーネントの`className`属性から候補クラスを正しく抽出し、CSS生成を行えることを確認する目的がある。特に、マージン・パディング・ボーダー・テキストカラーといった基本的なユーティリティクラスの動作検証に使用される。

**画面へのアクセス方法**：No.1トップページ（index.html）経由でmain.tsxがロードされ、`ReactDOM.createRoot`により自動的にマウント・描画される。直接URLでアクセスする場合は`http://localhost:5173/`にアクセスする。

**主要な操作・処理内容**：
1. main.tsxから`import { App } from './app'`でインポートされる
2. `ReactDOM.createRoot`の`render`メソッドによりコンポーネントツリーが構築される
3. `<div className="m-3 p-3 border">`でラッパーdivが生成される（マージン3、パディング3、ボーダー付き）
4. `<h1 className="text-blue-500">Hello World</h1>`で青色の見出しテキストが描画される
5. Tailwind CSSの`compileCandidates`により、`m-3`、`p-3`、`border`、`text-blue-500`の各ユーティリティクラスからCSSが生成される

**画面遷移**：本コンポーネントはVite Playground内の唯一のUIコンポーネントであり、画面遷移は存在しない。ルートURL（`/`）で常に表示される。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | ユーティリティ登録・生成（Utilities） | 主機能 | `m-3`・`p-3`・`border`等のユーティリティクラスのCSS生成を担当する |
| 3 | 候補クラスのコンパイル（compileCandidates） | 主機能 | className属性の`m-3`・`p-3`・`border`・`text-blue-500`等の候補クラスからASTノードを生成する |
| 17 | 候補パーサー（parseCandidate） | 補助機能 | `m-3`・`p-3`・`border`・`text-blue-500`等のクラス文字列をCandidate構造体に解析する |
| 11 | テーマ管理（Theme） | 補助機能 | `text-blue-500`の`blue-500`カラー値をテーマから解決する |
| 10 | デザインシステム構築（buildDesignSystem） | 補助機能 | ユーティリティ・テーマ・バリアントを統合したDesignSystemを提供する |

## 画面種別

詳細表示（UIコンポーネント）

## URL/ルーティング

- **URL**: `/`（ルート）- No.1トップページと同一
- **ルーティング方式**: Reactコンポーネントとしてmain.tsxから直接レンダリングされる。独立したルーティングは存在しない。

## 入出力項目

本コンポーネントにはフォーム入力項目は存在しない。

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

## 表示項目

| 項目名 | 表示内容 | スタイル（Tailwind CSSクラス） | データソース |
|--------|----------|-------------------------------|-------------|
| ラッパーdiv | コンテンツのコンテナ | `m-3`（margin: 0.75rem）、`p-3`（padding: 0.75rem）、`border`（border-width: 1px） | app.tsx 3行目 |
| 見出しテキスト | "Hello World" | `text-blue-500`（color: rgb(59 130 246)） | app.tsx 4行目 |

## イベント仕様

### 1-コンポーネントレンダリング

1. main.tsxの`ReactDOM.createRoot(document.getElementById('app')!).render()`によりレンダリングが開始される
2. `React.StrictMode`内で`App`関数コンポーネントが呼び出される
3. JSXが仮想DOMに変換され、実DOMに反映される
4. ブラウザがTailwind CSSで生成されたスタイルシートを適用する

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| なし | - | - | 本コンポーネントにメッセージ表示機能は存在しない |

## 例外処理

| 例外状況 | 動作 | ユーザーへの影響 |
|----------|------|----------------|
| Tailwind CSSコンパイル失敗 | ユーティリティクラスが未解決となり、ブラウザのデフォルトスタイルで表示される | ボーダー・マージン・パディング・テキストカラーが適用されない |
| Reactレンダリングエラー | Reactのエラーバウンダリが設定されていないため、画面が空白になる | コンテンツが表示されない |

## 備考

- 本コンポーネントはステートレスな関数コンポーネントであり、Reactフック（useState、useEffect等）は使用していない
- propsを受け取らないため、外部からの動的なデータ注入は行われない
- `export function App()`として名前付きエクスポートされており、main.tsxから`import { App } from './app'`でインポートされる
- 使用しているTailwind CSSユーティリティクラスの詳細：
  - `m-3`: margin: 0.75rem（12px）を全方向に適用
  - `p-3`: padding: 0.75rem（12px）を全方向に適用
  - `border`: border-width: 1pxを適用（デフォルトカラーはグレー）
  - `text-blue-500`: color: rgb(59 130 246)を適用

---

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

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

### 推奨読解順序

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

Tailwind CSSのユーティリティクラスがどのようにCSS出力に変換されるかの構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | app.tsx | `playgrounds/vite/src/app.tsx` | 3-4行目: `className`属性に指定されたユーティリティクラス（`m-3`、`p-3`、`border`、`text-blue-500`）を確認する |
| 1-2 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 24-31行目: `compileCandidates`、`buildDesignSystem`、`Theme`等のコアモジュールのインポート構造を確認する |

**読解のコツ**: `className`属性の各クラス名がTailwind CSSの「候補（candidate）」として扱われる。各候補は`parseCandidate`でパースされ、`compileCandidates`でASTノードに変換され、最終的にCSSとして出力される。

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

Appコンポーネントがどのようにマウントされるかを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | main.tsx | `playgrounds/vite/src/main.tsx` | 3行目: `import { App } from './app'`で名前付きインポート |
| 2-2 | main.tsx | `playgrounds/vite/src/main.tsx` | 7-10行目: `ReactDOM.createRoot`でAppをマウント |

**主要処理フロー**:
1. **main.tsx:3行目**: `import { App } from './app'`でAppコンポーネントをインポート
2. **main.tsx:7行目**: `ReactDOM.createRoot(document.getElementById('app')!)`でルート作成
3. **main.tsx:8-10行目**: `.render(<React.StrictMode><App /></React.StrictMode>)`でレンダリング

#### Step 3: UIコンポーネントの構造を理解する

Appコンポーネント自体の実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | app.tsx | `playgrounds/vite/src/app.tsx` | 1行目: `export function App()`の関数シグネチャ。propsなしのステートレスコンポーネント |
| 3-2 | app.tsx | `playgrounds/vite/src/app.tsx` | 3行目: `<div className="m-3 p-3 border">`のラッパーdiv |
| 3-3 | app.tsx | `playgrounds/vite/src/app.tsx` | 4行目: `<h1 className="text-blue-500">Hello World</h1>`の見出し |

**主要処理フロー**:
- **app.tsx:1行目**: `export function App()`で関数コンポーネントを定義・エクスポート
- **app.tsx:3行目**: JSXでdiv要素を返却。`m-3`（マージン）、`p-3`（パディング）、`border`（ボーダー）クラスを適用
- **app.tsx:4行目**: h1要素で「Hello World」テキストを表示。`text-blue-500`（青色テキスト）クラスを適用

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

className属性のユーティリティクラスがCSSに変換される流れを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 24行目: `compileCandidates`のインポート。候補クラスからASTノードを生成する関数 |
| 4-2 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 27行目: `buildDesignSystem`のインポート。デザインシステムの構築関数 |
| 4-3 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 29行目: `Theme`のインポート。テーマ管理（`blue-500`カラー値の解決等） |

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

```
main.tsx
    |
    +-- import { App } from './app'
    |
    +-- ReactDOM.createRoot()
            +-- <React.StrictMode>
                    +-- <App />
                            |
                            +-- <div className="m-3 p-3 border">
                            |       className解析:
                            |       +-- parseCandidate("m-3")
                            |       +-- parseCandidate("p-3")
                            |       +-- parseCandidate("border")
                            |
                            +-- <h1 className="text-blue-500">
                                    className解析:
                                    +-- parseCandidate("text-blue-500")
                                    |       +-- Theme.resolve("blue-500")
                                    +-- compileCandidates()
                                            +-- Utilities.generate()
```

### データフロー図

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

app.tsx
  className属性      ------>  Scanner/Extractor          ------>  候補クラス一覧
  "m-3 p-3 border"           (ファイルスキャン)                    ["m-3","p-3","border",
  "text-blue-500"                                                  "text-blue-500"]

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

Candidate構造体      ------>  compileCandidates()        ------>  ASTノード
                              (コンパイラ)
                              |
                              +-> Theme.resolve()
                              +-> Utilities.generate()

ASTノード            ------>  toCss()                    ------>  CSSスタイルシート
                              (CSS出力)                            (ブラウザに適用)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| app.tsx | `playgrounds/vite/src/app.tsx` | ソース | Appコンポーネント。Tailwind CSSクラスを使用したUI定義 |
| main.tsx | `playgrounds/vite/src/main.tsx` | ソース | AppコンポーネントのインポートとReactDOMマウント |
| index.html | `playgrounds/vite/src/index.html` | テンプレート | マウントポイント`<div id="app">`を提供 |
| index.css | `playgrounds/vite/src/index.css` | スタイル | `@import 'tailwindcss'`によるCSSコンパイルトリガー |
| vite.config.ts | `playgrounds/vite/vite.config.ts` | 設定 | @tailwindcss/viteプラグインの登録 |
| index.ts | `packages/tailwindcss/src/index.ts` | ソース | compile、compileCandidates等のコアAPI |
| index.ts | `packages/@tailwindcss-vite/src/index.ts` | ソース | Viteプラグイン実装。Scanner連携 |
