# 画面設計書 5-Options Panel（コンパイルオプション）

## 概要

本ドキュメントは、Template Explorer のコンパイラオプション設定パネル（options.ts）の画面設計書である。Vue テンプレートコンパイラの各種オプションをラジオボタン・チェックボックスで設定するUI を提供する。h() レンダリング関数で動的にUIを構築し、リアクティブなオプション変更によりテンプレートの自動再コンパイルをトリガーする。

### 本画面の処理概要

**業務上の目的・背景**：Vue テンプレートコンパイラには多数のオプションが存在し、それぞれが生成されるレンダリング関数のコードに影響を与える。本オプションパネルは、開発者がこれらのオプションを画面上で直感的に切り替えながら、コンパイル結果への影響をリアルタイムに確認できるようにする。コンパイラの動作を理解するための学習ツールとして、またコンパイラ開発時のデバッグツールとして活用される。

**画面へのアクセス方法**：Template Explorer のメイン画面（index.html）にアクセスすると、init 関数内で `initOptions()` が呼ばれ、#header 要素にオプションパネルがマウントされる。タイトルとリンクの下部に "Options" ラベルとともに表示される。

**主要な操作・処理内容**：
1. Mode の選択（module / function）- ラジオボタン
2. Whitespace の選択（condense / preserve）- ラジオボタン
3. SSR モードの切替 - チェックボックス
4. prefixIdentifiers の切替 - チェックボックス（module/SSR時は自動有効化）
5. hoistStatic の切替 - チェックボックス（SSR時は無効化）
6. cacheHandlers の切替 - チェックボックス（prefix無効/SSR時は無効化）
7. scopeId の切替 - チェックボックス（module時のみ有効）
8. inline の切替 - チェックボックス
9. v2 compat mode の切替 - チェックボックス

**画面遷移**：本コンポーネントは画面遷移を伴わない。Header 領域内のインライン要素として表示される。タイトル横のGitHubコミットリンクとNetlifyデプロイ履歴リンクは外部サイトを新規タブで開く。

**権限による表示制御**：権限による表示制御は存在しない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | ref() | 主機能 | ssrMode（SSRモード切り替え）のリアクティブ管理 |
| 2 | reactive() | 主機能 | compilerOptions（mode/whitespace/hoistStatic等）のリアクティブオブジェクト管理 |
| 10 | createApp() | 主機能 | オプションパネルの Vue アプリケーションインスタンス生成（#headerにマウント） |
| 28 | h() | 主機能 | レンダリング関数によるラジオボタン・チェックボックス群のUI構築 |
| 44 | テンプレート解析（Parser） | API連携 | コンパイルオプション変更時のテンプレート再解析トリガー |
| 45 | コード生成（Codegen） | API連携 | コンパイルオプション変更に基づくコード再生成トリガー |
| 58 | @vue/compiler-ssr | API連携 | SSRモード有効時のサーバーサイドレンダリング向けコンパイル切り替え |

## 画面種別

設定パネル（インラインコンポーネント）

## URL/ルーティング

本コンポーネントは個別の URL/ルーティングを持たない。Template Explorer の #header 要素にマウントされる。

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | 初期値 |
|--------|----------|---------|------|--------|
| ssrMode | 入出力 (ref) | boolean | SSR モードの有効/無効 | false |
| compilerOptions.mode | 入出力 (reactive) | 'module' \| 'function' | コンパイルモード | 'module' |
| compilerOptions.whitespace | 入出力 (reactive) | 'condense' \| 'preserve' | 空白文字処理モード | 'condense' |
| compilerOptions.prefixIdentifiers | 入出力 (reactive) | boolean | 識別子プレフィックス付与 | false |
| compilerOptions.hoistStatic | 入出力 (reactive) | boolean | 静的ノードのホイスティング | false |
| compilerOptions.cacheHandlers | 入出力 (reactive) | boolean | イベントハンドラキャッシング | false |
| compilerOptions.scopeId | 入出力 (reactive) | string \| null | スコープ付きCSS用ID | null |
| compilerOptions.inline | 入出力 (reactive) | boolean | インラインモード | false |
| compilerOptions.compatConfig.MODE | 入出力 (reactive) | 2 \| 3 | 互換モード（Vue 2/3） | 3 |
| compilerOptions.filename | 設定値 (reactive) | string | ファイル名 | 'Foo.vue' |
| compilerOptions.ssrCssVars | 設定値 (reactive) | string | SSR CSS変数式 | `{ color }` |
| compilerOptions.bindingMetadata | 設定値 (reactive) | Record | バインディングメタデータ | テスト用定義 |

