# 画面設計書 11-Dashboard

## 概要

本ドキュメントは、webpackサンプルプロジェクト「reexport-components」に含まれるDashboard画面の設計仕様を記載する。Reactベースのダッシュボードページであり、ButtonコンポーネントとCheckboxコンポーネントを使用するSPA画面である。Tree Shakingによる最適化のデモンストレーションを目的とする。

### 本画面の処理概要

Dashboard画面は、reexport-componentsサンプルにおいてReactコンポーネントのre-exportパターンとTree Shaking最適化を実証するための画面である。

**業務上の目的・背景**：本画面はwebpackのTree Shaking機能、特にre-exportされたモジュールに対するInnerGraph解析とusedExports最適化の動作を検証するために存在する。コンポーネントの再エクスポートパターン（`components/index.js`からの名前付きエクスポート）において、実際に使用されるコンポーネント（Button、Checkbox）のみがバンドルに含まれ、未使用のコンポーネント（Dialog、DialogInline）が除去されることを確認する業務課題を解決する。

**画面へのアクセス方法**：`example.js`がエントリーポイントとなり、動的import式 `import(\`./pages/${page}\`)` によってページ名を指定することでDashboardが遅延読み込みされる。変数`page`に`"Dashboard"`を設定することでアクセスされる。

**主要な操作・処理内容**：
1. example.jsから動的importによりDashboard.jsモジュールが非同期読み込みされる
2. Dashboard.jsが`components/index.js`からButtonとCheckboxをnamed importする
3. Reactコンポーネントとしてレンダリングされ、ButtonとCheckboxが画面に描画される
4. Tree Shakingにより、DialogおよびDialogInlineはバンドルに含まれない

**画面遷移**：example.jsから動的importにより遷移する。同じexample.jsからLogin画面にも遷移可能。Dashboard画面からの明示的な画面遷移先は定義されていない。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 15 | Tree Shaking | 主機能 | Button,Checkboxのみインポートし、未使用のDialog等を除去する最適化 |
| 13 | 動的インポート | 主機能 | example.jsからimport(./pages/Dashboard)で動的に読み込まれる |
| 8 | JavaScriptパーサ | 補助機能 | JSX構文を含むReactコンポーネントの解析 |
| 16 | InnerGraph解析 | 補助機能 | re-exportパターンにおける変数使用追跡で精密なTree Shakingを実現 |
| 14 | モジュール連結（Scope Hoisting） | 補助機能 | コンポーネントモジュール群のスコープ結合による最適化 |
| 3 | モジュール処理 | 補助機能 | Reactコンポーネントモジュールの解析・変換 |

## 画面種別

ダッシュボード（表示専用）

## URL/ルーティング

動的importによるルーティング: `import(\`./pages/${page}\`)` において `page = "Dashboard"` を指定。
物理的なHTMLページは存在せず、SPAの一部として動的に読み込まれる。

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| page | 入力（ルーティングパラメータ） | string | Yes | `"Dashboard"` を指定 |

## 表示項目

| 項目名 | 種別 | コンポーネント | 説明 |
|--------|------|----------------|------|
| ボタン | UI要素 | Button | `<button />`要素を描画する |
| チェックボックス | UI要素 | Checkbox | `<input type="checkbox" />`要素を描画する |

## イベント仕様

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

example.jsの動的import式が評価されると、webpackランタイムがDashboard.jsチャンクを非同期で読み込む。チャンクのロード完了後、Reactコンポーネントがマウントされ、ButtonとCheckboxが描画される。

### 2-Buttonクリック

Button.jsは`<button />`要素のみを返すシンプルなコンポーネントであり、クリックイベントハンドラは定義されていない。

### 3-Checkboxクリック

Checkbox.jsは`<input type="checkbox" />`要素のみを返すシンプルなコンポーネントであり、変更イベントハンドラは定義されていない。

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

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

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

## メッセージ仕様

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

## 例外処理

| 例外 | 条件 | 動作 |
|------|------|------|
| チャンクロードエラー | Dashboard.jsのチャンクファイルが見つからない場合 | 動的importのPromiseがrejectされる |
| ページ名不正 | page変数に不正な値が設定された場合 | import()がモジュール解決に失敗する |

## 備考

- webpack.config.jsで`sideEffects: true`と`usedExports: true`が有効化されており、本画面でのTree Shaking最適化が保証される
- babel-loaderに`@babel/react`プリセットが設定されており、JSX構文の変換が行われる
- `chunkIds: "named"` と `moduleIds: "named"` により、ビルド出力のチャンク名が可読性の高い名前となる

---

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

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

### 推奨読解順序

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

