# 画面設計書 18-Page 1

## 概要

本ドキュメントは、webpackサンプルプロジェクト「code-splitting-depend-on-advanced」に含まれるPage 1画面の設計仕様を記載する。React製のページであり、`dependOn`設定によりappエントリおよびreact-vendorsエントリに依存する。さらにlazy.jsを動的import（`import()`）で遅延読み込みする高度なコード分割パターンを実証する。

### 本画面の処理概要

Page 1は、code-splitting-depend-on-advancedサンプルにおいて、`dependOn`による複数エントリ依存と動的importの組み合わせを実証するReactページである。

**業務上の目的・背景**：本画面は`dependOn`設定における複数依存先の指定パターンを検証するために存在する。page1がappとreact-vendorsの両方に`dependOn`することで、isomorphic-fetch（appからother-vendors経由）、lodash（同）、react/react-dom/prop-types（react-vendorsから）といった共有モジュールが全てpage1のチャンクから除外される。加えて、`import("./lazy")`による動的コード分割により、lazy.jsが別チャンクとして遅延読み込みされるパターンも実証する。

**画面へのアクセス方法**：ビルド後に生成されるスクリプトファイルをHTMLから参照して使用する。runtime.js → other-vendors.js → react-vendors.js → app.js → page1.jsの順に読み込む必要がある。

**主要な操作・処理内容**：
1. page1.jsが実行され、isomorphic-fetch、react、react-domモジュールをESMインポートする
2. `console.log(isomorphicFetch, react, reactDOM)`でモジュール内容をコンソール出力する
3. `import("./lazy")`によりlazy.jsを非同期で動的インポートする
4. lazy.jsはlodashとprop-typesをインポートし、console.logで出力する

**画面遷移**：Appエントリに`dependOn`しており、App（app.js）の後に実行される。lazy.jsへの動的importは内部処理であり画面遷移ではない。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 13 | 動的インポート | 主機能 | lazy.jsをimport()で動的に遅延読み込み |
| 4 | エントリポイント管理 | 主機能 | dependOn設定によりappおよびreact-vendorsに依存するエントリポイント |
| 12 | SplitChunksPlugin | 補助機能 | vendor分離とコード分割の連携 |
| 21 | ランタイムチャンク分離 | 補助機能 | 共有ランタイムチャンクの利用 |
| 3 | モジュール処理 | 補助機能 | React,react-dom等のnpmモジュール処理 |

## 画面種別

ページ（コンソール出力 + 動的インポート）

## URL/ルーティング

- 専用HTMLテンプレートなし
- エントリポイント: `page1` (webpack.config.jsのentry設定)
- ビルド出力: runtime.js → other-vendors.js → react-vendors.js → app.js → page1.js + lazy.js（非同期チャンク）

## 入出力項目

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

## 表示項目

| 項目名 | 種別 | 出力先 | 説明 |
|--------|------|--------|------|
| isomorphicFetch, react, reactDOM | コンソール出力 | console.log | page1.jsでインポートしたモジュールオブジェクトを出力 |
| lodash, propTypes | コンソール出力 | console.log | lazy.jsで動的インポート後に出力 |

## イベント仕様

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

page1.jsの実行時、以下の処理が順次実行される：
1. ESM import文によりisomorphic-fetchモジュールが読み込まれる（other-vendorsチャンクから解決）
2. ESM import文によりreactモジュールが読み込まれる（react-vendorsチャンクから解決）
3. ESM import文によりreact-domモジュールが読み込まれる（react-vendorsチャンクから解決）
4. `console.log(isomorphicFetch, react, reactDOM)`でモジュール内容をコンソール出力する

### 2-遅延読み込み（動的import）

page1.jsの行7で`import("./lazy")`が実行され、lazy.jsが非同期チャンクとして読み込まれる：
1. webpackランタイムがlazy.jsのチャンクをネットワーク経由で取得する
2. lazy.jsが実行され、lodashとprop-typesをインポートする（react-vendorsチャンクから解決）
3. `console.log(lodash, propTypes)`でモジュール内容をコンソール出力する

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| M-01 | 情報（コンソール） | isomorphicFetch, react, reactDOM | ページ読み込み時 |
| M-02 | 情報（コンソール） | lodash, propTypes | lazy.jsの動的インポート完了後 |

## 例外処理

| 例外 | 条件 | 動作 |
|------|------|------|
| 依存チャンクロード失敗 | runtime.js、other-vendors.js、react-vendors.js、app.jsのいずれかが読み込めない場合 | page1.jsのモジュール解決に失敗する |
| lazy.jsチャンクロード失敗 | 動的importのチャンクが読み込めない場合 | import()のPromiseがrejectされる |
| npmモジュール未インストール | react, react-dom, prop-types等がnode_modulesに存在しない場合 | ビルド時にモジュール解決エラー |

## 備考