## 表示項目

| 項目名 | 表示領域 | データソース | 説明 |
|--------|---------|-------------|------|
| タイトル | ヘッダー上部 | 固定文字列 | "Vue 3 Template Explorer"（h1要素） |
| コミットリンク | タイトル右 | __COMMIT__ | `@{コミットハッシュ}` 形式の GitHub リンク |
| History リンク | コミットリンク右 | 固定URL | Netlify デプロイ履歴リンク |
| Options ラベル | オプション領域 | 固定文字列 | "Options" + 下矢印マーク |
| Mode ラジオボタン | Options 内 | compilerOptions.mode | module / function の選択 |
| Whitespace ラジオボタン | Options 内 | compilerOptions.whitespace | condense / preserve の選択 |
| SSR チェックボックス | Options 内 | ssrMode | SSR モード切替 |
| prefixIdentifiers チェックボックス | Options 内 | compilerOptions.prefixIdentifiers | module/SSR 時は disabled かつ自動 checked |
| hoistStatic チェックボックス | Options 内 | compilerOptions.hoistStatic | SSR 時は disabled |
| cacheHandlers チェックボックス | Options 内 | compilerOptions.cacheHandlers | prefix 無効 or SSR 時は disabled |
| scopeId チェックボックス | Options 内 | compilerOptions.scopeId | module 以外は disabled |
| inline チェックボックス | Options 内 | compilerOptions.inline | インラインモード切替 |
| v2 compat mode チェックボックス | Options 内 | compilerOptions.compatConfig.MODE | Vue 2 互換モード切替 |

## イベント仕様

### 1-Mode 選択（module / function）

ラジオボタンの onChange イベント（67-88行目）:
- **module 選択時**: `compilerOptions.mode = 'module'`（73行目）
- **function 選択時**: `compilerOptions.mode = 'function'`（84行目）

mode 変更はリアクティブに検知され、以下の副作用が発生:
- `isModule` 算出値の変更（37行目）
- `usePrefix` 算出値の変更（38-39行目）
- prefixIdentifiers, scopeId 等の disabled/checked 状態に影響

### 2-Whitespace 選択（condense / preserve）

ラジオボタンの onChange イベント（91-114行目）:
- **condense 選択時**: `compilerOptions.whitespace = 'condense'`（99行目）
- **preserve 選択時**: `compilerOptions.whitespace = 'preserve'`（110行目）

### 3-SSR モード切替

チェックボックスの onChange イベント（117-128行目）:
- `ssrMode.value = (e.target as HTMLInputElement).checked`（124行目）

SSR モード変更の副作用:
- `isSSR` 算出値の変更（36行目）
- prefixIdentifiers が自動的に checked（SSR時は常にプレフィックス付与）
- hoistStatic が disabled（SSR時は無効化）
- cacheHandlers が disabled（SSR時は無効化）

### 4-prefixIdentifiers 切替

チェックボックスの onChange イベント（131-143行目）:
- `compilerOptions.prefixIdentifiers = checked || isModule`（138-139行目）
- module モードまたは SSR 時は disabled（135行目）
- module モードまたは SSR 時は自動的に checked（136行目）

### 5-hoistStatic 切替

チェックボックスの onChange イベント（146-159行目）:
- `compilerOptions.hoistStatic = checked`（153-155行目）
- SSR 時は disabled（151行目）
- SSR 時は unchecked 強制（150行目）

### 6-cacheHandlers 切替

チェックボックスの onChange イベント（162-175行目）:
- `compilerOptions.cacheHandlers = checked`（169-171行目）
- usePrefix が false または SSR 時は disabled（168行目）
- usePrefix かつ SSR でない場合のみ checked 可能（167行目）

### 7-scopeId 切替

