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

## 概要

本ドキュメントは、Vite Playgroundのトップページ（`playgrounds/vite/src/index.html`）の画面設計書である。Vite + React構成のデモアプリケーションにおけるエントリポイントとなるHTMLページの構造・動作・関連機能について記述する。

### 本画面の処理概要

本画面はTailwind CSSプロジェクトのVite Playgroundにおけるエントリポイントであり、ブラウザが最初にロードするHTMLファイルである。

**業務上の目的・背景**：Tailwind CSS v4の`@tailwindcss/vite`プラグインが正しく動作することを検証するためのデモページである。開発者がVite環境でTailwind CSSを利用する際の最小構成例を提供し、プラグインの開発・テスト・デバッグを支援する。CSSのコンパイルパイプライン（`@import 'tailwindcss'`の解決、候補クラスのスキャン・抽出、CSSの生成）が正常に機能することを確認する目的で使用される。

**画面へのアクセス方法**：開発サーバー起動後（`bun --bun vite ./src --config ./vite.config.ts`）、ブラウザで`http://localhost:5173/`にアクセスする。または、ビルド後の成果物を静的ファイルとしてホストし、ルートURLにアクセスする。

**主要な操作・処理内容**：
1. ブラウザがindex.htmlをロードし、`<div id="app">`のマウントポイントを生成する
2. `<script type="module" src="./main.tsx">`によりmain.tsxがロードされる
3. main.tsxが`index.css`（`@import 'tailwindcss'`）をインポートし、Tailwind CSSのコンパイルパイプラインが実行される
4. `ReactDOM.createRoot`によりReactアプリケーションがマウントされ、Appコンポーネントが描画される
5. 最終的に「Hello World」テキストがTailwind CSSユーティリティクラスによりスタイリングされて表示される

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

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

## 関連機能

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

## 画面種別

トップページ（SPA エントリポイント）

## URL/ルーティング

- **URL**: `/`（ルート）
- **ルーティング方式**: Vite開発サーバーによる静的ファイル配信。`playgrounds/vite/src/index.html`が直接サーブされる。

## 入出力項目

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

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

## 表示項目

| 項目名 | 表示内容 | スタイル | データソース |
|--------|----------|----------|-------------|
| ページタイトル | "Playground" | `<title>`タグ（ブラウザタブ表示） | index.html 5行目 |
| Appコンポーネント描画領域 | `<div id="app">` | `h-full`（Tailwind CSSクラス：高さ100%） | index.html 9行目 |
| body要素 | Reactアプリケーションのマウントコンテナ | `h-full`（Tailwind CSSクラス：高さ100%） | index.html 8行目 |

## イベント仕様

### 1-ページロード

1. ブラウザがindex.htmlをパースし、DOMツリーを構築する
2. `<script type="module" src="./main.tsx">`により、Viteがmain.tsxのモジュール解決を開始する
3. Viteの`@tailwindcss/vite`プラグインが`index.css`のCSSコンパイルを実行する
4. `ReactDOM.createRoot(document.getElementById('app')!)`により、`<div id="app">`にReactルートが作成される
5. `<React.StrictMode>`内で`<App />`コンポーネントがレンダリングされる

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

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

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

## メッセージ仕様

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

## 例外処理

| 例外状況 | 動作 | ユーザーへの影響 |
|----------|------|----------------|
| JavaScript無効化 | Reactアプリケーションがマウントされず、空の`<div id="app">`が表示される | 画面にコンテンツが表示されない |
| main.tsxの読み込み失敗 | ブラウザコンソールにモジュール読み込みエラーが表示される | 画面にコンテンツが表示されない |
| CSS コンパイル失敗 | Vite開発サーバーがエラーをオーバーレイ表示する | スタイルが未適用の状態でコンテンツが表示される |

## 備考

- 本PlaygroundはTailwind CSSプロジェクトのmonorepo内に存在し、`@tailwindcss/vite`および`tailwindcss`パッケージは`workspace:^`で参照されている
- HTMLの`<html>`および`<body>`要素に`h-full`クラスが適用されており、フルハイトレイアウトが設定されている
- `<title>`タグの値は`"Playground"`であり、"≈"記号が先頭に付与されている（Viteプレイグラウンド固有の識別子）

---

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

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

### 推奨読解順序

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

まず、Tailwind CSSのコンパイルパイプラインにおけるデータ構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.css | `playgrounds/vite/src/index.css` | `@import 'tailwindcss'`の1行のみ。このディレクティブがコンパイルパイプライン全体のトリガーとなる |
| 1-2 | index.ts（tailwindcss） | `packages/tailwindcss/src/index.ts` | 1-37行目: コンパイルオプション型（`CompileOptions`）と公開APIの構造を確認する |

