# 画面設計書 15-Page B

## 概要

本ドキュメントは、webpackサンプルプロジェクト「two-explicit-vendor-chunks」に含まれるPage B画面の設計仕様を記載する。vendorバンドルに依存するエントリポイントとして、明示的なvendorチャンク分離パターンにおける最小構成のページを実証する。

### 本画面の処理概要

Page Bは、two-explicit-vendor-chunksサンプルにおけるvendorチャンク分離デモの一部である。Page Aと異なり、pageB.js自体はvendorモジュールへの直接的なrequire呼び出しを持たない最小構成のエントリポイントである。

**業務上の目的・背景**：本画面はSplitChunksPluginによる明示的なvendorバンドル分離において、vendorモジュールへの直接依存を持たないページの挙動を実証するために存在する。webpack.config.jsでvendor1とvendor2がエントリポイントとして登録されているため、チャンク分割処理においてpageBは独立したチャンクとして出力される。

**画面へのアクセス方法**：Page B専用のHTMLファイルは提供されていない。ビルド後に生成される`pageB.js`を任意のHTMLから参照して使用する。

**主要な操作・処理内容**：
1. pageB.jsが実行され、`module.exports = "pageB"`でページ識別子をエクスポートする

**画面遷移**：他のページへの明示的な画面遷移は定義されていない。Page A、Page Cとは独立したエントリポイントである。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | SplitChunksPlugin | 主機能 | 明示的なvendorチャンクの分離。vendorバンドルに依存 |
| 4 | エントリポイント管理 | 主機能 | エントリポイントとして登録。vendorチャンクを参照 |
| 10 | チャンクグラフ構築 | 補助機能 | vendorチャンクとの依存グラフ構築 |

## 画面種別

エントリポイントページ（モジュールエクスポートのみ）

## URL/ルーティング

- 専用HTMLテンプレートなし
- ビルド出力: `dist/pageB.js`

## 入出力項目

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

## 表示項目

| 項目名 | 種別 | 出力先 | 説明 |
|--------|------|--------|------|
| なし | - | - | 本画面はmodule.exportsで文字列をエクスポートするのみ |

## イベント仕様

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

pageB.jsの実行時、`module.exports = "pageB"`が実行され、文字列"pageB"がモジュールとしてエクスポートされる。他の処理は実行されない。

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| なし | - | - | 本画面にはメッセージ出力は実装されていない |

## 例外処理

| 例外 | 条件 | 動作 |
|------|------|------|
| 特に定義なし | - | pageB.jsは単純なmodule.exportsのみのため、例外が発生する条件が存在しない |

## 備考

- pageB.jsは1行のみの非常にシンプルなモジュールであり、vendorモジュールへの直接的なrequire呼び出しを持たない
- webpack.config.jsのentry設定で`pageB: "./pageB"`として登録されている
- SplitChunksPluginのcacheGroupsでvendor1/vendor2のenforce:true設定により、pageB.jsの出力チャンクはvendorコードを含まない

---

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

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

### 推奨読解順序

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

pageB.jsのモジュール構造は非常にシンプルである。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | pageB.js | `examples/two-explicit-vendor-chunks/pageB.js` | 1行のみ。`module.exports = "pageB"`で文字列をエクスポートするだけのモジュール。vendorへの依存なし |

**読解のコツ**: Page A（vendor1,vendor2への依存あり）との対比で、vendorチャンク分離がページ固有チャンクにどう影響するかに注目する。

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

複数エントリポイント構成とvendorチャンク分離の設定を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | webpack.config.js | `examples/two-explicit-vendor-chunks/webpack.config.js` | 行12: `pageB: "./pageB"`としてエントリポイント登録。行20-33: vendor1/vendor2のcacheGroups設定はpageBには直接影響しない |

**主要処理フロー**:
- **行12**: pageBのエントリポイント定義
- **行15-17**: output設定で`filename: "[name].js"`を指定
- **行20-33**: vendor1/vendor2のenforce:true設定。pageBはvendorモジュールをrequireしないため直接の影響なし

#### Step 3: 比較対象としてPage Aを確認する

vendorチャンク依存がある場合とない場合の違いを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | pageA.js | `examples/two-explicit-vendor-chunks/pageA.js` | vendor1,vendor2をrequireしている。pageBとの対比でvendor分離の効果を理解する |

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

```
pageB.js [エントリポイント]
    |
    +-- module.exports = "pageB"  [エクスポートのみ]
    (他の呼び出しなし)
```

### データフロー図

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

スクリプトロード      pageB.js実行           module.exports
(pageB.js) -------> module.exports -------> = "pageB"
                    = "pageB"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| pageB.js | `examples/two-explicit-vendor-chunks/pageB.js` | ソース | Page Bのエントリポイント |
| pageA.js | `examples/two-explicit-vendor-chunks/pageA.js` | ソース | Page A（vendor依存あり、比較対象） |
| pageC.js | `examples/two-explicit-vendor-chunks/pageC.js` | ソース | Page C（比較対象） |
| vendor1.js | `examples/two-explicit-vendor-chunks/vendor1.js` | ソース | vendor1モジュール |
| vendor2.js | `examples/two-explicit-vendor-chunks/vendor2.js` | ソース | vendor2モジュール |
| webpack.config.js | `examples/two-explicit-vendor-chunks/webpack.config.js` | 設定 | エントリポイントとSplitChunksPlugin設定 |