チェックボックスの onChange イベント（178-192行目）:
- `compilerOptions.scopeId = isModule && checked ? 'scope-id' : null`（185-188行目）
- module 以外は disabled（182行目）
- module 時のみ checked 可能（183行目）

### 8-inline 切替

チェックボックスの onChange イベント（195-207行目）:
- `compilerOptions.inline = checked`（201-203行目）
- 常に有効（disabled なし）

### 9-v2 compat mode 切替

チェックボックスの onChange イベント（210-224行目）:
- `compilerOptions.compatConfig!.MODE = checked ? 2 : 3`（216-220行目）
- checked 時は MODE: 2（Vue 2 互換モード）、unchecked 時は MODE: 3（Vue 3 標準モード）

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

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

本コンポーネントはクライアントサイドのみで動作するため、データベースへのアクセスは発生しない。オプション値の変更はリアクティブシステムを通じて index.ts の watchEffect に伝播し、localStorage / URLハッシュに永続化される（永続化処理自体は index.ts の reCompile 関数が担当）。

| 操作（イベント） | 対象 | 操作種別 | 概要 |
|----------------|------|---------|------|
| オプション変更 | compilerOptions (reactive) | 更新 | リアクティブオブジェクトのプロパティ更新 |
| SSR 切替 | ssrMode (ref) | 更新 | ref 値の更新 |

## メッセージ仕様

本コンポーネント自体にメッセージ表示はない。オプション変更によるコンパイル結果のメッセージは index.ts（No.4 画面設計書）を参照。

## 例外処理

本コンポーネント自体に例外処理はない。オプション値は全て固定選択肢（ラジオボタン/チェックボックス）であるため、不正な値の入力は発生しない。

## 備考

- 本コンポーネントは Vue テンプレート（.vue ファイルの `<template>` セクション）を使用せず、setup 関数の戻り値として h() レンダリング関数で UI を構築している
- `createApp(App).mount(document.getElementById('header')!)` で #header 要素にマウントされる（232-233行目）
- defaultOptions オブジェクトはコンパイラオプションの初期値を定義しており、永続化状態の復元時に「デフォルトから変更された値のみ」を保存する基準として使用される
- bindingMetadata はテスト用のバインディング情報であり、TestComponent、setupRef、setupConst 等の仮想的なバインディングを定義している
- 各オプション間には依存関係があり、例えば module モードでは prefixIdentifiers が自動的に有効化され、SSR モードでは hoistStatic と cacheHandlers が無効化される

---

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

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

### 推奨読解順序

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

エクスポートされるリアクティブ状態と CompilerOptions 型の構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | options.ts | `packages-private/template-explorer/src/options.ts` | 5行目: ssrMode ref のエクスポート |
| 1-2 | options.ts | `packages-private/template-explorer/src/options.ts` | 7-27行目: defaultOptions の全プロパティと初期値 |
| 1-3 | options.ts | `packages-private/template-explorer/src/options.ts` | 29-31行目: compilerOptions リアクティブオブジェクトの生成（defaultOptions のコピー） |

**読解のコツ**: `CompilerOptions` は `@vue/compiler-dom` の型定義であるが、options.ts では実際に使用するプロパティのサブセットのみを設定している。`BindingTypes` 列挙型は `@vue/compiler-core` からインポートされており、SETUP_REF、SETUP_CONST、SETUP_LET、SETUP_MAYBE_REF、PROPS の5種類がバインディングメタデータで使用されている。

#### Step 2: UI構築パターンを理解する

h() レンダリング関数による UI 構築の全体構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | options.ts | `packages-private/template-explorer/src/options.ts` | 33-230行目: App コンポーネントの setup 関数。h() によるレンダリング関数の戻り値構造 |
| 2-2 | options.ts | `packages-private/template-explorer/src/options.ts` | 34-36行目: setup 内のレンダリング関数で isSSR, isModule, usePrefix を算出 |

**主要処理フロー**:
1. **34行目**: setup() の戻り値としてレンダリング関数を返す
2. **36-39行目**: リアクティブ値から isSSR, isModule, usePrefix を算出（レンダリング毎に再計算）
3. **41-227行目**: h() による仮想DOM ツリーの構築
   - h1 タイトル（42行目）
   - GitHub リンク（43-49行目）
   - Netlify History リンク（52-58行目）
   - Options パネル全体（61-226行目）: ul > li の構造で各オプションを配置