- `dependOn: ["app", "react-vendors"]`により、Page 1はappとreact-vendorsの2つのエントリに依存する
- appエントリはさらにother-vendorsに依存するため、Page 1は間接的にother-vendorsにも依存する
- lazy.jsはlodash（other-vendors経由）とprop-types（react-vendors経由）を使用し、dependOnの階層的な依存解決を実証する
- `runtimeChunk: "single"`により、全エントリポイント間で共有されるランタイムチャンクが使用される

---

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

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

### 推奨読解順序

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

依存関係の階層構造を把握する。dependOnによるエントリ間依存が重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | webpack.config.js | `examples/code-splitting-depend-on-advanced/webpack.config.js` | 行5-9: 4つのエントリポイント定義とdependOn関係。page1 → app → other-vendors、page1 → react-vendorsの依存ツリー |

**読解のコツ**: `dependOn`はエントリ間の依存を宣言するwebpack固有の設定であり、Node.jsのmodule systemとは独立した概念。依存先のチャンクが先にロード・評価されることを保証する。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page1.js | `examples/code-splitting-depend-on-advanced/page1.js` | 行1-3: isomorphic-fetch, react, react-domのESMインポート。行5: console.log出力。行7: import("./lazy")の動的import |

**主要処理フロー**:
1. **行1**: `import isomorphicFetch from "isomorphic-fetch"` - HTTPクライアントのインポート
2. **行2**: `import react from "react"` - Reactのインポート
3. **行3**: `import reactDOM from "react-dom"` - ReactDOMのインポート
4. **行5**: `console.log(isomorphicFetch, react, reactDOM)` - モジュール出力
5. **行7**: `import("./lazy")` - lazy.jsの動的インポート（非同期）

#### Step 3: 遅延読み込みモジュールを理解する

動的importで読み込まれるlazy.jsを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | lazy.js | `examples/code-splitting-depend-on-advanced/lazy.js` | 行1: lodashのインポート。行2: prop-typesのインポート。行4: console.log出力。dependOnの依存チェーンから解決 |

**主要処理フロー**:
- **行1**: `import lodash from "lodash"` - other-vendorsチャンクから解決
- **行2**: `import propTypes from "prop-types"` - react-vendorsチャンクから解決
- **行4**: `console.log(lodash, propTypes)` - モジュール出力

#### Step 4: 依存先エントリを理解する

app.jsとother-vendors.jsの関係を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | app.js | `examples/code-splitting-depend-on-advanced/app.js` | isomorphic-fetchとlodashをインポート。other-vendorsにdependOn |
| 4-2 | other-vendors.js | `examples/code-splitting-depend-on-advanced/other-vendors.js` | lodashとisomorphic-fetchを含むvendorエントリ |

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

```
webpack runtime (runtime.js)
    |
    +-- other-vendors.js [vendorエントリ]
    |       +-- lodash
    |       +-- isomorphic-fetch
    |
    +-- react-vendors [vendorエントリ]
    |       +-- react
    |       +-- react-dom
    |       +-- prop-types
    |
    +-- app.js [dependOn: other-vendors]
    |       +-- import isomorphic-fetch
    |       +-- import lodash
    |
    +-- page1.js [dependOn: app, react-vendors]
            |
            +-- import isomorphic-fetch  [other-vendorsから]
            +-- import react  [react-vendorsから]
            +-- import react-dom  [react-vendorsから]
            +-- console.log(...)
            |
            +-- import("./lazy")  [動的インポート]
                    |
                    +-- lazy.js [非同期チャンク]
                            +-- import lodash  [other-vendorsから]
                            +-- import prop-types  [react-vendorsから]
                            +-- console.log(...)
```

### データフロー図

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

runtime.js               webpackランタイム初期化
                              |
other-vendors.js         lodash, isomorphic-fetch登録
                              |
react-vendors.js         react, react-dom, prop-types登録
                              |
app.js                   app初期化（dependOnから解決）
                              |
page1.js                 import文の解決                      console.log
                         (vendor チャンクから取得)  -------> (isomorphicFetch,
                              |                              react, reactDOM)
                         import("./lazy")
                              |                              console.log
                         lazy.js実行              -------> (lodash,
                         (vendorチャンクから解決)             propTypes)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page1.js | `examples/code-splitting-depend-on-advanced/page1.js` | ソース | Page 1のエントリポイント |
| lazy.js | `examples/code-splitting-depend-on-advanced/lazy.js` | ソース | 動的import対象の遅延読み込みモジュール |
| app.js | `examples/code-splitting-depend-on-advanced/app.js` | ソース | アプリケーションシェル。dependOn先 |
| other-vendors.js | `examples/code-splitting-depend-on-advanced/other-vendors.js` | ソース | lodash/isomorphic-fetchのvendorエントリ |
| webpack.config.js | `examples/code-splitting-depend-on-advanced/webpack.config.js` | 設定 | dependOnとruntimeChunkの設定 |
