# 機能設計書 56-compileTemplate()

## 概要

本ドキュメントは、@vue/compiler-sfcパッケージにおけるcompileTemplate()関数の処理について記述する。SFCの`<template>`ブロックをレンダリング関数のJavaScriptコードにコンパイルし、コンパイラオプションの統合、アセットURL変換、ソースマップマッピングを行う。

### 本機能の処理概要

compileTemplate()は、SFCのテンプレートブロックのソースコードまたは事前解析済みASTを受け取り、@vue/compiler-domまたは@vue/compiler-ssrを使用してレンダリング関数のJavaScriptコードを生成する。テンプレートプリプロセッサ（Pug等）のサポート、アセットURL変換、スコープID設定、ソースマップの統合も担う。

**業務上の目的・背景**：Vueのテンプレート構文はHTML-likeな宣言的記法であり、ランタイムで実行するにはJavaScriptのレンダリング関数に変換する必要がある。compileTemplate()はSFCコンパイルパイプラインの一部として、テンプレートコンパイルに必要なすべてのオプションを統合し、ビルドツールとの連携を容易にする。

**機能の利用シーン**：SFCビルド時にparse()→compileScript()の後に呼び出される。compileScript()のインラインテンプレートモードからも呼び出される。開発時のHMRにおいてテンプレート変更時に再コンパイルが実行される。

**主要な処理内容**：
1. テンプレートプリプロセッサの実行（Pug、Haml等）
2. アセットURL変換（img src等のインポート変換）
3. srcset変換
4. SSR/クライアント側コンパイラの選択
5. コンパイラオプションの統合（scopeId、slotted、hoistStatic、cacheHandlers等）
6. テンプレートAST再利用（事前解析済みASTの活用）
7. ソースマップの統合（parse時のマップとコンパイル時のマップのマージ）
8. エラー位置情報の補正

**関連システム・外部連携**：@vue/compiler-domによるクライアント側コンパイル。@vue/compiler-ssrによるSSR向けコンパイル。@vue/consolidateによるテンプレートプリプロセッサ統合。source-map-jsによるソースマップマージ。

**権限による制御**：該当なし（コンパイル時処理）

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | App（メイン画面） | API連携 | @vue/replコンポーネントを介した`<template>`ブロックのコンパイル |

## 機能種別

テンプレートコンパイル処理

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| options.source | string | Yes | テンプレートのソースコード | - |
| options.ast | RootNode | No | 事前解析済みAST（parse()で生成） | - |
| options.filename | string | Yes | ファイル名 | - |
| options.id | string | Yes | スコープID（scopeId生成用） | - |
| options.scoped | boolean | No | スコープ付きスタイルの有無 | - |
| options.slotted | boolean | No | :slotted()使用の有無 | - |
| options.isProd | boolean | No | プロダクションモード | デフォルト: false |
| options.ssr | boolean | No | SSRモード | デフォルト: false |
| options.ssrCssVars | string[] | No | SSR用CSS変数 | - |
| options.inMap | RawSourceMap | No | 入力ソースマップ（parse時生成） | - |
| options.compiler | TemplateCompiler | No | カスタムコンパイラ | - |
| options.compilerOptions | CompilerOptions | No | コンパイラオプション | - |
| options.preprocessLang | string | No | プリプロセッサ言語 | - |
| options.preprocessOptions | any | No | プリプロセッサオプション | - |
| options.transformAssetUrls | AssetURLOptions \| boolean | No | アセットURL変換設定 | - |

### 入力データソース

parse()により生成されたSFCDescriptor.templateブロックの情報。

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| code | string | 生成されたレンダリング関数のJavaScriptコード |
| ast | RootNode | 変換済みAST（オプション） |
| preamble | string | モジュールスコープのプリアンブルコード |
| source | string | 元のテンプレートソース |
| tips | string[] | 警告メッセージの配列 |
| errors | (string \| CompilerError)[] | コンパイルエラーの配列 |
| map | RawSourceMap | ソースマップ |

### 出力先

SFCTemplateCompileResultsとして返却される。ビルドツールがモジュールコードとして出力する。

## 処理フロー

### 処理シーケンス