コンポーネントのre-exportパターンを理解する。`components/index.js`が各コンポーネントを集約してre-exportしている。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.js | `examples/reexport-components/components/index.js` | 4つのコンポーネント（Button, Checkbox, Dialog, DialogInline）をre-exportするバレルファイル。default exportとnamed exportの混在パターンに注目 |
| 1-2 | Button.js | `examples/reexport-components/components/Button.js` | `export { Button as default }` というdefault exportパターン。index.jsでは`export { default as Button }`で再公開 |
| 1-3 | Checkbox.js | `examples/reexport-components/components/Checkbox.js` | `export { Checkbox }` というnamed exportパターン。index.jsでは`export * from`で再公開 |

**読解のコツ**: `export { default as X }` と `export * from` の違いに注目する。前者はdefault exportを名前付きで再公開し、後者はnamed exportをそのまま転送する。

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

処理の起点となるexample.jsと、動的importの仕組みを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | example.js | `examples/reexport-components/example.js` | 行2: `import(\`./pages/${page}\`)` でテンプレートリテラルによる動的importを実行。webpackは`./pages/`配下の全.jsファイルをチャンク候補として認識する |

**主要処理フロー**:
1. **行1**: ルーター的な役割のコメント（`// insert router here`）
2. **行2**: 動的import式が評価され、pagesディレクトリ配下の指定ページモジュールが非同期ロードされる

#### Step 3: Dashboard画面コンポーネントを理解する

実際のDashboard画面の実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Dashboard.js | `examples/reexport-components/pages/Dashboard.js` | 行1: `components/index.js`からButtonとCheckboxのみをインポート。DialogとDialogInlineはインポートしていないためTree Shakingの対象となる |

**主要処理フロー**:
- **行1**: `import { Button, Checkbox } from "../components"` でバレルファイルから2つのコンポーネントをnamed import
- **行3-9**: Dashboard関数コンポーネントを定義。React Fragmentでラップし、ButtonとCheckboxを描画
- **行11**: `export default Dashboard` でデフォルトエクスポート

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

ビルド最適化設定を確認し、Tree Shakingがどのように有効化されているかを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | webpack.config.js | `examples/reexport-components/webpack.config.js` | 行21-28: `sideEffects: true`でサイドエフェクト解析を有効化、`usedExports: true`で未使用エクスポートの検出を有効化。この2つの設定がTree Shakingの根幹 |

**主要処理フロー**:
- **行7-19**: babel-loaderで`@babel/react`プリセットを使用し、JSXをReact.createElement呼び出しに変換
- **行21-28**: optimizationセクションで`chunkIds: "named"`, `moduleIds: "named"`, `sideEffects: true`, `usedExports: true`を設定

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

```
example.js
    |
    +-- import(`./pages/${page}`)  [動的import]
            |
            +-- Dashboard.js  [非同期チャンク]
                    |
                    +-- components/index.js  [バレルファイル]
                            |
                            +-- Button.js  [使用される -> バンドルに含まれる]
                            +-- Checkbox.js  [使用される -> バンドルに含まれる]
                            +-- Dialog.js  [未使用 -> Tree Shakingで除去]
                            +-- DialogInline.js  [未使用 -> Tree Shakingで除去]
```

### データフロー図

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

page変数               example.js                    Dashboard画面
("Dashboard") -----> import(`./pages/${page}`) ---> React.render()
                          |                              |
                     webpack runtime               +-----+-----+
                     チャンクローダー               |           |
                          |                      Button   Checkbox
                     Dashboard.js               (<button/>) (<input
                     チャンク取得                         type="checkbox"/>)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Dashboard.js | `examples/reexport-components/pages/Dashboard.js` | ソース | Dashboard画面のReactコンポーネント定義 |
| Login.js | `examples/reexport-components/pages/Login.js` | ソース | 同一サンプル内の別ページ（比較対象） |
| example.js | `examples/reexport-components/example.js` | ソース | エントリーポイント。動的importでページを読み込む |
| index.js | `examples/reexport-components/components/index.js` | ソース | コンポーネントのバレルファイル（re-export集約） |
| Button.js | `examples/reexport-components/components/Button.js` | ソース | Buttonコンポーネント定義 |
| Checkbox.js | `examples/reexport-components/components/Checkbox.js` | ソース | Checkboxコンポーネント定義 |
| Dialog.js | `examples/reexport-components/components/Dialog.js` | ソース | Dialogコンポーネント定義（Dashboard未使用、Tree Shaking対象） |
| DialogInline.js | `examples/reexport-components/components/DialogInline.js` | ソース | DialogInlineコンポーネント定義（Dashboard未使用、Tree Shaking対象） |
| webpack.config.js | `examples/reexport-components/webpack.config.js` | 設定 | ビルド設定。Tree Shaking最適化パラメータを定義 |
