# 画面設計書 17-App

## 概要

本ドキュメントは、webpackサンプルプロジェクト「code-splitting-depend-on-advanced」に含まれるApp画面の設計仕様を記載する。`dependOn`設定によるエントリポイント間の依存関係宣言と、ランタイムチャンク分離（`runtimeChunk: "single"`）を実証するアプリケーションシェルである。

### 本画面の処理概要

Appは、code-splitting-depend-on-advancedサンプルにおけるアプリケーションシェルであり、isomorphic-fetchとlodashライブラリを使用するエントリポイントである。other-vendorsエントリに依存する`dependOn`設定パターンを実証する。

**業務上の目的・背景**：本画面はwebpackの`dependOn`オプションによる高度なコード分割を検証するために存在する。`dependOn`は複数のエントリポイント間で共通モジュールの重複を排除するための宣言的な依存関係メカニズムである。app.jsが`other-vendors`エントリに`dependOn`することで、isomorphic-fetchやlodashがother-vendorsチャンクに集約され、app.jsのチャンクからは除外される。さらに`runtimeChunk: "single"`設定により、webpackランタイムコードが全エントリ間で共有される単一チャンクとして分離される。

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

**主要な操作・処理内容**：
1. app.jsが実行され、isomorphic-fetchモジュールをESM形式でimportする
2. lodashモジュールをESM形式でimportする
3. `console.log(isomorphicFetch, lodash)`でインポートしたモジュールをコンソールに出力する

**画面遷移**：Page 1（page1.js）がappに`dependOn`しており、AppはPage 1の前提条件となるエントリポイントである。Appから他画面への明示的な遷移は定義されていない。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 4 | エントリポイント管理 | 主機能 | dependOn設定によりother-vendorsに依存するエントリポイント。isomorphic-fetchとlodashを使用 |
| 12 | SplitChunksPlugin | 補助機能 | エントリ間の共通モジュール分割 |
| 21 | ランタイムチャンク分離 | 補助機能 | runtimeChunk:'single'設定によるランタイムコードの独立チャンク化 |
| 3 | モジュール処理 | 補助機能 | isomorphic-fetch,lodash等のnpmモジュール処理 |

## 画面種別

アプリケーションシェル（コンソール出力のみ）

## URL/ルーティング

- 専用HTMLテンプレートなし
- エントリポイント: `app` (webpack.config.jsのentry設定)
- ビルド出力: runtime.js（共有ランタイム）→ other-vendors.js → app.js

## 入出力項目

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

## 表示項目

| 項目名 | 種別 | 出力先 | 説明 |
|--------|------|--------|------|
| isomorphicFetch, lodash | コンソール出力 | console.log | インポートしたモジュールオブジェクトを出力 |

## イベント仕様

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

app.jsの実行時、以下の処理が順次実行される：
1. ESM import文によりisomorphic-fetchモジュールが読み込まれる
2. ESM import文によりlodashモジュールが読み込まれる
3. `console.log(isomorphicFetch, lodash)`でモジュール内容をコンソール出力する

注: `dependOn: ["other-vendors"]`設定により、isomorphic-fetchとlodashは実際にはother-vendorsチャンクに含まれ、app.jsチャンクからは除外される。ただしapp.jsからのimport文は正常に解決される。

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| M-01 | 情報（コンソール） | isomorphicFetch, lodash | ページ読み込み時 |

## 例外処理

| 例外 | 条件 | 動作 |
|------|------|------|
| ランタイムチャンクロード失敗 | runtime.jsが読み込めない場合 | 全てのエントリポイントが動作不能になる |
| other-vendorsチャンクロード失敗 | other-vendors.jsが読み込めない場合 | isomorphic-fetch, lodashの解決に失敗する |
| npmモジュール未インストール | isomorphic-fetchまたはlodashがnode_modulesに存在しない場合 | ビルド時にモジュール解決エラー |

## 備考

- other-vendors.jsは`./other-vendors`ファイルをエントリポイントとし、lodashとisomorphic-fetchを含む
- app.jsのdependOn設定により、other-vendorsが先に評価されることが保証される
- `runtimeChunk: "single"`により、全エントリポイントで共有されるwebpackランタイムが単一の`runtime.js`チャンクに分離される
- `chunkIds: "named"`でビルド出力のチャンク名が可読性のある名前となる

---

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

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

### 推奨読解順序

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

npmモジュールの依存関係とother-vendorsの構成を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | other-vendors.js | `examples/code-splitting-depend-on-advanced/other-vendors.js` | lodashとisomorphic-fetchをimportし、console.logで出力。app.jsとモジュールを共有する中間エントリ |

**読解のコツ**: `dependOn`はwebpack設定レベルの依存宣言であり、ソースコード上のimport/requireとは別の概念である。other-vendors.jsがlodashとisomorphic-fetchを含み、app.jsが同じモジュールをimportしても重複は排除される。

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

App（app.js）のエントリポイントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | app.js | `examples/code-splitting-depend-on-advanced/app.js` | 行1: isomorphic-fetchのESMインポート。行2: lodashのESMインポート。行4: console.logでモジュール出力 |

**主要処理フロー**:
1. **行1**: `import isomorphicFetch from "isomorphic-fetch"` - HTTPクライアントモジュールのインポート
2. **行2**: `import lodash from "lodash"` - ユーティリティライブラリのインポート
3. **行4**: `console.log(isomorphicFetch, lodash)` - モジュール内容のコンソール出力

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

dependOnとruntimeChunkの設定を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | webpack.config.js | `examples/code-splitting-depend-on-advanced/webpack.config.js` | 行6: appエントリの`dependOn: ["other-vendors"]`設定。行9: other-vendorsエントリ定義。行12: `runtimeChunk: "single"`設定 |

**主要処理フロー**:
- **行5-6**: `app: { import: "./app.js", dependOn: ["other-vendors"] }` - appがother-vendorsに依存
- **行7**: `page1: { import: "./page1.js", dependOn: ["app", "react-vendors"] }` - page1がappとreact-vendorsに依存
- **行8**: `"react-vendors": ["react", "react-dom", "prop-types"]` - React関連パッケージのvendorエントリ
- **行9**: `"other-vendors": "./other-vendors"` - lodash/isomorphic-fetchのvendorエントリ
- **行12**: `runtimeChunk: "single"` - ランタイムの単一チャンク分離

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

```
webpack runtime (runtime.js)
    |
    +-- other-vendors.js [dependOn先]
    |       |
    |       +-- import lodash
    |       +-- import isomorphic-fetch
    |       +-- console.log(lodash, isomorphicFetch)
    |
    +-- app.js [dependOn: other-vendors]
            |
            +-- import isomorphic-fetch  [other-vendorsチャンクから解決]
            +-- import lodash  [other-vendorsチャンクから解決]
            +-- console.log(isomorphicFetch, lodash)
```

### データフロー図

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

runtime.js読み込み     webpackランタイム初期化
                           |
other-vendors.js      lodash, isomorphic-fetch
読み込み               をモジュールレジストリに登録
                           |
app.js読み込み         import文の解決                   console.log
                      (other-vendorsから取得) -------> (isomorphicFetch,
                           |                            lodash)
                      page1.jsへの依存提供
```

### 関連ファイル一覧

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