```
1. プリプロセッサの処理
   └─ preprocessLangが指定されている場合
      - preprocessCustomRequireまたはconsolidateからプリプロセッサを取得
      - preprocess()でテンプレートを事前変換
      - ASTを無効化（プリプロセッサ通過後は再利用不可）

2. doCompileTemplateの呼び出し
   └─ アセットURL変換のnodeTransformsを構築
   └─ ssrCssVarsの警告チェック
   └─ idの警告チェック

3. コンパイラの選択
   └─ SSRモード: CompilerSSRを使用
   └─ クライアント側: CompilerDOMを使用
   └─ カスタムコンパイラ指定時: そちらを使用（AST再利用不可）

4. AST再利用の判定
   └─ 事前解析済みASTがtransformed=trueの場合: 再パースが必要
   └─ カスタムコンパイラの場合: AST再利用不可

5. compiler.compile()の呼び出し
   └─ mode: 'module'
   └─ prefixIdentifiers: true
   └─ hoistStatic: true
   └─ cacheHandlers: true
   └─ scopeId: scoped ? longId : undefined
   └─ hmr: !isProd

6. ソースマップの統合
   └─ inMapが存在する場合: mapLines()で元のSFCの行番号にマッピング
   └─ エラー位置情報もpatchErrors()で補正

7. 警告のフォーマット
   └─ generateCodeFrameでソース位置表示を付加

8. 結果の返却
```

### フローチャート

```mermaid
flowchart TD
    A[開始: compileTemplate] --> B{プリプロセッサあり?}
    B -->|Yes| C[preprocess実行]
    B -->|No| D[doCompileTemplate]
    C --> D
    D --> E[nodeTransforms構築]
    E --> F{SSRモード?}
    F -->|Yes| G[CompilerSSR選択]
    F -->|No| H[CompilerDOM選択]
    G --> I{AST再利用可?}
    H --> I
    I -->|Yes| J[AST使用]
    I -->|No| K[ソース使用]
    J --> L[compiler.compile実行]
    K --> L
    L --> M{inMapあり?}
    M -->|Yes| N[mapLinesでマージ]
    M -->|No| O[結果返却]
    N --> O
    O --> P[終了]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-56-01 | SSRコンパイラ切替 | SSRモードではCompilerSSRが使用される | options.ssr === true |
| BR-56-02 | AST再利用制限 | transformed=trueのASTは再パースが必要 | inAST?.transformed === true |
| BR-56-03 | カスタムコンパイラAST | カスタムコンパイラ使用時はAST再利用不可 | compiler !== defaultCompiler |
| BR-56-04 | ブラウザプリプロセッサ | ブラウザビルドではpreprocessCustomRequireが必須 | __ESM_BROWSER__ && preprocessLang |
| BR-56-05 | scopeIdフォーマット | scopeIdは'data-v-'プレフィックス付きのフルフォーマット | scoped === true |

### 計算ロジック

scopeId生成:
- `shortId = id.replace(/^data-v-/, '')`
- `longId = 'data-v-' + shortId`
- scoped === true の場合のみscopeIdを設定

## データベース操作仕様

該当なし（コンパイル時処理）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | Error | ブラウザビルドでpreprocessCustomRequire未指定 | preprocessCustomRequireオプションを提供する |
| - | CompilerError | テンプレート構文エラー | テンプレートの構文を修正する |
| - | Error | プリプロセッサが未インストール | 対応するプリプロセッサをインストールする |

### リトライ仕様

該当なし

## トランザクション仕様

該当なし（コンパイル時処理）

## パフォーマンス要件

- 事前解析済みAST（parse()で生成）の再利用により、テンプレートの再パースを回避
- hoistStatic/cacheHandlersの有効化により、ランタイムパフォーマンスを最適化
- HMRモード（hmr: !isProd）により、開発時のホットリロードを効率化

## セキュリティ考慮事項

該当なし（コンパイル時処理）

## 備考

- SSRモードでssrCssVarsが未指定の場合は警告が出力される
- idが未指定の場合も警告が出力される（後方互換のため空文字列で続行）
- mapLines()はparse時のソースマップとコンパイル時のソースマップをマージし、最終的なソースマップが元のSFCファイルの行番号を正しく指すようにする

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | compileTemplate.ts | `packages/compiler-sfc/src/compileTemplate.ts` | TemplateCompiler、SFCTemplateCompileResults、SFCTemplateCompileOptions型定義 |

**読解のコツ**: TemplateCompilerインターフェースはcompile()とparse()の2メソッドを持ち、@vue/compiler-domと@vue/compiler-ssrの両方がこのインターフェースを満たす。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | compileTemplate.ts | `packages/compiler-sfc/src/compileTemplate.ts` | compileTemplate()関数 |

**主要処理フロー**:
1. **107-109行目**: compileTemplate関数の開始
2. **112-122行目**: ブラウザビルドでのプリプロセッサチェック
3. **124-145行目**: プリプロセッサの取得と実行
4. **157-159行目**: プリプロセッサなしの場合はdoCompileTemplateを直接呼び出し

#### Step 3: doCompileTemplate関数の詳細

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | compileTemplate.ts | `packages/compiler-sfc/src/compileTemplate.ts` | doCompileTemplate関数 |

**主要処理フロー**:
- **162-176行目**: パラメータのデストラクチャリング
- **180-189行目**: アセットURL変換のnodeTransforms構築
- **191-199行目**: ssrCssVars/id警告チェック
- **202-203行目**: shortId/longId計算
- **205-206行目**: コンパイラ選択（SSR/DOM）
- **214-228行目**: AST再利用判定と必要に応じた再パース
- **230-248行目**: compiler.compile()呼び出しと全オプション指定
- **253-260行目**: ソースマップ統合とエラー位置補正
- **262-274行目**: 警告のフォーマットと結果返却

#### Step 4: ソースマップ統合

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | compileTemplate.ts | `packages/compiler-sfc/src/compileTemplate.ts` | mapLines、patchErrors関数 |

**主要処理フロー**:
- **277-328行目**: mapLines - SourceMapConsumer/Generatorによる2つのソースマップのマージ
- **330-348行目**: patchErrors - エラー位置情報のオフセット補正

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

```
compileTemplate (エントリーポイント)
    │
    ├─ preprocess (テンプレートプリプロセッサ)
    │      └─ consolidate[preprocessLang]
    │
    └─ doCompileTemplate
           │
           ├─ createAssetUrlTransformWithOptions
           ├─ createSrcsetTransformWithOptions
           │
           ├─ compiler.parse (AST再パース時)
           │
           ├─ compiler.compile
           │      └─ @vue/compiler-dom または @vue/compiler-ssr
           │
           ├─ mapLines (ソースマップマージ)
           │      ├─ SourceMapConsumer
           │      └─ SourceMapGenerator
           │
           └─ patchErrors (エラー位置補正)
