# 通知設計書 6-CriticalDependencyWarning

## 概要

本ドキュメントは、Webpackにおけるrequire()の動的呼び出しなど、静的解析できない依存関係に関する警告を表す `CriticalDependencyWarning` クラスの設計仕様を記述する。

### 本通知の処理概要

CriticalDependencyWarning は、Webpackの静的解析エンジンが依存関係を正確に解決できない場合に発生する警告クラスである。主に動的なrequire式やimport.metaの不正使用など、ビルド時に依存関係のツリーを正確に構築できないケースを開発者に通知する。

**業務上の目的・背景**：Webpackはビルド時にモジュールの依存関係を静的に解析してバンドルを構築する。しかし、`require(variable)` のような動的な式や、`import.meta` の不適切な使用など、静的解析が不可能な依存関係が存在する場合がある。このような場合、Webpackはコンテキスト依存関係（ディレクトリ全体を含む）にフォールバックするが、これはバンドルサイズの増大やランタイムエラーの原因となりうる。CriticalDependencyWarning は、このような潜在的な問題を開発者に早期に警告する役割を果たす。

**通知の送信タイミング**：(1) ContextDependencyの `getWarnings()` メソッド呼び出し時に `this.critical` が設定されている場合（ContextDependency.js 行118-121）、(2) ContextDependencyで `hadGlobalOrStickyRegExp` フラグがtrueの場合（ContextDependency.js 行124-132）、(3) ImportMetaPluginで `import.meta` が単独式として使用された場合（ImportMetaPlugin.js 行192）。これらの警告はCompilation.reportDependencyErrorsAndWarningsの走査時にModuleDependencyWarningとしてラップされて出力される。

**通知の受信者**：Webpackビルドを実行した開発者。

**通知内容の概要**：「Critical dependency: {メッセージ}」の形式で表示される。メッセージ例として「the request of a dependency is an expression」（依存関係のリクエストが式である）、「Contexts can't use RegExps with the 'g' or 'y' flags.」（コンテキストはg/yフラグ付きの正規表現を使用できない）などがある。

**期待されるアクション**：開発者は動的なrequire/import式を静的な形式に書き換えるか、`/* webpackIgnore: true */` コメントで意図的に無視するか、Webpack設定でコンテキストを適切に制限する。

## 通知種別

ビルドプロセス内警告通知（コンソール出力 / Stats JSON / Stats HTML）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（依存関係のgetWarnings()経由で返却、Compilationで収集） |
| 優先度 | 中（警告だが、ビルド品質に影響する重要な警告） |
| リトライ | なし |

### 送信先決定ロジック

ContextDependencyの `getWarnings()` メソッドが CriticalDependencyWarning のインスタンスを配列で返す。Compilation.reportDependencyErrorsAndWarnings が各依存関係の getWarnings() を呼び出し、返された警告を ModuleDependencyWarning でラップして Compilation.warnings に追加する。ImportMetaPluginの場合は直接 ModuleDependencyWarning 内に CriticalDependencyWarning をネストして module.addWarning() で追加する。

## 通知テンプレート

### メール通知の場合

該当なし（ビルド出力として表示される）。

### 本文テンプレート

```
Critical dependency: {message}
```

典型的なメッセージ例:
```
Critical dependency: the request of a dependency is an expression
Critical dependency: Contexts can't use RegExps with the 'g' or 'y' flags.
Critical dependency: 'import.meta' cannot be used as a standalone expression. For static analysis, its properties must be accessed directly (e.g., 'import.meta.url') or through destructuring.
```

### 添付ファイル

該当なし。

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| message | 警告メッセージ本文 | コンストラクタ引数 | Yes |
| name | エラー名称（固定値 "CriticalDependencyWarning"） | クラス内で設定 | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| コンテキスト依存関係 | ContextDependency.getWarnings()呼び出し | this.criticalがtruthyな場合 | ContextDependency.js 行118-121 |
| 正規表現フラグ | ContextDependency.getWarnings()呼び出し | hadGlobalOrStickyRegExpがtrueの場合 | ContextDependency.js 行124-132 |
| import.meta不正使用 | ImportMetaPluginのmetaPropertyフック | import.metaが分割代入なしで単独使用された場合 | ImportMetaPlugin.js 行186-197 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| this.criticalがfalsyかつhadGlobalOrStickyRegExpがfalse | 通常の依存関係解決が成功した場合 |
| stats.warnings=false | Stats出力で表示が抑制される |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[依存関係解析] --> B{動的式 or 不正パターン?}
    B -->|動的require/import| C[ContextDependencyに critical 設定]
    B -->|g/yフラグ正規表現| D[hadGlobalOrStickyRegExp = true]
    B -->|import.meta単独使用| E[ImportMetaPlugin検出]
    C --> F[getWarnings で CriticalDependencyWarning 生成]
    D --> F
    E --> G[ModuleDependencyWarning 内にネスト]
    F --> H[reportDependencyErrorsAndWarnings で収集]
    G --> I[module.addWarning]
    H --> J[ModuleDependencyWarning でラップ]
    J --> K[Compilation.warnings に追加]
    I --> K
    K --> L[Stats出力]
