# 機能設計書 70-@babel/plugin-syntax-jsx

## 概要

本ドキュメントは、BabelのJSX構文解析を有効化する構文プラグイン `@babel/plugin-syntax-jsx` の機能設計を定義する。

### 本機能の処理概要

本プラグインは、Babelパーサーに対してJSX構文の解析機能を有効化する構文プラグインである。JSX（JavaScript XML）は、ReactなどのUIライブラリで広く使用されるXMLライクな構文拡張であり、コンポーネントベースのUI記述を可能にする。

**業務上の目的・背景**：JSXはJavaScriptの標準構文ではないため、Babelパーサーがデフォルトで解析することはできない。本プラグインは、パーサーのプラグインリストに「jsx」を追加することで、JSX構文の解析を有効化する。これにより、`<Component />` のようなJSX要素を含むコードをパースできるようになる。

**機能の利用シーン**：
- Reactアプリケーションの開発
- JSXを使用するUIライブラリ（Preact、Solid.js等）の開発
- JSXをカスタム変換するプラグインの前提条件として

**主要な処理内容**：
1. manipulateOptionsフックでパーサーオプションを操作
2. parserOpts.pluginsに「jsx」を追加
3. パーサーがJSX構文を認識できるようになる

**関連システム・外部連携**：`@babel/parser`のJSX解析機能と連携する。`@babel/plugin-transform-react-jsx`等のJSX変換プラグインの前提条件となる。

**権限による制御**：特にロールや権限による制御はない。Babel設定ファイルでのプラグイン有効化により機能する。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1-4 | Babelトランスフォームデモ等 | 補助機能 | @babel/preset-reactの一部としてJSX解析を有効化 |

## 機能種別

構文有効化処理（パーサー設定）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| - | - | - | 本プラグインにはオプションパラメータはない | - |

### 入力データソース

- Babel設定からのパーサーオプション

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| parserOpts.plugins | string[] | 「jsx」が追加されたパーサープラグインリスト |

### 出力先

- Babelパーサーの設定（parserOpts）

## 処理フロー

### 処理シーケンス

```
1. Babel設定読み込み
   └─ プラグインリストに@babel/plugin-syntax-jsxが含まれている
2. manipulateOptionsフック呼び出し
   └─ opts（Babelオプション）とparserOpts（パーサーオプション）を受け取る
3. パーサープラグイン追加
   └─ parserOpts.plugins.push("jsx")
4. パーサー初期化
   └─ JSX解析機能が有効化された状態でパーサーが初期化
```

### フローチャート

```mermaid
flowchart TD
    A[Babel設定読み込み] --> B[プラグイン初期化]
    B --> C[manipulateOptionsフック]
    C --> D[parserOpts.plugins.push jsx]
    D --> E[パーサー初期化]
    E --> F[JSX構文解析有効]
    F --> G[終了]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | 構文のみ | 本プラグインはJSXの解析のみを有効化し、変換は行わない | 常時 |
| BR-02 | 変換プラグインとの併用 | JSXを実際に変換するには別途変換プラグインが必要 | JSX変換が必要な場合 |
| BR-03 | 重複追加なし | parserOpts.pluginsへの追加は1回のみ | 複数回呼び出された場合 |

### 計算ロジック

- 単純な配列追加: `parserOpts.plugins.push("jsx")`

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

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

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

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | 構文エラー | JSXが有効化されていない状態でJSXコードをパース | 本プラグインを追加 |

### リトライ仕様

リトライ処理は不要（設定時のエラーはリトライ対象外）

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

トランザクション管理は不要（設定処理のため）

## パフォーマンス要件

- 極めて軽量な処理（配列への要素追加のみ）
- パフォーマンスへの影響は無視できるレベル

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

- 構文解析の有効化のみでセキュリティリスクはない
- JSX変換後のコードのセキュリティは変換プラグインに依存

## 備考

- JSXはJavaScriptの標準構文ではない
- @babel/preset-reactに含まれているため、通常は直接使用する必要はない
- TypeScript JSXは@babel/plugin-syntax-typescriptで有効化される

---

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

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

### 推奨読解順序

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

構文プラグインは、manipulateOptionsフックを通じてパーサーオプションを操作する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.ts | `packages/babel-plugin-syntax-jsx/src/index.ts` | 全体構造（14行のみの極めて簡潔なプラグイン） |

**読解のコツ**: 構文プラグインは変換処理を行わず、manipulateOptionsフックのみを実装する。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.ts | `packages/babel-plugin-syntax-jsx/src/index.ts` | manipulateOptionsの実装 |

**主要処理フロー**:
1. **3行目**: declareでプラグインを定義
2. **4行目**: assertVersionでBabelバージョン互換性を確認
3. **7行目**: プラグイン名を「syntax-jsx」として定義
4. **9-11行目**: manipulateOptionsフックでparserOpts.pluginsに「jsx」を追加

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

```
@babel/core (configChain)
    │
    └─ @babel/plugin-syntax-jsx/src/index.ts
           │
           └─ manipulateOptions(opts, parserOpts)
                  │
                  └─ parserOpts.plugins.push("jsx")
                         │
                         └─ @babel/parser (JSX解析有効化)
```

### データフロー図

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

Babel設定                  manipulateOptions                パーサー設定
{                   ───▶   parserOpts.plugins.push  ───▶   parserOpts.plugins
  plugins: [                                                = ["jsx", ...]
    "@babel/syntax-jsx"
  ]
}
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.ts | `packages/babel-plugin-syntax-jsx/src/index.ts` | ソース | プラグインエントリーポイント |
| package.json | `packages/babel-plugin-syntax-jsx/package.json` | 設定 | パッケージ定義・依存関係 |

### 完全なソースコード解説

```typescript
// 1行目: @babel/helper-plugin-utilsからdeclareをインポート
import { declare } from "@babel/helper-plugin-utils";

// 3-13行目: プラグイン定義
export default declare(api => {
  // 4行目: Babelバージョン互換性チェック
  api.assertVersion(REQUIRED_VERSION("^7.0.0-0 || ^8.0.0"));

  return {
    // 7行目: プラグイン名
    name: "syntax-jsx",

    // 9-11行目: パーサーオプション操作フック
    manipulateOptions(opts, parserOpts) {
      // 10行目: jsxパーサープラグインを追加
      parserOpts.plugins.push("jsx");
    },
  };
});
```

このプラグインは14行で完結しており、Babelプラグインの中で最も単純な部類に入る。構文プラグインのパターンを理解するための良い入門例である。