**読解のコツ**: `@import 'tailwindcss'`はCSS標準の`@import`構文を利用しているが、Tailwind CSSプラグインが特別に解釈し、ユーティリティクラスのスタイルシート全体に展開する。

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

処理の起点となるHTMLファイルとReactマウント処理を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.html | `playgrounds/vite/src/index.html` | HTMLのエントリポイント。`<div id="app">`がReactマウントポイント |
| 2-2 | main.tsx | `playgrounds/vite/src/main.tsx` | Reactアプリケーションのブートストラップ処理 |

**主要処理フロー**:
1. **index.html:10行目**: `<script type="module" src="./main.tsx">`でmain.tsxをESモジュールとしてロード
2. **main.tsx:1-3行目**: React、ReactDOM、Appコンポーネントをインポート
3. **main.tsx:5行目**: `import './index.css'`でTailwind CSSのスタイルシートをインポート（Viteプラグインがコンパイル処理を実行）
4. **main.tsx:7-10行目**: `ReactDOM.createRoot`でReactルートを作成し、`<App />`をStrictMode内でレンダリング

#### Step 3: Viteプラグイン層を理解する

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | vite.config.ts | `playgrounds/vite/vite.config.ts` | Vite設定ファイル。`tailwindcss()`プラグインの登録を確認 |
| 3-2 | index.ts（@tailwindcss/vite） | `packages/@tailwindcss-vite/src/index.ts` | Viteプラグインの実装。`compile`関数の呼び出しとScanner/Extractorの連携を確認 |

**主要処理フロー**:
- **vite.config.ts:6行目**: `plugins: [react(), tailwindcss()]`でReactプラグインとTailwind CSSプラグインを登録
- **@tailwindcss-vite/src/index.ts:1-11行目**: `compile`、`Scanner`等のコア依存をインポート
- **@tailwindcss-vite/src/index.ts:36行目**: `tailwindcss()`関数がViteプラグイン配列を返却

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

```
index.html
    |
    +-- main.tsx (script type="module")
           |
           +-- import './index.css'
           |       |
           |       +-- @tailwindcss/vite プラグイン
           |               |
           |               +-- compile() [packages/tailwindcss/src/index.ts]
           |               |       |
           |               |       +-- substituteAtImports() [@importの解決]
           |               |       +-- compileCandidates() [候補クラスのコンパイル]
           |               |
           |               +-- Scanner [packages/@tailwindcss-oxide]
           |               |       +-- ソースファイルのスキャン
           |               |
           |               +-- Extractor [packages/@tailwindcss-oxide]
           |                       +-- 候補クラス名の抽出
           |
           +-- import { App } from './app'
           |
           +-- ReactDOM.createRoot()
                   +-- <React.StrictMode>
                           +-- <App />
```

### データフロー図

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

index.html          ------>  ブラウザHTMLパース          ------>  DOMツリー
main.tsx            ------>  Viteモジュール解決           ------>  ESモジュールバンドル
index.css           ------>  @tailwindcss/vite            ------>  コンパイル済みCSS
  (@import                     |
   'tailwindcss')              +-> compile()
                               +-> Scanner/Extractor
                               +-> substituteAtImports()
app.tsx             ------>  Reactレンダリング            ------>  HTML DOM
  (className属性)                                                  (スタイル適用済み)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.html | `playgrounds/vite/src/index.html` | テンプレート | HTMLエントリポイント。Reactマウントポイントを提供 |
| main.tsx | `playgrounds/vite/src/main.tsx` | ソース | Reactアプリケーションのブートストラップ。CSSインポートとReactDOMマウント |
| app.tsx | `playgrounds/vite/src/app.tsx` | ソース | UIコンポーネント。Tailwind CSSクラスを使用した表示要素 |
| index.css | `playgrounds/vite/src/index.css` | スタイル | Tailwind CSSのエントリポイント。`@import 'tailwindcss'`を記述 |
| vite.config.ts | `playgrounds/vite/vite.config.ts` | 設定 | Viteビルド設定。@tailwindcss/viteプラグインの登録 |
| package.json | `playgrounds/vite/package.json` | 設定 | 依存関係定義。tailwindcss、@tailwindcss/vite等のworkspace参照 |
| index.ts | `packages/@tailwindcss-vite/src/index.ts` | ソース | @tailwindcss/viteプラグイン実装 |
| index.ts | `packages/tailwindcss/src/index.ts` | ソース | Tailwind CSSコアのcompile関数等 |