#### Step 3: オプション間の依存関係を理解する

各オプションの disabled / checked 状態の相互依存を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | options.ts | `packages-private/template-explorer/src/options.ts` | 131-143行目: prefixIdentifiers の module/SSR 依存 |
| 3-2 | options.ts | `packages-private/template-explorer/src/options.ts` | 146-159行目: hoistStatic の SSR 依存 |
| 3-3 | options.ts | `packages-private/template-explorer/src/options.ts` | 162-175行目: cacheHandlers の usePrefix/SSR 依存 |
| 3-4 | options.ts | `packages-private/template-explorer/src/options.ts` | 178-192行目: scopeId の module 依存 |

#### Step 4: 外部との連携を理解する

index.ts からの呼び出しと、リアクティブシステムによる再コンパイルトリガーの仕組みを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | options.ts | `packages-private/template-explorer/src/options.ts` | 232-234行目: initOptions 関数のエクスポートと #header へのマウント |
| 4-2 | index.ts | `packages-private/template-explorer/src/index.ts` | 9-13行目: options.ts からの compilerOptions, defaultOptions, initOptions, ssrMode のインポート |
| 4-3 | index.ts | `packages-private/template-explorer/src/index.ts` | 265-266行目: initOptions() 呼び出しと watchEffect(reCompile) による自動再コンパイル |

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

```
index.ts init()
    |
    +-- initOptions()  (options.ts 232行目)
    |       |
    |       +-- createApp(App).mount('#header')
    |               |
    |               +-- App.setup()
    |                       |
    |                       +-- return () => [  (レンダリング関数)
    |                               h('h1', 'Vue 3 Template Explorer')
    |                               h('a', { href: GitHub })
    |                               h('a', { href: Netlify })
    |                               h('div', { id: 'options-wrapper' }, [
    |                                   h('div', 'Options')
    |                                   h('ul', [
    |                                       h('li', Mode ラジオボタン)
    |                                       h('li', Whitespace ラジオボタン)
    |                                       h('li', SSR チェックボックス)
    |                                       h('li', prefixIdentifiers チェック)
    |                                       h('li', hoistStatic チェック)
    |                                       h('li', cacheHandlers チェック)
    |                                       h('li', scopeId チェック)
    |                                       h('li', inline チェック)
    |                                       h('li', v2 compat チェック)
    |                                   ])
    |                               ])
    |                           ]
    |
    +-- watchEffect(reCompile)
            |
            +-- compilerOptions / ssrMode の変更検知
            +-- reCompile() --> compileCode() --> Output 更新
```

### データフロー図

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

ラジオボタン onChange ──────> compilerOptions プロパティ更新 ─> reactive 変更通知
                             (mode / whitespace)

チェックボックス onChange ──> compilerOptions プロパティ更新 ─> reactive 変更通知
                             (hoistStatic / cacheHandlers
                              / scopeId / inline / compat)

SSR チェックボックス ───────> ssrMode.value 更新 ────────────> ref 変更通知
                                                              |
                                                              +-- 他オプションの
                                                                  disabled/checked 更新

reactive/ref 変更 ──────────> watchEffect 検知 ──────────────> reCompile() (index.ts)
                             (index.ts 266行目)                 |
                                                                +-- compile/ssrCompile
                                                                +-- Output Editor 更新
                                                                +-- localStorage 保存
                                                                +-- URLハッシュ更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| options.ts | `packages-private/template-explorer/src/options.ts` | ソース | オプションパネル本体。リアクティブ状態管理とUI構築 |
| index.ts | `packages-private/template-explorer/src/index.ts` | ソース | メインロジック。initOptions() を呼び出し、watchEffect で変更を監視 |
| index.html | `packages-private/template-explorer/index.html` | テンプレート | #header 要素を定義。Options Panel のマウント先 |
| @vue/compiler-dom | 外部パッケージ | 依存 | CompilerOptions 型定義の提供元 |
| @vue/compiler-core | 外部パッケージ | 依存 | BindingTypes 列挙型の提供元 |