```

## データベース参照・更新仕様

### 参照テーブル一覧

該当なし（データベースは使用しない）。

### 更新テーブル一覧

該当なし（データベースは使用しない）。

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 該当なし | - | CriticalDependencyWarning自体が警告であり、ビルドは継続される |

### リトライ仕様

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

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

制限なし（ビルド実行時に即座に出力される）。

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

特になし。メッセージは定型的な内容であり、センシティブな情報は含まれない。

## 備考

- `makeSerializable` によりキャッシュのシリアライズ/デシリアライズに対応している。
- このクラスはWebpackErrorを直接継承しているが、依存関係の `getWarnings()` から返される際に ModuleDependencyWarning でラップされることが多い。そのため、最終的な出力では ModuleDependencyWarning のメッセージフォーマットで表示される。
- `hideStack` は明示的に設定されないが、WebpackError基底クラスではundefinedに初期化されるため、ラップ時にスタックトレースが表示される可能性がある。
- ContextDependency での `getCriticalDependencyWarning()` は遅延requireパターンで実装されている。

---

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

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

### 推奨読解順序

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

CriticalDependencyWarningクラスのシンプルな構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CriticalDependencyWarning.js | `lib/dependencies/CriticalDependencyWarning.js` | コンストラクタの1引数構成（message）、messageへの「Critical dependency: 」プレフィックス付加 |

**読解のコツ**: このクラスのコンストラクタ（行15-21）では、`super()` を引数なしで呼び出した後に `this.message` を直接設定するパターンを使用している。これは「Critical dependency: 」というプレフィックスを付加するためである。

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

ContextDependencyでの使用パターンを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ContextDependency.js | `lib/dependencies/ContextDependency.js` | getWarningsメソッド（行115-135）でのCriticalDependencyWarning生成ロジック |

**主要処理フロー**:
1. **行115**: `getWarnings(moduleGraph)` メソッド定義
2. **行116**: 親クラスの `getWarnings` を呼び出し
3. **行118-121**: `this.critical` がtruthyなら `new CriticalDependencyWarning(this.critical)` を追加
4. **行124-132**: `this.hadGlobalOrStickyRegExp` がtrueなら正規表現フラグに関する警告を追加
5. **行134**: warnings配列を返却

#### Step 3: Compilationでの収集フローを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Compilation.js | `lib/Compilation.js` | reportDependencyErrorsAndWarnings（行3552-3581）でのgetWarnings()呼び出しとModuleDependencyWarningへのラップ |
| 3-2 | ImportMetaPlugin.js | `lib/dependencies/ImportMetaPlugin.js` | import.meta単独使用時のCriticalDependencyWarningのネスト使用（行187-197） |

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

```
Compilation.reportDependencyErrorsAndWarnings()  [Compilation.js 行3552]
    │
    ├─ dependency.getWarnings(moduleGraph)         [行3558]
    │      │
    │      └─ ContextDependency.getWarnings()      [ContextDependency.js 行115]
    │             ├─ new CriticalDependencyWarning(this.critical)  [行121]
    │             └─ new CriticalDependencyWarning("Contexts can't use...")  [行128]
    │
    └─ new ModuleDependencyWarning(module, w, d.loc)  [行3561]
           └─ (CriticalDependencyWarning が w として渡される)

ImportMetaPlugin                                 [ImportMetaPlugin.js]
    └─ module.addWarning(
           new ModuleDependencyWarning(
               module,
               new CriticalDependencyWarning("'import.meta' cannot be used..."),  [行192]
               loc
           )
       )                                          [行189-197]
```

### データフロー図

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

動的require/import式       ───> ContextDependency              ───> CriticalDependencyWarning
  (静的解析不可)                 critical プロパティ設定              │
                                                                    │ getWarnings()
g/yフラグ付き正規表現      ───> ContextDependency              ───> │
                                hadGlobalOrStickyRegExp              │
                                                                    v
import.meta単独使用        ───> ImportMetaPlugin               ───> ModuleDependencyWarning
                                                                    (CriticalDependencyWarningをラップ)
                                                                    │
                                                                    v
                                                              Compilation.warnings[]
                                                                    │
                                                                    v
                                                              Stats出力
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CriticalDependencyWarning.js | `lib/dependencies/CriticalDependencyWarning.js` | ソース | 重大依存関係警告クラス定義 |
| WebpackError.js | `lib/WebpackError.js` | ソース | 基底エラー/警告クラス |
| ContextDependency.js | `lib/dependencies/ContextDependency.js` | ソース | コンテキスト依存関係、getWarnings()でCriticalDependencyWarning生成 |
| ImportMetaPlugin.js | `lib/dependencies/ImportMetaPlugin.js` | ソース | import.meta関連の警告生成 |
| Compilation.js | `lib/Compilation.js` | ソース | reportDependencyErrorsAndWarningsでの収集 |
| ModuleDependencyWarning.js | `lib/ModuleDependencyWarning.js` | ソース | CriticalDependencyWarningのラッパー |
| makeSerializable.js | `lib/util/makeSerializable.js` | ソース | シリアライズ登録ユーティリティ |
