# 画面設計書 4-Page D

## 概要

本ドキュメントは、webpackサンプルプロジェクト「many-pages」におけるPage Dの画面設計書である。Page Dはmany-pagesサンプルの7つのエントリポイントの1つであり、Page E, F, Gとm6, m7, m8のvendorモジュールを共有するグループに属する。

### 本画面の処理概要

Page Dは、webpackの`optimization.splitChunks`機能を活用した共通チャンク最適化デモにおける1つのエントリポイントページである。npmモジュール（m6, m7, m8）とアプリケーションモジュール（stuff/s1, s2, s3）をインポートし、他のページとの共通モジュールが自動的に分割・共有される仕組みを示す。

**業務上の目的・背景**：webpackのSplitChunksPluginが複数ページ間で共通モジュールを自動検出し、最適なチャンク分割を行う仕組みを実証する。Page DはPage E, F, Gとm6を共有し、Page E, Fとm7, m8を共有する。さらにstuff/s2, s3をPage A, Fと共有する。異なるvendorグループとstuffグループが交差する複雑な共有パターンを示す。

**画面へのアクセス方法**：webpackビルド後に生成される`pageD.js`をHTMLファイルから読み込むことでアクセスする。エントリポイント名は`pageD`であり、webpack設定の`entry.pageD`として`./pages/d`が登録されている。

**主要な操作・処理内容**：
1. npmモジュール m6, m7, m8 をimport文で読み込む
2. アプリケーションモジュール stuff/s1, stuff/s2, stuff/s3 をimport文で読み込む
3. webpackのSplitChunksPluginにより、m6はPage D, E, F, Gと共有チャンク（301.js）に分割される
4. m7, m8はPage D, E, Fと共有チャンク（778.js）に分割される
5. stuff/s2, s3はPage A, Fと共有チャンク（554.js）に分割される
6. stuff/s1はPage Dのエントリチャンクに含有される

**画面遷移**：many-pagesサンプルでは明示的な画面遷移は定義されていない。各ページは独立したエントリポイントとして動作し、共通モジュールによるチャンク共有関係のみが存在する。

**権限による表示制御**：該当なし。本サンプルには認証・認可機能は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 4 | エントリポイント管理 | 主機能 | エントリポイントとして登録され、モジュールm6,m7,m8およびstuff/s1,s2,s3を読み込む |
| 12 | SplitChunksPlugin | 主機能 | 共通モジュール(m6,m7,m8等)を他ページと共有するための自動チャンク分割 |
| 3 | モジュール処理 | 補助機能 | 各importモジュールの解析・変換処理 |
| 6 | 依存性解析 | 補助機能 | ESModule形式のimport依存関係を解析・追跡 |
| 10 | チャンクグラフ構築 | 補助機能 | 共有モジュールに基づくチャンクグラフの生成・管理 |
| 11 | チャンクグループ管理 | 補助機能 | 分割されたチャンクの並列読み込み制御 |
| 18 | 重複チャンク除去 | 補助機能 | 冗長な共有チャンクの検出・除去 |

## 画面種別

エントリポイントページ（webpackビルドデモ）

## URL/ルーティング

- エントリポイント名: `pageD`
- ソースパス: `./pages/d`（webpack.config.jsのentry設定）
- 出力ファイル: `pageD.js`（productionビルド時）

## 入出力項目

| 項目名 | 種別 | 型 | 説明 |
|--------|------|-----|------|
| m6 | 入力（import） | Module | npmモジュール。コンソールにメッセージを出力 |
| m7 | 入力（import） | Module | npmモジュール。コンソールにメッセージを出力 |
| m8 | 入力（import） | Module | npmモジュール。コンソールにメッセージを出力 |
| stuff/s1 | 入力（import） | Module | アプリケーションモジュール。コンソールにメッセージを出力 |
| stuff/s2 | 入力（import） | Module | アプリケーションモジュール。コンソールにメッセージを出力 |
| stuff/s3 | 入力（import） | Module | アプリケーションモジュール。コンソールにメッセージを出力 |

## 表示項目

本画面はUI表示を持たないwebpackビルドデモである。各モジュールのインポート時にコンソールへメッセージが出力される。

| 出力先 | 内容 | モジュール |
|--------|------|-----------|
| console | "a module installed from npm" | m6, m7, m8 |
| console | "some own module" | stuff/s1, stuff/s2, stuff/s3 |

## イベント仕様

### 1-ページ読み込み

ブラウザがエントリポイントファイル（pageD.js）および関連チャンクファイルを読み込む際、以下の処理が実行される。

1. webpackランタイムが初期化される
2. 共有vendorチャンク（301.js: m6）が読み込まれる
3. 共有vendorチャンク（778.js: m7, m8）が読み込まれる
4. 共有アプリチャンク（554.js: s2, s3）が読み込まれる
5. pageDエントリチャンクが実行され、各モジュールのimport文が解決される
6. 各モジュールの`console.log`が実行される

## データベース更新仕様

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

該当なし。本画面はデータベースを使用しない。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 出力条件 |
|-------------|------|---------------|---------|
| M-01 | 情報 | "a module installed from npm" | m6, m7, m8モジュール読み込み時にそれぞれ出力 |
| M-02 | 情報 | "some own module" | stuff/s1, s2, s3モジュール読み込み時にそれぞれ出力 |

