# 機能設計書 22-UMDライブラリ出力

## 概要

本ドキュメントは、webpackのUmdLibraryPluginによるUniversal Module Definition（UMD）形式でのライブラリ出力機能について記述する。

### 本機能の処理概要

UmdLibraryPluginは、webpackでバンドルされたライブラリをUMD形式で出力する機能を提供する。UMDは、CommonJS、AMD、ブラウザグローバル変数の3つの環境すべてで動作するモジュール定義パターンである。

**業務上の目的・背景**：ライブラリ開発者が配布するパッケージは、様々なモジュールシステム（Node.jsのCommonJS、RequireJSのAMD、ブラウザの`<script>`タグ）で利用される。UMD形式で出力することで、単一のバンドルファイルであらゆる環境に対応でき、ライブラリの配布コストを削減する。

**機能の利用シーン**：npm配布用ライブラリやCDN経由で提供するJavaScriptライブラリの構築時に、webpack設定の `output.library.type: 'umd'` または `'umd2'` を指定して利用する。`umd2`はオプショナルなAMD外部依存をグローバル変数から取得する点が異なる。

**主要な処理内容**：
1. ライブラリオプション（名前、補助コメント、namedDefine）をパースする
2. 外部モジュール（ExternalModule）をUMDタイプでフィルタリングする
3. CommonJS2 / AMD / CommonJS / ブラウザグローバルの各環境向けラッパーコードを生成する
4. ソースコードを環境判定用IIFEでラップして出力する

**関連システム・外部連携**：EnableLibraryPluginを通じて有効化される。ExportPropertyLibraryPluginと連携して特定エクスポートの抽出も可能。ExternalModuleとの連携により、外部依存の各環境向けリクエスト解決を行う。

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

## 関連画面

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

## 機能種別

コード生成処理（UMD形式ラッパーコードの生成・バンドルへの付加）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| library.name | string \| string[] \| LibraryCustomUmdObject | No | ライブラリ名。環境ごとに別名指定可能 | オブジェクト形式でroot/amd/commonjsを個別指定可能 |
| library.auxiliaryComment | string \| LibraryCustomUmdCommentObject | No | 各環境判定ブロックに付加するコメント | - |
| library.umdNamedDefine | boolean | No | AMDモジュールに名前を付けるか | デフォルトはundefined |
| options.type | 'umd' \| 'umd2' | Yes | UMD出力タイプ | - |
| options.optionalAmdExternalAsGlobal | boolean | No | umd2時にオプショナルAMD外部依存をグローバルから取得 | - |

### 入力データソース

webpack設定の `output.library` オプション。AbstractLibraryPluginの `parseOptions` メソッドでパースされる。

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| source | ConcatSource | UMDラッパーで囲まれたバンドルソース |

### 出力先

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

## 処理フロー

### 処理シーケンス

```
1. オプションパース（parseOptions）
   ├─ library.name がオブジェクト形式の場合、root/amd/commonjsに分解
   └─ 文字列/配列形式の場合、各環境向けに同一名を設定
2. レンダリング（render）
   ├─ チャンク内のExternalModuleをフィルタ（umd/umd2タイプ）
   ├─ オプショナル外部依存と必須外部依存を分類（umd2時）
   ├─ CommonJS2環境向けコード生成（module.exports = factory(require(...))）
   ├─ AMD環境向けコード生成（define([deps], factory)）
   │   ├─ namedDefine=trueの場合、ライブラリ名付きdefine
   │   └─ オプショナル外部依存のラッパー関数生成（umd2時）
   ├─ CommonJS環境向けコード生成（exports[name] = factory(require(...))）
   ├─ ブラウザグローバル環境向けコード生成（root[name] = factory(root[dep])）
   └─ IIFE全体をConcatSourceとして生成
```

### フローチャート

