# バッチ設計書 25-e2e-react-native

## 概要

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

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

このバッチは、React Nativeプロジェクトを新規作成し、Babelの最新パッケージでバンドル処理を実行することで、モバイル開発環境との互換性を検証する。

**業務上の目的・背景**：React Nativeは、JavaScriptでモバイルアプリケーションを開発するための人気フレームワークであり、Babelを使用してJavaScriptコードをトランスパイルする。Metro Bundlerと連携して動作するBabelの互換性を確認することは、React Native開発者にとって重要である。本バッチは、新規React Nativeプロジェクトを作成し、Babel依存関係を更新した上でバンドル処理を実行することで、互換性を検証する。

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

**主要な処理内容**：
1. ローカルVerdaccioレジストリを起動
2. React Native CLIで新規プロジェクトを作成（npx @react-native-community/cli init）
3. Babel 8互換性調整（Flow pluginの除外設定）
4. resolutionsでBabel依存関係をバンプ
5. 依存関係をインストール
6. Metro Bundlerでバンドル処理を実行

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

**影響範囲**：一時ディレクトリ（/tmp/rnbabel）、バンドル出力ファイル（output.js）。本番環境やnpmレジストリには影響しない。

## バッチ種別

E2Eテスト / モバイルフレームワーク統合テスト

## 実行スケジュール

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

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| e2e-publishジョブ完了 | verdaccio-workspaceが利用可能であること |
| Node.js環境 | Node.jsがインストールされていること |
| npm | npmパッケージマネージャが利用可能であること |
| Yarn | Yarnパッケージマネージャが利用可能であること |
| ネットワーク | npmレジストリおよびローカルVerdaccioへのアクセスが可能 |

### 実行可否判定

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

## 入力仕様

### 入力パラメータ

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

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| verdaccio-workspace | ディレクトリ | 公開済みBabelパッケージ |
| verdaccio-config.yml | YAML | Verdaccioレジストリ設定ファイル |
| @react-native-community/cli | npm | React Native CLI |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| output.js | JavaScript | バンドル済みJavaScript |
| 一時ディレクトリ | ディレクトリ | /tmp/rnbabel |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | output.js |
| 出力先 | /tmp/rnbabel |
| 文字コード | UTF-8 |
| 区切り文字 | 該当なし |

## 処理フロー

### 処理シーケンス

```
1. 環境情報出力
   └─ node -v, npm --version, yarn --version
2. Verdaccio起動
   └─ startLocalRegistry
3. React Nativeプロジェクト作成
   └─ cd /tmp && npx @react-native-community/cli init rnbabel
4. Babel 8互換性調整（Flow plugin除外）
   └─ npx replaceでmain.jsを修正
5. resolutionsバンプ
   └─ node bump-babel-dependencies.js resolutions
6. 依存関係インストール
   └─ npm install
7. バンドル実行
   └─ npx react-native bundle --entry-file index.js --bundle-output output.js
8. クリーンアップ
   └─ cleanup
```

### フローチャート

```mermaid
flowchart TD
    A[バッチ開始] --> B[環境情報出力]
    B --> C[Verdaccio起動]
    C --> D[React Nativeプロジェクト作成]
    D --> E[Babel 8互換性調整]
    E --> F[resolutionsバンプ]
    F --> G[npm install]
    G --> H[react-native bundle実行]
    H --> I{バンドル成功?}
    I -->|Yes| J[クリーンアップ]
    I -->|No| K[エラーログ出力]
    K --> J
    J --> L[バッチ終了]
```

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

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

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

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

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

該当なし

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| ERR_INIT | プロジェクト作成エラー | React Native CLI init失敗 | CLIバージョンと環境を確認 |
| ERR_NPM | 依存関係エラー | npm install失敗 | package.jsonと依存関係を確認 |
| ERR_VERDACCIO | レジストリエラー | Verdaccio起動失敗 | ポート4873の使用状況を確認 |
| ERR_BUNDLE | バンドルエラー | Metro Bundler失敗 | Babel設定とソースを確認 |
| ERR_FLOW | Flow plugin エラー | TSファイルでFlow pluginが動作 | 互換性調整を確認 |

### リトライ仕様

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

### 障害時対応

1. ログを確認し、エラー発生箇所を特定
2. Babel 8互換性調整（Flow plugin除外）が正しく適用されているか確認
3. metro-react-native-babel-presetのバージョンを確認
4. React Native CLIのバージョンを確認

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

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

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | 1プロジェクトのバンドル |
| 目標処理時間 | 10分以内 |
| メモリ使用量上限 | 標準ランナーの制限内 |

## 排他制御

- 同一ランナー内での重複実行は不可（/tmp/rnbabelディレクトリ使用）

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| 環境ログ | バッチ開始時 | Node.js、npm、yarnバージョン |
| 進捗ログ | 処理中 | 各コマンドの実行内容（set -xによるトレース） |
| バンドルログ | バンドル中 | Metro Bundler出力 |
| 終了ログ | バッチ終了時 | "Exiting without error." |
| エラーログ | エラー発生時 | エラー詳細 |

## 監視・アラート

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

## 備考

- 現在GitHub Actionsワークフローではコメントアウトされている（# - react-native）
- Babel 8互換性調整が必要：
  - metro-react-native-babel-presetはTSファイルでも無条件にFlow pluginを有効化する
  - npx replaceでFlow pluginの前にコメントを追加して無効化
  - TSソースファイルを除外するexcludeオプションを追加
- YARN_ENABLE_IMMUTABLE_INSTALLS=falseでlockfile変更を許可
- バンドル出力先はoutput.js（テスト用の一時ファイル）
