# 画面設計書 16-Page C

## 概要

本ドキュメントは、webpackサンプルプロジェクト「two-explicit-vendor-chunks」に含まれるPage C画面の設計仕様を記載する。Page Bと同様に、vendorバンドルに依存するエントリポイントとして登録された最小構成のページである。

### 本画面の処理概要

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

**業務上の目的・背景**：本画面はSplitChunksPluginによる明示的なvendorバンドル分離において、複数のvendor非依存ページが存在する場合のチャンク構成を実証するために存在する。Page A（vendor1,vendor2依存あり）、Page B（vendor非依存）、Page C（vendor非依存）の3パターンにおけるチャンク出力の違いを比較検証する。

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

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

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

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

## 関連機能

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

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

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

## イベント仕様

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- pageC.jsは1行のみの非常にシンプルなモジュールであり、pageBと構造的に同一（エクスポート文字列のみ異なる）
- webpack.config.jsのentry設定で`pageC: "./pageC"`として登録されている
- 画面遷移図ではPage Cはvendor2のみに関連付けられている（vendor2 → pageC）。ただしソースコード上はpageC.js自体にvendor2へのrequireは存在しない

---

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

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

### 推奨読解順序

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

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

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

**読解のコツ**: Page A（vendor依存あり）、Page B（vendor非依存）、Page C（vendor非依存）の3つを比較して、vendorチャンク分離がビルド出力にどう影響するかに注目する。

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

エントリポイント登録とvendorチャンク分離設定を確認する。

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

**主要処理フロー**:
- **行13**: pageCのエントリポイント定義
- **行15-17**: output設定で`filename: "[name].js"`を指定

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

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

### データフロー図

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

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

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| pageC.js | `examples/two-explicit-vendor-chunks/pageC.js` | ソース | Page Cのエントリポイント |
| pageA.js | `examples/two-explicit-vendor-chunks/pageA.js` | ソース | Page A（vendor依存あり、比較対象） |
| pageB.js | `examples/two-explicit-vendor-chunks/pageB.js` | ソース | Page B（同構造、比較対象） |
| 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設定 |
