# バッチ設計書 24-e2e-vue-cli

## 概要

本ドキュメントは、BabelプロジェクトにおけるVue CLIフレームワークとのE2Eテストバッチ（e2e-vue-cli）の設計仕様を記載する。

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

このバッチは、Vue.js公式のvuejs/vue-cliリポジトリをクローンし、Babelの最新パッケージと統合テストを実行することで、Vue.js開発環境との互換性を検証する。

**業務上の目的・背景**：Vue CLIは、Vue.jsアプリケーションの標準的な開発ツールであり、Babelを内部で使用している。Babelの新バージョンがVue CLIと互換性を持つことは、Vue.js開発者コミュニティにとって重要である。本バッチは、Vue CLIリポジトリをクローンしてBabel依存関係を更新し、関連パッケージ（babel、babel-preset-app）のテストを実行することで、互換性の問題を検出する。

**バッチの実行タイミング**：GitHub Actionsワークフローにおいて、e2e-publishジョブ完了後に実行可能。ただし、現在はコメントアウトされており、手動でのテストが必要な状態。

**主要な処理内容**：
1. Vue CLIリポジトリをクローン（depth=1）
2. Yarn 1を強制使用（YARN_IGNORE_PATH=1）
3. Lernaで全パッケージのresolutionsをバンプ
4. Babel 8互換性調整（decorators、jest-hoist、regenerator-runtime）
5. ローカルVerdaccioレジストリを起動
6. 依存関係をインストール
7. babel、babel-preset-appパッケージのテストを実行

**前後の処理との関連**：e2e-publishバッチで作成されたverdaccio-workspaceアーティファクトに依存する。現在ワークフローではコメントアウトされている。

**影響範囲**：一時ディレクトリ（tmp/vue-cli）、テスト結果。本番環境やnpmレジストリには影響しない。

## バッチ種別

E2Eテスト / フレームワーク統合テスト

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | 現在無効化（コメントアウト） |
| 実行時刻 | 該当なし |
| 実行曜日 | 該当なし |
| 実行日 | 該当なし |
| トリガー | 手動実行（スクリプト直接実行） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| e2e-publishジョブ完了 | verdaccio-workspaceが利用可能であること |
| Node.js環境 | Node.jsがインストールされていること |
| Yarn 1 | Yarn 1が利用可能であること（Yarn 2は不可） |
| Lerna | Lernaがグローバルまたはローカルで利用可能 |
| Git | Gitがインストールされていること |

### 実行可否判定

- 現在GitHub Actionsではコメントアウトされている
- 手動で./scripts/integration-tests/e2e-vue-cli.shを実行可能

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| - | - | - | - | パラメータなし |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| verdaccio-workspace | ディレクトリ | 公開済みBabelパッケージ |
| vuejs/vue-cli | Git | Vue CLIリポジトリ（最新コミット） |
| verdaccio-config.yml | YAML | Verdaccioレジストリ設定ファイル |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| テスト結果 | 標準出力 | Vue CLIテストスイート実行結果 |
| 一時ディレクトリ | ディレクトリ | tmp/vue-cli |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | テスト実行ログ |
| 出力先 | 標準出力 |
| 文字コード | UTF-8 |
| 区切り文字 | 該当なし |

## 処理フロー

### 処理シーケンス

```
1. Vue CLIリポジトリクローン
   └─ git clone --depth=1 https://github.com/vuejs/vue-cli
2. Yarn 1強制使用設定
   └─ export YARN_IGNORE_PATH=1
3. Verdaccio起動
   └─ startLocalRegistry
4. 依存関係インストール（初回）
   └─ yarn install --ignore-engines
5. resolutionsバンプ（ルート）
   └─ node bump-babel-dependencies.js resolutions
6. resolutionsバンプ（全パッケージ）
   └─ yarn lerna exec -- node bump-babel-dependencies.js resolutions
7. 依存関係インストール（2回目）
   └─ yarn install --ignore-engines
8. Babel 8互換性調整
   └─ sedでdecorators、jest-hoist、regenerator-runtime調整
9. テスト実行
   └─ CI=true yarn test -p babel,babel-preset-app
10. クリーンアップ
    └─ unset YARN_IGNORE_PATH && cleanup
```

### フローチャート

```mermaid
flowchart TD
    A[バッチ開始] --> B[Vue CLIリポジトリクローン]
    B --> C[YARN_IGNORE_PATH=1設定]
    C --> D[Verdaccio起動]
    D --> E[yarn install --ignore-engines]
    E --> F[resolutionsバンプ]
    F --> G[lerna exec resolutionsバンプ]
    G --> H[yarn install --ignore-engines]
    H --> I[Babel 8互換性調整]
    I --> J{Node.js v17?}
    J -->|Yes| K[NODE_OPTIONS設定]
    J -->|No| L[テスト実行]
    K --> L
    L --> M{テスト成功?}
    M -->|Yes| N[クリーンアップ]
    M -->|No| O[エラーログ出力]
    O --> N
    N --> P[バッチ終了]
```

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

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

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

| 処理 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| - | - | - | データベース操作なし |

### テーブル別操作詳細

該当なし

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| ERR_CLONE | クローンエラー | Vue CLIリポジトリクローン失敗 | ネットワーク接続を確認 |
| ERR_YARN | 依存関係エラー | yarn install失敗 | --ignore-enginesオプションを確認 |
| ERR_LERNA | Lernaエラー | lerna exec失敗 | Lernaバージョンを確認 |
| ERR_VERDACCIO | レジストリエラー | Verdaccio起動失敗 | ポート4873の使用状況を確認 |
| ERR_TEST | テストエラー | Vue CLIテスト失敗 | テストログを確認 |
| ERR_WEBPACK | Webpackエラー | Node.js 17でのSSL問題 | NODE_OPTIONS=--openssl-legacy-provider設定 |

### リトライ仕様

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

### 障害時対応

1. ログを確認し、エラー発生箇所を特定
2. Yarn 1が使用されていることを確認
3. Node.js 17の場合、NODE_OPTIONS設定を確認
4. Vue CLIリポジトリの最新変更でBabel非互換がないか確認

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

| 項目 | 内容 |
|-----|------|
| トランザクション範囲 | 該当なし |
| コミットタイミング | - |
| ロールバック条件 | エラー発生時はcleanup関数でクリーンアップ |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | babel、babel-preset-appパッケージのテスト |
| 目標処理時間 | 15分以内 |
| メモリ使用量上限 | 標準ランナーの制限内 |

## 排他制御

- 同一ランナー内での重複実行は不可

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| 開始ログ | バッチ開始時 | スクリプト実行開始 |
| 進捗ログ | 処理中 | 各コマンドの実行内容（set -xによるトレース） |
| テストログ | テスト中 | Jest出力 |
| 終了ログ | バッチ終了時 | "Exiting without error." |
| エラーログ | エラー発生時 | エラー詳細 |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| ジョブ失敗 | 失敗時 | 手動確認 |

## 備考

- 現在GitHub Actionsワークフローではコメントアウトされている（# - vue-cli）
- Yarn 2では動作しないため、YARN_IGNORE_PATH=1を設定してYarn 1を強制使用
- Node.js 17以降ではWebpackの問題があり、NODE_OPTIONS=--openssl-legacy-providerが必要な場合がある
- Babel 8互換性調整：
  - decorators: legacy: trueをversion: "2023-11"に変更
  - jest-hoist: blacklistをdenylistに変更
  - regenerator-runtime: @babel/runtime/helpers/regeneratorに変更
- --ignore-enginesオプションはvue-cliのlockfileがeslint-import-resolver-webpack@0.13.2に更新されるまで必要
