# バッチ設計書 23-e2e-create-react-app

## 概要

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

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

このバッチは、Facebook/Create React Appリポジトリをクローンし、Babelの最新パッケージと統合テストを実行することで、React開発環境との互換性を検証する。

**業務上の目的・背景**：Create React App（CRA）は、Reactアプリケーションの標準的なスキャフォールディングツールであり、内部でBabelを使用している。Babelの新バージョンがCRAと互換性を持つことは、React開発者コミュニティにとって極めて重要である。本バッチは、CRAリポジトリをクローンしてBabel依存関係を更新し、CRAのテストスイートを実行することで、互換性の問題を早期に検出する。

**バッチの実行タイミング**：GitHub Actionsワークフローにおいて、e2e-publishジョブ完了後に自動実行される。Node.js 22を使用（Node.js 24ではSSLエラーが発生するため）。

**主要な処理内容**：
1. Create React Appリポジトリをクローン（depth=1）
2. Babel 8対応: useBuiltIns: trueをruntime: "classic"に置換
3. 各パッケージのresolutionsでBabel依存関係をバンプ
4. ローカルVerdaccioレジストリを起動
5. jest-workerのresolutionを追加（CRAのlockfile問題回避）
6. npm install実行
7. CRAのテストスイートを実行

**前後の処理との関連**：e2e-publishバッチで作成されたverdaccio-workspaceアーティファクトに依存する。他のE2Eテストと並列実行される。

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

## バッチ種別

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

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | イベント駆動（push/プルリクエスト時） |
| 実行時刻 | 随時（e2e-publish完了後） |
| 実行曜日 | 該当なし |
| 実行日 | 該当なし |
| トリガー | GitHub Actions（needs: e2e-publish） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| e2e-publishジョブ完了 | verdaccio-workspaceアーティファクトが利用可能であること |
| Node.js 22 | Node.js 22がインストールされていること（24では不可） |
| npm | npmパッケージマネージャが利用可能であること |
| Git | Gitがインストールされていること |
| ネットワーク | GitHub.comおよびローカルVerdaccioへのアクセスが可能であること |

### 実行可否判定

- e2e-publishジョブが成功していること
- matrix.projectがcreate-react-appの場合に実行

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| matrix.project | string | Yes | create-react-app | テスト対象プロジェクト名 |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| verdaccio-workspace.tar | tar | 公開済みBabelパッケージのアーカイブ |
| facebook/create-react-app | Git | CRAリポジトリ（最新コミット） |
| verdaccio-config.yml | YAML | Verdaccioレジストリ設定ファイル |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| テスト結果 | 標準出力 | CRAテストスイート実行結果 |
| 一時ディレクトリ | ディレクトリ | tmp/create-react-app |

### 出力ファイル仕様

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

## 処理フロー

### 処理シーケンス

```
1. Create React Appリポジトリクローン
   └─ git clone --depth=1 https://github.com/facebook/create-react-app.git
2. Babel 8互換性調整
   └─ sedでuseBuiltIns: trueをruntime: "classic"に置換
3. resolutionsバンプ（ルート）
   └─ node bump-babel-dependencies.js resolutions
4. resolutionsバンプ（各パッケージ）
   └─ 全packages/*/で同様に実行
5. Verdaccio起動
   └─ startLocalRegistry
6. jest-worker resolution追加
   └─ package.jsonにresolutions追加
7. npm install（ignore-scripts）
   └─ npm install --ignore-scripts && npx npm-force-resolutions
8. npm install
   └─ npm install
9. テスト実行
   └─ CI=true npm run test
10. クリーンアップ
    └─ cleanup
```

### フローチャート

```mermaid
flowchart TD
    A[バッチ開始] --> B[CRAリポジトリクローン]
    B --> C[Babel 8互換性調整]
    C --> D[resolutionsバンプ]
    D --> E[Verdaccio起動]
    E --> F[jest-worker resolution追加]
    F --> G[npm install --ignore-scripts]
    G --> H[npm-force-resolutions]
    H --> I[npm install]
    I --> J[npm run test]
    J --> K{テスト成功?}
    K -->|Yes| L[クリーンアップ]
    K -->|No| M[エラーログ出力]
    M --> L
    L --> N[バッチ終了]
```

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

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

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

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

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

該当なし

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| ERR_CLONE | クローンエラー | CRAリポジトリクローン失敗 | ネットワーク接続を確認 |
| ERR_SSL | SSLエラー | Node.js 24使用時のSSL問題 | Node.js 22を使用 |
| ERR_VERDACCIO | レジストリエラー | Verdaccio起動失敗 | ポート4873の使用状況を確認 |
| ERR_NPM | 依存関係エラー | npm install失敗 | package.jsonと依存関係を確認 |
| ERR_TEST | テストエラー | CRAテスト失敗 | テストログを確認 |

### リトライ仕様

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

### 障害時対応

1. GitHub Actionsのログを確認し、エラー発生箇所を特定
2. Node.jsバージョンがNode.js 22であることを確認
3. CRAリポジトリの最新変更がBabelと非互換でないか確認
4. 必要に応じてsedによる互換性調整を更新

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

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

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | CRA全テストスイート |
| 目標処理時間 | 20分以内 |
| メモリ使用量上限 | GitHub Actions標準ランナーの制限内 |

## 排他制御

- 同一ワークフロー・同一refに対する重複実行はキャンセル

## ログ出力

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

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| ジョブ実行時間 | 60分 | GitHub Actions |
| ジョブ失敗 | 失敗時 | プルリクエストステータス |

## 備考

- CRAはuseBuiltIns: trueオプションを使用しているが、これはBabel 8で削除されたため、runtime: "classic"に置換が必要
- Node.js 24ではERR_SSL_WRONG_VERSION_NUMBERエラーが発生するため、Node.js 22を使用
- jest-workerのresolution追加は、CRAのlockfileの問題を回避するための一時的な対応
- npm-force-resolutionsでresolutionを強制適用
