# バッチ設計書 8-verify-treeshaking.js

## 概要

本ドキュメントは、Vue.jsプロジェクトのtree-shaking検証スクリプト `scripts/verify-treeshaking.js` の設計仕様を定義するバッチ設計書である。

### 本バッチの処理概要

本バッチは、プロダクションビルドのtree-shakingが正しく機能しているかを検証するスクリプトである。開発用ビルドとプロダクション用ビルドの成果物を解析し、プロダクションビルドに含まれるべきでないコードが残留していないかをチェックする。

**業務上の目的・背景**：Vue.jsはtree-shakingを活用してエンドユーザーのバンドルサイズを最小化することを重要視している。しかし、開発時のみ必要なコード（警告メッセージ、esbuildヘルパー、DOMタグ設定リスト等）がプロダクションビルドに残留すると、不要なバンドルサイズ増加を招く。本バッチは、これらの典型的なtree-shaking漏れパターンを自動検出し、コード品質を保証する。

**バッチの実行タイミング**：CI/CDパイプライン内、またはビルド後に手動で実行される。ビルド成果物の検証が目的であるため、`build.js` によるビルド完了後に実行する。

**主要な処理内容**：
1. `pnpm build vue -f global-runtime` でVueのグローバルランタイムビルドを生成
2. 開発用ビルド（`vue.runtime.global.js`）でesbuildオブジェクトスプレッドヘルパー（`__spreadValues`）の残留チェック
3. プロダクション用ビルド（`vue.runtime.global.prod.js`）で以下の3項目をチェック：
   - `Vue warn` 文字列の残留（`__DEV__` ガード漏れ）
   - `html,body,base` 等のDOMタグリスト残留（コンパイラ専用コードの混入）
   - `svg,animate,animateMotion` 等のSVGタグリスト残留
   - `annotation,annotation-xml,maction` 等のMathMLタグリスト残留

**前後の処理との関連**：本バッチは内部で `scripts/utils.js` の `exec` 関数を使用して `pnpm build` を実行する。ビルド対象は `vue` パッケージの `global-runtime` 形式に限定される。

**影響範囲**：検証に失敗した場合、エラーをスローしてプロセスが終了する。ファイルシステムへの変更はビルド実行に伴う `packages/vue/dist/` への書き込みのみ。

## バッチ種別

検証処理

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | ビルド後・CI/CDパイプライン内 |
| 実行時刻 | - |
| 実行曜日 | - |
| 実行日 | - |
| トリガー | 手動実行 / CI/CDパイプライン |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| Node.js実行環境 | Node.jsがインストールされていること |
| pnpm依存関係 | 依存パッケージがインストール済みであること |
| packagesディレクトリ | `packages/vue/` が存在すること |

### 実行可否判定

特別な事前判定なし。内部で `pnpm build vue -f global-runtime` を実行してビルド成果物を生成するため、ビルドが成功すれば検証が実行される。

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| - | - | - | - | コマンドライン引数なし |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| packages/vue/dist/vue.runtime.global.js | JavaScript | 開発用ビルド成果物（内部でビルド生成） |
| packages/vue/dist/vue.runtime.global.prod.js | JavaScript | プロダクション用ビルド成果物（内部でビルド生成） |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| プロセス終了コード | 数値 | 成功時: 0（暗黙）、失敗時: エラースロー |
| 標準エラー出力 | テキスト | 検証失敗時のエラーメッセージ |

### 出力ファイル仕様

本バッチは検証目的のファイル出力を行わない（ビルド成果物は副次的に生成される）。

## 処理フロー

### 処理シーケンス

