# 画面設計書 12-Page A

## 概要

本ドキュメントは、webpackサンプルプロジェクト「multiple-entry-points」に含まれるPage A画面の設計仕様を記載する。複数エントリポイントによるコード分割と、共通モジュール（commons.js）の共有チャンク化を実証するページである。

### 本画面の処理概要

Page Aは、multiple-entry-pointsサンプルにおいて複数のエントリポイント間でのSplitChunksPluginによる共通モジュール抽出を実証する画面である。

**業務上の目的・背景**：本画面はwebpackの複数エントリポイント構成において、共通モジュール（common.js）を自動的に共有チャンク（commons.js）として分割し、重複コードを排除する最適化手法を検証するために存在する。pageAとpageBが同じcommon.jsに依存するとき、SplitChunksPluginが`minChunks: 2`の条件で共通チャンクを生成することを確認する。

**画面へのアクセス方法**：pageA.htmlを直接ブラウザで開く。HTMLファイルは`commons.js`スクリプトを先に読み込み、続いて`pageA.bundle.js`を読み込む構成となっている。また、pageAB.htmlではpageAとpageBの両方が同時に読み込まれる。

**主要な操作・処理内容**：
1. pageA.jsがエントリポイントとして実行され、common.jsモジュールをrequireで同期読み込みする
2. AMD形式の`require(["./shared"], callback)`で非同期的にsharedモジュールを読み込む
3. sharedモジュールのコールバック関数内で`shared("This is page A")`を実行し、コンソールにメッセージを出力する

**画面遷移**：pageA.htmlはPage Aのみを含む単独ページ。pageAB.htmlではPage AとPage Bの両方が含まれる。明示的な画面間の遷移リンクは定義されていない。

**権限による表示制御**：権限による表示制御は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 4 | エントリポイント管理 | 主機能 | 複数エントリポイントの一つとして登録。common.jsを共有 |
| 12 | SplitChunksPlugin | 主機能 | commons.jsチャンクとしてcommon.jsをPageBと共有分割 |
| 6 | 依存性解析 | 補助機能 | CommonJS(require)およびAMD形式の依存関係を解析 |
| 13 | 動的インポート | 補助機能 | AMD形式のrequire(["./shared"])による非同期モジュール読み込み |
| 3 | モジュール処理 | 補助機能 | 共通モジュールおよびページ固有モジュールの解析・変換 |

## 画面種別

エントリポイントページ（コンソール出力のみ）

## URL/ルーティング

- `pageA.html` - Page A単独表示
- `pageAB.html` - Page AとPage Bの複合表示

HTMLファイルでのスクリプト読み込み順序：
1. `js/commons.js` （共通チャンク）
2. `js/pageA.bundle.js` （Page A固有チャンク）

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| なし | - | - | - | 本画面はユーザー入力を受け付けない |

## 表示項目

| 項目名 | 種別 | 出力先 | 説明 |
|--------|------|--------|------|
| "This is page A" | コンソール出力 | console.log | sharedモジュール経由で出力されるメッセージ |

## イベント仕様

### 1-ページ読み込み（同期処理）

pageA.jsの実行開始時、行1で`var common = require("./common")`が同期的に実行される。common.jsは文字列`"Common"`をexportするモジュールであり、変数`common`に格納される。

### 2-非同期モジュール読み込み（AMD形式）

行2-4のAMD形式`require(["./shared"], callback)`により、shared.jsモジュールが非同期で読み込まれる。webpackはこれを動的チャンクとして処理する。チャンクロード完了後、コールバック関数が実行され、shared関数に`"This is page A"`を渡してconsole.logで出力する。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | 本画面はフロントエンドのみのデモであり、データベース操作は存在しない |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| M-01 | 情報（コンソール） | "This is page A" | sharedモジュールの非同期読み込み完了後 |

## 例外処理

| 例外 | 条件 | 動作 |
|------|------|------|
| commons.jsロード失敗 | 共通チャンクファイルが見つからない場合 | pageA.bundle.jsの実行がcommon.jsの未定義エラーで失敗する |
| 非同期チャンクロード失敗 | sharedモジュールのチャンクが読み込めない場合 | AMD形式のrequireコールバックが呼ばれない |

## 備考