## 例外処理

| 例外条件 | 動作 |
|---------|------|
| チャンクファイルの読み込み失敗 | webpackランタイムがエラーをスローし、依存モジュールが解決されない |
| モジュール解決失敗 | webpack ModuleNotFoundError が発生（ビルド時に検出） |

## 備考

- Page DはPage A〜Cグループ（m1, m2共有）とは異なるvendorグループ（m6, m7, m8共有）に属する
- stuff/s2, s3はPage Aとも共有しており、vendorグループをまたいだ共有パターンを示す
- ビルド出力ではpageD.jsは137バイト（JavaScript）+ 3.01KiB（ランタイム）で構成される

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | m6.js | `examples/many-pages/node_modules/m6.js` | npmモジュール。Page D, E, F, Gと共有（行1） |
| 1-2 | m7.js | `examples/many-pages/node_modules/m7.js` | npmモジュール。Page D, E, Fと共有（行1） |
| 1-3 | m8.js | `examples/many-pages/node_modules/m8.js` | npmモジュール。Page D, E, Fと共有（行1） |
| 1-4 | s1.js | `examples/many-pages/stuff/s1.js` | アプリモジュール（行1） |
| 1-5 | s2.js | `examples/many-pages/stuff/s2.js` | アプリモジュール。Page A, Fと共有（行1） |
| 1-6 | s3.js | `examples/many-pages/stuff/s3.js` | アプリモジュール。Page A, Fと共有（行1） |

**読解のコツ**: Page Dは2つの共有グループに属する。vendorグループ（m6: D,E,F,G共有、m7,m8: D,E,F共有）とstuffグループ（s2,s3: A,D,F共有）が交差する点に注目する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | d.js | `examples/many-pages/pages/d.js` | Page Dのエントリポイント。6つのimport文（行1〜7） |

**主要処理フロー**:
1. **行1**: `import "m6"` - npmモジュールm6を読み込み（Page E, F, Gと共有）
2. **行2**: `import "m7"` - npmモジュールm7を読み込み（Page E, Fと共有）
3. **行3**: `import "m8"` - npmモジュールm8を読み込み（Page E, Fと共有）
4. **行5**: `import "../stuff/s1"` - アプリモジュールs1を読み込み
5. **行6**: `import "../stuff/s2"` - アプリモジュールs2を読み込み（Page A, Fと共有）
6. **行7**: `import "../stuff/s3"` - アプリモジュールs3を読み込み（Page A, Fと共有）

#### Step 3: webpack設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | webpack.config.js | `examples/many-pages/webpack.config.js` | エントリポイント定義（行10: pageD）とsplitChunks設定 |

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

```
webpack.config.js (エントリ定義)
    |
    +-- entry.pageD = "./pages/d"
            |
            +-- pages/d.js (エントリポイント)
                    |
                    +-- import "m6" --> node_modules/m6.js --> console.log(...)
                    +-- import "m7" --> node_modules/m7.js --> console.log(...)
                    +-- import "m8" --> node_modules/m8.js --> console.log(...)
                    +-- import "../stuff/s1" --> stuff/s1.js --> console.log(...)
                    +-- import "../stuff/s2" --> stuff/s2.js --> console.log(...)
                    +-- import "../stuff/s3" --> stuff/s3.js --> console.log(...)
```

### データフロー図

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

pages/d.js ────────────┐
                       |
node_modules/m6.js ───>|                                     pageD.js (エントリチャンク)
node_modules/m7.js ───>|   webpack SplitChunksPlugin         301.js (vendors: m6 D,E,F,G共有)
node_modules/m8.js ───>|   チャンク分割・最適化        ───>   778.js (vendors: m7,m8 D,E,F共有)
stuff/s1.js ──────────>|                                     554.js (default: s2,s3 A,D,F共有)
stuff/s2.js ──────────>|                                     ※s1はpageD.jsに含有
stuff/s3.js ──────────>|
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| d.js | `examples/many-pages/pages/d.js` | ソース | Page Dのエントリポイント |
| webpack.config.js | `examples/many-pages/webpack.config.js` | 設定 | webpackビルド設定・SplitChunks設定 |
| m6.js | `examples/many-pages/node_modules/m6.js` | ソース | npmモジュール。Page D, E, F, Gと共有 |
| m7.js | `examples/many-pages/node_modules/m7.js` | ソース | npmモジュール。Page D, E, Fと共有 |
| m8.js | `examples/many-pages/node_modules/m8.js` | ソース | npmモジュール。Page D, E, Fと共有 |
| s1.js | `examples/many-pages/stuff/s1.js` | ソース | アプリモジュール |
| s2.js | `examples/many-pages/stuff/s2.js` | ソース | アプリモジュール。Page A, Fと共有 |
| s3.js | `examples/many-pages/stuff/s3.js` | ソース | アプリモジュール。Page A, Fと共有 |
| README.md | `examples/many-pages/README.md` | ドキュメント | サンプルの解説・ビルド結果の説明 |