```

### データフロー図

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

テンプレートソース   ───▶ compileTemplate          ───▶ SFCTemplateCompileResults
(+ AST)                   │                            ├─ code (JS)
                         ├─ プリプロセッサ             ├─ ast
                         │   Pug → HTML               ├─ preamble
                         │                            ├─ source
                         ├─ compiler.compile           ├─ tips
                         │   テンプレート → JS         ├─ errors
                         │                            └─ map
                         └─ ソースマップマージ
                             inMap + compileMap
                             → 統合ソースマップ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| compileTemplate.ts | `packages/compiler-sfc/src/compileTemplate.ts` | ソース | テンプレートコンパイラのメイン実装 |
| transformAssetUrl.ts | `packages/compiler-sfc/src/template/transformAssetUrl.ts` | ソース | アセットURL変換 |
| transformSrcset.ts | `packages/compiler-sfc/src/template/transformSrcset.ts` | ソース | srcset変換 |
| cssVars.ts | `packages/compiler-sfc/src/style/cssVars.ts` | ソース | genCssVarsFromList（SSR用CSS変数） |
| warn.ts | `packages/compiler-sfc/src/warn.ts` | ソース | warnOnce関数 |
| index.ts | `packages/compiler-dom/src/index.ts` | ソース | CompilerDOMの実装 |
| index.ts | `packages/compiler-ssr/src/index.ts` | ソース | CompilerSSRの実装 |
