# 機能設計書 27-SystemJSライブラリ出力

## 概要

本ドキュメントは、webpackのSystemLibraryPluginによるSystem.js形式でのライブラリ出力機能について記述する。

### 本機能の処理概要

SystemLibraryPluginは、webpackでバンドルされたライブラリをSystem.js形式（`System.register()`）で出力する機能を提供する。SystemJSローダーで利用可能なモジュール定義コードを生成する。

**業務上の目的・背景**：SystemJSは、ブラウザ環境でESModuleやCommonJSモジュールを動的に読み込むためのユニバーサルモジュールローダーである。マイクロフロントエンドアーキテクチャやレガシーブラウザ対応で広く利用されており、SystemJS互換の出力形式が必要となるケースがある。

**機能の利用シーン**：`output.library.type: 'system'` を指定してSystem.register形式のバンドルを生成する。single-spaなどのマイクロフロントエンドフレームワークとの統合で利用される。

**主要な処理内容**：
1. ライブラリ名をパースする（文字列またはunset）
2. 外部モジュール（ExternalModule）をsystemタイプでフィルタリングする
3. System.register形式のラッパーコード（依存配列、setter関数群、execute関数）を生成する
4. 外部依存のsetter関数で__esModuleフラグとプロパティコピーを処理する

**関連システム・外部連携**：EnableLibraryPluginを通じて有効化される。ExportPropertyLibraryPluginと連携可能。ExternalModuleとの連携により外部依存のSystemJS形式読み込みを行う。

**権限による制御**：本機能に権限による制御はない。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当する画面なし |

## 機能種別

コード生成処理（System.register形式ラッパーコードの生成）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| library.name | string | No | SystemJSモジュール名 | 文字列またはunset |
| options.type | 'system' | Yes | System出力タイプ | - |

### 入力データソース

webpack設定の `output.library` オプション。

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| source | ConcatSource | System.register形式のバンドルソース |

### 出力先

JavascriptModulesPluginのrenderフックを通じて、バンドルファイルとして出力される。

## 処理フロー

### 処理シーケンス

```
1. オプションパース（parseOptions）
   └─ nameが設定されていて文字列以外ならエラー
2. レンダリング（render）
   ├─ ExternalModuleをsystemタイプでフィルタ
   ├─ モジュール名の決定（オプショナル）
   ├─ 外部依存の配列を生成
   ├─ 外部依存ごとの内部変数宣言を生成
   ├─ __esModuleフラグ定義を生成
   ├─ setter関数群を生成
   │   ├─ エクスポート使用状態に基づくプロパティマッピング
   │   ├─ defaultエクスポートの特殊処理（module["default"] || module）
   │   ├─ 未使用エクスポートのスキップ
   │   └─ otherExportsInfo利用時のObject.keysによる動的コピー
   ├─ execute関数でバンドルソースをラップ
   └─ System.register(name?, deps, callback) 形式で出力
```

### フローチャート