```
1. ビルド実行
   └─ exec('pnpm', ['build', 'vue', '-f', 'global-runtime']) を実行
2. 開発用ビルドの検証
   └─ vue.runtime.global.js を読み込み
   └─ '__spreadValues' が含まれていないか確認
       └─ 含まれている場合: { ...obj } 構文の使用を検出 → extend ヘルパーの使用を推奨
3. プロダクション用ビルドの検証
   └─ vue.runtime.global.prod.js を読み込み
   3.1 'Vue warn' 文字列の残留チェック
       └─ 含まれている場合: warn() の __DEV__ ガード漏れを検出
   3.2 'html,body,base' 文字列の残留チェック
       └─ 含まれている場合: domTagConfig リストのランタイム残留を検出
   3.3 'svg,animate,animateMotion' 文字列の残留チェック
       └─ 同上
   3.4 'annotation,annotation-xml,maction' 文字列の残留チェック
       └─ 同上
4. エラー集約
   └─ 検出されたエラーを配列に蓄積
   └─ 1件以上のエラーがある場合、全エラーを結合してErrorをスロー
```

### フローチャート

```mermaid
flowchart TD
    A[バッチ開始] --> B[pnpm build vue -f global-runtime]
    B --> C[devビルド読み込み]
    C --> D{__spreadValues残留?}
    D -->|Yes| E[エラー追加: esbuildヘルパー残留]
    D -->|No| F[prodビルド読み込み]
    E --> F
    F --> G{Vue warn残留?}
    G -->|Yes| H[エラー追加: warn()ガード漏れ]
    G -->|No| I{domTagConfig残留?}
    H --> I
    I -->|Yes| J[エラー追加: コンパイラ専用コード混入]
    I -->|No| K{エラーあり?}
    J --> K
    K -->|Yes| L[エラースロー]
    K -->|No| M[正常終了]
```

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

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

本バッチはデータベース操作を行わない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | esbuildヘルパー残留 | devビルドに `__spreadValues` が含まれている | `{ ...obj }` 構文を `extend` ヘルパーに置換 |
| - | warn()ガード漏れ | prodビルドに `Vue warn` が含まれている | warn()呼び出しを `__DEV__` 条件で囲む |
| - | domTagConfig残留 | prodビルドにHTMLタグリストが含まれている | isHTMLTag()等のヘルパーをコンパイラ専用コードに移動 |
| - | ビルドエラー | pnpm buildが失敗 | ビルドエラーの原因を修正して再実行 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | リトライ機構なし |
| リトライ間隔 | - |
| リトライ対象エラー | - |

### 障害時対応

検証エラーが発生した場合、エラーメッセージに具体的な問題と修正方法が記載される。対象のソースコードを修正し、再ビルド後に本バッチを再実行して検証する。

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

| 項目 | 内容 |
|-----|------|
| トランザクション範囲 | - |
| コミットタイミング | - |
| ロールバック条件 | 検証のみのため不要 |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | 2ファイル（dev/prodビルド成果物） |
| 目標処理時間 | ビルド時間 + ファイル読み込み（秒単位） |
| メモリ使用量上限 | 明示的な制限なし |

## 排他制御

build.jsによるビルドと同時実行された場合、ビルド成果物の整合性が保証されない可能性がある。本バッチ内でビルドを実行するため、外部との排他制御は不要。

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| エラーログ | 検証失敗時 | tree-shakingエラーの詳細と修正方法 |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| tree-shakingエラー | 1件以上 | Errorスローにより呼び出し元が検知 |

## 備考

- 検証対象は `vue` パッケージの `global-runtime` 形式のビルドのみ
- 3種類のtree-shaking漏れパターンを検出：
  1. esbuildのオブジェクトスプレッドヘルパー残留（`__spreadValues`）→ `extend` ヘルパーの使用を推奨
  2. 警告コードの `__DEV__` ガード漏れ（`Vue warn`）→ 条件分岐による除外が必要
  3. DOMタグ設定リストのランタイム残留（`html,body,base` 等）→ コンパイラ専用コードの分離が必要
- 複数のエラーが同時に検出された場合、全エラーが結合されて1つのErrorとしてスローされる
- 本バッチは内部でビルドを実行するため、単体で実行可能（事前ビルド不要）
