# 機能設計書 45-@babel/plugin-transform-flow-strip-types

## 概要

本ドキュメントは、BabelプラグインであるFlow型アノテーションの削除機能について記述する。

### 本機能の処理概要

**業務上の目的・背景**：
FlowはFacebookが開発したJavaScriptの静的型チェッカーであり、TypeScriptと同様に型アノテーションを使用してコードの安全性を向上させる。しかし、ブラウザやNode.jsはFlow型アノテーションを直接解釈できないため、実行前にこれらを削除する必要がある。本プラグインは、Flow型アノテーションを削除し、標準的なJavaScriptコードを生成する。

**機能の利用シーン**：
- Flowを使用したプロジェクトでのプロダクションビルド
- @babel/preset-flowを通じた利用
- 型チェック後のコード変換フェーズ
- Flow型アノテーション付きのReactプロジェクト

**主要な処理内容**：
1. Flow型アノテーション（type annotations）の削除
2. @flow/@noflowディレクティブの削除
3. 型のみのインポートの削除
4. クラスプロパティの型情報削除
5. 関数パラメータのオプショナル/型情報削除
6. TypeCastExpressionの削除（値のみ残す）
7. 型引数（type arguments）の削除

**関連システム・外部連携**：
@babel/plugin-syntax-flowで構文解析を継承。

**権限による制御**：
プラグインオプション（requireDirective、allowDeclareFields）による動作制御が可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 本機能はCLI/APIから利用されるプラグインのため、直接の画面関連なし |

## 機能種別

データ変換（AST変換）/ 型削除

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| requireDirective | boolean | No | @flowディレクティブを必須とする（デフォルト: false） | - |
| allowDeclareFields | boolean | No | declareフィールドの許可 | - |

### 入力データソース

Flow型アノテーション付きJavaScriptソースコード（AST形式）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| transformedAST | t.Program | Flow型が削除されたAST |

### 出力先

変換されたAST（@babel/coreに返却）

## 処理フロー

### 処理シーケンス

```
1. Programビジター
   └─ @flow/@noflowディレクティブの検出
   └─ requireDirectiveチェック
   └─ ディレクティブコメントの削除
2. ImportDeclarationビジター
   └─ 型のみインポートの削除判定
3. Flowビジター
   └─ すべてのFlowノードを削除
4. ClassPrivatePropertyビジター
   └─ typeAnnotationをnullに
5. Classビジター
   └─ implementsをnullに
   └─ ClassPropertyのdeclare/variance/typeAnnotation削除
6. AssignmentPatternビジター
   └─ optionalをfalseに
7. Functionビジター
   └─ thisパラメータ削除
   └─ オプショナルパラメータ処理
   └─ predicateをnullに
8. TypeCastExpressionビジター
   └─ 式のみを残す
9. CallExpression/NewExpression/JSXOpeningElement/OptionalCallExpressionビジター
   └─ typeArgumentsをnullに
```

### フローチャート