```mermaid
flowchart TD
    A[renderメソッド呼び出し] --> B[ExternalModuleフィルタリング]
    B --> C{umd2モード?}
    C -->|Yes| D[オプショナル/必須外部依存を分類]
    C -->|No| E[全て必須外部依存として扱う]
    D --> F[UMDラッパーコード生成]
    E --> F
    F --> G[CommonJS2環境判定コード]
    G --> H[AMD環境判定コード]
    H --> I{名前あり AND namedDefine?}
    I -->|Yes| J[名前付きdefine]
    I -->|No| K[匿名define]
    J --> L[CommonJS/ブラウザ環境コード]
    K --> L
    L --> M[ConcatSourceとして返却]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | UMD環境判定順序 | CommonJS2 -> AMD -> CommonJS -> グローバルの順で判定 | 常時 |
| BR-02 | umd2オプショナル外部依存 | umd2モード時、オプショナルな外部依存はグローバルから取得 | type='umd2' |
| BR-03 | namedDefine | trueの場合、AMDのdefineにライブラリ名を付加 | umdNamedDefine=true |
| BR-04 | 名前なしフォールバック | ライブラリ名未設定時、exports/rootへのプロパティ個別コピー | name未指定 |

### 計算ロジック

外部モジュールの各環境向けリクエスト解決：
- AMD: `request.amd` またはrequestそのまま
- CommonJS: `require(request.commonjs)` または `require(request)`
- CommonJS2: `require(request.commonjs2)` または `require(request)`
- ブラウザ: `root[request.root]` または `root[request]`

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

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

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

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | Error | 外部モジュールのリクエストに該当タイプの設定がない場合 | `Missing external configuration for type:${type}` エラーをスロー |

### リトライ仕様

リトライ処理はない。

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

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

## パフォーマンス要件

UMDラッパーの生成はコンパイル時の一回限りの処理であり、パフォーマンスへの影響は軽微である。

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

UMD出力はグローバルスコープにライブラリ名を公開するため、名前の衝突やグローバル汚染に注意が必要である。

## 備考

- `umd2` は `umd` と基本的に同じだが、`optionalAmdExternalAsGlobal` がtrueになる点が異なる
- `output.iife: false` が設定されている場合、UMDタイプ選択時に自動的に `iife: true` に上書きされ、`FalseIIFEUmdWarning` が発行される
- ExportPropertyLibraryPluginと組み合わせて `library.export` で特定エクスポートのみを公開可能

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | AbstractLibraryPlugin.js | `lib/library/AbstractLibraryPlugin.js` | LibraryContext型、LibraryOptions型の構造 |
| 1-2 | UmdLibraryPlugin.js | `lib/library/UmdLibraryPlugin.js` | UmdLibraryPluginParsed型（59-70行目）- name, names, auxiliaryComment, namedDefine |

**読解のコツ**: AbstractLibraryPluginのテンプレートメソッドパターンを理解することが重要。parseOptions/render/chunkHashのオーバーライドが実際の処理。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | EnableLibraryPlugin.js | `lib/library/EnableLibraryPlugin.js` | 233-264行目: 'umd'/'umd2'タイプでのUmdLibraryPlugin適用 |

**主要処理フロー**:
1. **233行目**: `case 'umd':` / `case 'umd2':` - タイプ判定
2. **235-255行目**: iife=falseの場合のWarning処理
3. **258-263行目**: UmdLibraryPluginのインスタンス化とapply

#### Step 3: オプションパース処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | UmdLibraryPlugin.js | `lib/library/UmdLibraryPlugin.js` | 94-117行目: parseOptionsメソッド |

**主要処理フロー**:
- **99-101行目**: オブジェクト形式の名前からroot/amd/commonjsを取得
- **103-109行目**: 文字列/配列形式の名前を各環境向けに展開

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | UmdLibraryPlugin.js | `lib/library/UmdLibraryPlugin.js` | 125-352行目: renderメソッド全体 |

**主要処理フロー**:
- **130-136行目**: ExternalModuleのフィルタリング（umd/umd2タイプ）
- **142-153行目**: オプショナル/必須外部依存の分類
- **295-351行目**: UMDラッパーコードの生成（ConcatSource）

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

```
EnableLibraryPlugin.apply()
    │
    ├─ ExportPropertyLibraryPlugin.apply()
    │
    └─ UmdLibraryPlugin.apply()
           │
           ├─ AbstractLibraryPlugin.apply()
           │      ├─ hooks.finishModules.tap()
           │      ├─ hooks.additionalChunkRuntimeRequirements.tap()
           │      ├─ hooks.render.tap() ──▶ UmdLibraryPlugin.render()
           │      └─ hooks.chunkHash.tap()
           │
           └─ UmdLibraryPlugin.render()
                  ├─ parseOptions() ──▶ UmdLibraryPluginParsed
                  ├─ ExternalModule フィルタリング
                  └─ ConcatSource 生成（UMDラッパー）
```

### データフロー図

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

library.name ──────────────▶ parseOptions() ──────▶ names (root/amd/commonjs)
library.umdNamedDefine ────▶
library.auxiliaryComment ──▶

チャンクモジュール ─────────▶ ExternalModule ──────▶ 外部依存配列
                               フィルタリング

ソースコード ──────────────▶ render() ─────────────▶ UMDラッパー付きソース
                               (ConcatSource)          (バンドルファイル)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| UmdLibraryPlugin.js | `lib/library/UmdLibraryPlugin.js` | ソース | UMD形式ラッパーの生成 |
| 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` | ソース | テンプレートユーティリティ（toIdentifier等） |