- webpack.config.jsでSplitChunksPluginの設定として`minChunks: 2`, `minSize: 0`, `chunks: "initial"`が指定されている
- `minSize: 0`により、サイズが小さいモジュールでも共通チャンクとして抽出される
- common.jsはpageA.jsとpageB.jsの両方からrequireされるため、共通チャンクcommonsに含まれる
- AMD形式のrequireはwebpackによって動的importとして解釈される

---

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

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

### 推奨読解順序

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

共通モジュールとsharedモジュールのデータ構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | common.js | `examples/multiple-entry-points/common.js` | `module.exports = "Common"` で文字列を公開。pageAとpageBの両方で共有されるモジュール |
| 1-2 | shared.js | `examples/multiple-entry-points/shared.js` | common.jsをrequireし、引数のメッセージをconsole.logで出力する関数をexportする |

**読解のコツ**: CommonJSの`module.exports`とAMD形式の`require([], callback)`の2種類のモジュール形式が混在している点に注目する。

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

Page Aのエントリーポイントファイルを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | pageA.js | `examples/multiple-entry-points/pageA.js` | 行1: CommonJS形式でcommon.jsを同期require。行2-4: AMD形式のrequireでshared.jsを非同期読み込みし、コールバックでメッセージ出力 |

**主要処理フロー**:
1. **行1**: `var common = require("./common")` - common.jsを同期的に読み込み
2. **行2**: `require(["./shared"], function(shared) {` - AMD形式でsharedを非同期読み込み開始
3. **行3**: `shared("This is page A")` - 非同期読み込み完了後、shared関数を呼び出してメッセージ出力

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

SplitChunksPluginの設定と複数エントリポイントの定義を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | webpack.config.js | `examples/multiple-entry-points/webpack.config.js` | 行6-9: pageAとpageBの2つのエントリポイント定義。行11-19: SplitChunksPluginでcommonsキャッシュグループを設定 |

**主要処理フロー**:
- **行6-9**: `entry`に`pageA: "./pageA"`と`pageB: "./pageB"`を定義
- **行13-14**: `name: "commons"`, `chunks: "initial"` で初期チャンクのみ対象
- **行15-16**: `minChunks: 2`で2つ以上のエントリで使用されるモジュールを共通化、`minSize: 0`でサイズ制約なし

#### Step 4: HTMLテンプレートを理解する

ブラウザでの読み込み順序を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | pageA.html | `examples/multiple-entry-points/pageA.html` | commons.jsを先にロードし、次にpageA.bundle.jsをロードする順序制御 |
| 4-2 | pageAB.html | `examples/multiple-entry-points/pageAB.html` | commons.js → pageA.bundle.js → pageB.bundle.jsの順にロード。複合ページのパターン |

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

```
pageA.js [エントリポイント]
    |
    +-- require("./common")  [同期読み込み]
    |       |
    |       +-- common.js  -> "Common"
    |
    +-- require(["./shared"], callback)  [AMD非同期読み込み]
            |
            +-- shared.js
                    |
                    +-- require("./common")  -> "Common"
                    +-- console.log("This is page A")
```

### データフロー図

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

HTMLロード             commons.jsチャンク読み込み
(pageA.html) ------> (common.js含む)
                          |
                     pageA.bundle.js実行
                          |
                     +----+----+
                     |         |
               common.js   shared.js             console.log
               (同期)       (非同期AMD)   ------> "This is page A"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| pageA.js | `examples/multiple-entry-points/pageA.js` | ソース | Page Aのエントリポイント |
| pageB.js | `examples/multiple-entry-points/pageB.js` | ソース | Page Bのエントリポイント（共通チャンク共有先） |
| common.js | `examples/multiple-entry-points/common.js` | ソース | 共通モジュール。pageAとpageBで共有 |
| shared.js | `examples/multiple-entry-points/shared.js` | ソース | 非同期読み込みモジュール。メッセージ出力関数 |
| webpack.config.js | `examples/multiple-entry-points/webpack.config.js` | 設定 | エントリポイントとSplitChunksPluginの設定 |
| pageA.html | `examples/multiple-entry-points/pageA.html` | テンプレート | Page A単独表示用HTML |
| pageAB.html | `examples/multiple-entry-points/pageAB.html` | テンプレート | Page A+B複合表示用HTML |