```mermaid
flowchart TD
    A[renderメソッド呼び出し] --> B[ExternalModuleフィルタ]
    B --> C[外部依存配列生成]
    C --> D[内部変数宣言生成]
    D --> E[__esModuleフラグ定義]
    E --> F[setter関数群生成]
    F --> G{各外部モジュールについて}
    G --> H[エクスポート使用状態分析]
    H --> I{otherUnused?}
    I -->|Yes| J[個別プロパティマッピングのみ]
    I -->|No| K[Object.keysで動的コピー]
    J --> L[execute関数ラッパー]
    K --> L
    L --> M["System.register(name, deps, fn)"]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | 名前任意 | System.registerの第一引数（モジュール名）はオプショナル | 常時 |
| BR-02 | defaultエクスポート | `module["default"] \|\| module` のフォールバック形式 | defaultエクスポート参照時 |
| BR-03 | otherExports未使用最適化 | otherExportsInfoがUnusedの場合、Object.keysコピーをスキップ | UsageState.Unused |
| BR-04 | __esModuleフラグ | 単一リクエストの外部モジュールに__esModuleをdefineProperty | 配列でないリクエスト |
| BR-05 | handledNames | 既知のエクスポート名を除外してObject.keysコピー | handledNames配列あり |

### 計算ロジック

setter関数の生成：各外部モジュールについて、エクスポート使用状態（UsageState）に基づき最適なプロパティマッピングコードを生成する。

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

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

本機能にデータベース操作はない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | Error | nameが文字列以外で設定されている場合 | "System.js library name must be a simple string or unset" |

### リトライ仕様

リトライ処理はない。

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

トランザクション管理はない。

## パフォーマンス要件

System.registerラッパー生成はコンパイル時処理。外部依存のsetter関数生成はモジュール数に比例するが、通常は軽微。

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

本機能にセキュリティ上の特別な考慮事項はない。

## 備考

- System.register形式は3つの部分で構成される：依存配列、setter関数群（setters）、実行関数（execute）
- `__WEBPACK_DYNAMIC_EXPORT__` が動的エクスポート用の変数名として使用される
- `__system_context__` がSystem.jsコンテキスト変数として利用可能

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | SystemLibraryPlugin.js | `lib/library/SystemLibraryPlugin.js` | SystemLibraryPluginParsed型（34-36行目）- name |

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | EnableLibraryPlugin.js | `lib/library/EnableLibraryPlugin.js` | 266-274行目: 'system'での初期化 |

#### Step 3: レンダリング処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | SystemLibraryPlugin.js | `lib/library/SystemLibraryPlugin.js` | 76-238行目: renderメソッド |

**主要処理フロー**:
- **77-82行目**: ExternalModuleのフィルタリング（systemタイプ）
- **85-87行目**: モジュール名の決定
- **90-96行目**: 外部依存配列の生成
- **102-107行目**: 内部変数名の生成
- **110-112行目**: 外部変数宣言
- **119-212行目**: setter関数群の生成（最も複雑な部分）
- **136-140行目**: エクスポート使用状態の分析
- **143-149行目**: defaultエクスポートの特殊処理
- **164-171行目**: __esModuleフラグ定義
- **214-238行目**: System.register全体のConcatSource生成

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

```
EnableLibraryPlugin.apply()
    │
    ├─ ExportPropertyLibraryPlugin.apply()
    │
    └─ SystemLibraryPlugin.apply()
           │
           └─ AbstractLibraryPlugin.apply()
                  ├─ hooks.render.tap() ──▶ SystemLibraryPlugin.render()
                  │      ├─ ExternalModule フィルタ
                  │      ├─ setter関数群生成
                  │      └─ System.register ラッパー生成
                  └─ hooks.chunkHash.tap() ──▶ chunkHash()
```

### データフロー図

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

library.name ──────────────▶ parseOptions() ──────▶ {name: string}

チャンクモジュール ─────────▶ ExternalModule ──────▶ 依存配列 + setter関数群
                               フィルタ+分析

ソースコード ──────────────▶ render() ─────────────▶ System.register(name, deps, fn)
                               (ConcatSource)          setters: [...],
                                                        execute: fn{ source }
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SystemLibraryPlugin.js | `lib/library/SystemLibraryPlugin.js` | ソース | System.register形式ラッパーの生成 |
| AbstractLibraryPlugin.js | `lib/library/AbstractLibraryPlugin.js` | ソース | ライブラリプラグインの基底クラス |
| EnableLibraryPlugin.js | `lib/library/EnableLibraryPlugin.js` | ソース | ライブラリタイプの有効化 |
| ExportPropertyLibraryPlugin.js | `lib/library/ExportPropertyLibraryPlugin.js` | ソース | 特定エクスポートの抽出 |
| ExternalModule.js | `lib/ExternalModule.js` | ソース | 外部モジュールの表現 |
| Template.js | `lib/Template.js` | ソース | テンプレートユーティリティ |