```mermaid
flowchart TD
    A[開始] --> B[Program]
    B --> C{@flow検出?}
    C -->|Yes| D[ディレクティブ削除]
    C -->|No & requireDirective| E[skipStrip=true]
    C -->|No & !requireDirective| F[通常処理]
    D --> F
    E --> G{Flowノード検出?}
    G -->|Yes| H[エラー送出]
    F --> I{Flowノード?}
    I -->|Yes| J[ノード削除]
    I -->|No| K{TypeCastExpression?}
    K -->|Yes| L[式のみ残す]
    K -->|No| M{Class?}
    M -->|Yes| N[型情報削除]
    M -->|No| O{Function?}
    O -->|Yes| P[型情報・thisパラメータ削除]
    O -->|No| Q{ImportDeclaration?}
    Q -->|Yes| R[型インポート削除判定]
    J --> S[終了]
    L --> S
    N --> S
    P --> S
    R --> S
    H --> S
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-45-01 | @flowディレクティブ検出 | @flow/@noflowコメントを検出して処理判定 | 常時 |
| BR-45-02 | requireDirectiveモード | @flowがない場合は変換をスキップ | requireDirective=true時 |
| BR-45-03 | Flowノード削除 | すべてのFlowカテゴリノードを削除 | skipStrip=false時 |
| BR-45-04 | 型インポート削除 | type/typeofのインポートのみの場合、インポート文削除 | 型インポート検出時 |
| BR-45-05 | TypeCastExpression変換 | (expr: Type)からexprのみを抽出 | TypeCastExpression検出時 |
| BR-45-06 | thisパラメータ削除 | function(this: Type, ...)からthisを削除 | 関数の最初のパラメータがthis時 |

### 計算ロジック

特になし（構文変換のみ）

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

該当なし（ファイルシステム操作のみ）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| FLOW_DIRECTIVE_REQUIRED | 設定エラー | requireDirective=trueで@flowがない | @flowディレクティブを追加 |

### リトライ仕様

該当なし

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

該当なし

## パフォーマンス要件

特定のパフォーマンス要件なし（変換処理は同期的に実行）

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

- 型情報は実行時には削除されるため、型による実行時チェックは行われない

## 備考

- TypeScriptプラグインと比較して実装がシンプル（約180行）
- @flow strict、@flow strict-local、@flow weakの各モードを認識
- @noflowディレクティブも認識し、その場合も型削除を実行

---

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

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

### 推奨読解順序

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

まず、プラグインのオプション型定義を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.ts | `packages/babel-plugin-transform-flow-strip-types/src/index.ts` | Options型（5-8行目） |

**読解のコツ**: TypeScriptプラグインと異なり、オプションは2つのみでシンプル。

#### Step 2: ディレクティブ処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.ts | `packages/babel-plugin-transform-flow-strip-types/src/index.ts` | Programビジター（24-54行目） |

**主要処理フロー**:
- **13行目**: FLOW_DIRECTIVEの正規表現定義
- **24-54行目**: @flow/@noflowディレクティブの検出と削除
- **37-41行目**: ディレクティブコメントを空白に置換
- **51-53行目**: requireDirective=trueで@flowがない場合、skipStrip=true

#### Step 3: Flowノード削除を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.ts | `packages/babel-plugin-transform-flow-strip-types/src/index.ts` | Flowビジター（73-86行目） |

**主要処理フロー**:
- **73-86行目**: Flowカテゴリのすべてのノードを削除
- **78-83行目**: skipStrip=trueの場合はエラーを送出

#### Step 4: クラス・関数の型削除を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | index.ts | `packages/babel-plugin-transform-flow-strip-types/src/index.ts` | Class/Functionビジター（93-148行目） |

**主要処理フロー**:
- **93-110行目**: Classビジター（implements、ClassPropertyの処理）
- **122-148行目**: Functionビジター（thisパラメータ、optional、predicate）

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

```
@babel/plugin-transform-flow-strip-types/src/index.ts
    │
    ├─ @babel/plugin-syntax-flow (inherits)
    │      └─ Flow構文解析の有効化
    │
    └─ @babel/core/types
           ├─ isTypeCastExpression()
           ├─ isMethod()
           └─ 各種型チェック関数
```

### データフロー図

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

Flow付きJSソース  ──▶  Parser (Flow AST生成)
                              │
                              ▼
                     @flowディレクティブ検出
                              │
                     ┌────────┼────────┐
                     ▼        ▼        ▼
               型削除  implements  this削除
                      削除
                     │        │        │
                     └────────┼────────┘
                              │
                              ▼
                       JavaScriptAST ──▶ Generator ──▶ JSコード
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.ts | `packages/babel-plugin-transform-flow-strip-types/src/index.ts` | ソース | メインプラグイン実装（182行） |
| package.json | `packages/babel-plugin-transform-flow-strip-types/package.json` | 設定 | 依存関係・メタデータ |
| plugin-syntax-flow | `packages/babel-plugin-syntax-flow/` | ソース | Flow構文解析プラグイン |
