# 画面設計書 16-Webpackページ

## 概要

本ドキュメントは、JestドキュメントサイトにおけるWebpackページの画面設計を定義する。このページはWebpackを使用するプロジェクトでJestを設定する方法を解説するガイドページである。

### 本画面の処理概要

Webpackページは、Webpackビルドシステムを使用するプロジェクトでJestテストフレームワークを設定する方法を解説する技術ドキュメントページである。Webpackのローダー、エイリアス、静的アセット処理に対応するJest設定を提供する。

**業務上の目的・背景**：多くのモダンJavaScriptプロジェクトはWebpackをビルドシステムとして使用している。WebpackとJestは異なるモジュール解決メカニズムを持つため、両者を統合するための設定が必要。特にCSS/画像モジュール、エイリアス、ローダー設定の整合性が重要。

**画面へのアクセス方法**：
1. ドキュメントサイトのナビゲーションメニューから「Docs」ドロップダウンを選択
2. サイドバーの「Framework Guides」セクションから「Using with webpack」を選択
3. ES6 Class Mocksページの「Next」ボタンから遷移

**主要な操作・処理内容**：
1. Webpack設定の理解：webpack.config.jsの構造を確認
2. Jest設定への変換：moduleNameMapper、transform、moduleFileExtensionsの設定
3. 静的アセットの処理：CSS、画像ファイルのモック設定
4. Webpackエイリアスの対応：moduleNameMapperでのエイリアス設定
5. 複雑なWebpack設定への対応：複数設定ファイルの統合方法

**画面遷移**：
- 遷移元：ES6 Class Mocksページ、サイドバーナビゲーション、検索結果
- 遷移先：Troubleshootingページ、Configurationページ

**権限による表示制御**：なし（公開ドキュメントのため全ユーザーが閲覧可能）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 7 | jest-config | 主機能 | moduleNameMapper、transform設定 |
| 26 | babel-jest | 補助機能 | Babel変換による互換性確保 |

## 画面種別

ドキュメント / ガイド

## URL/ルーティング

- URL: `/docs/webpack`
- ファイルパス: `docs/Webpack.md`

## 入出力項目

該当なし（静的コンテンツページのため）

## 表示項目

| No | 項目名 | 表示形式 | 説明 |
|----|--------|----------|------|
| 1 | ページタイトル | テキスト | "Using with webpack" |
| 2 | 導入文 | テキスト | Webpack連携の概要説明 |
| 3 | A webpack example セクション | コードブロック＋テキスト | Webpack設定例の紹介 |
| 4 | Configuring Jest セクション | コードブロック＋テキスト | Jest設定への変換方法 |
| 5 | Handling Static Assets セクション | コードブロック＋テキスト | 静的アセットのモック設定 |
| 6 | Configuring Jest to find our files セクション | コードブロック＋テキスト | ファイル検索設定 |
| 7 | Using with webpack aliases セクション | コードブロック＋テキスト | エイリアスの設定方法 |
| 8 | Using with webpack plugin セクション | コードブロック＋テキスト | webpack-jest-configプラグイン |
| 9 | サイドバー | ナビゲーション | ドキュメント目次 |
| 10 | Prev/Nextナビゲーション | ボタン | 前後ページへの遷移リンク |

## イベント仕様

### 1-コードブロックのコピー

ユーザーがコードブロックのコピーボタンをクリックすると、コード内容がクリップボードにコピーされる。

### 2-内部ドキュメントリンククリック

ユーザーが内部ドキュメントリンク（Configuration、Troubleshooting等）をクリックすると、該当するドキュメントページに遷移する。

### 3-外部リンククリック

ユーザーがWebpack公式ドキュメント、babel-plugin-module-resolver等の外部リンクをクリックすると、新しいタブで外部サイトが開く。

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

該当なし（静的コンテンツページのためデータベース操作なし）

## メッセージ仕様

該当なし

## 例外処理

| 例外状態 | 表示・動作 |
|---------|-----------|
| ページが見つからない | 404エラーページを表示 |

## 備考

- Docusaurusフレームワークで自動生成されるページ
- Markdownファイル（docs/Webpack.md）から静的HTMLに変換
- コードブロックにはシンタックスハイライトが適用される
- webpack.config.jsとjest.config.jsの対応関係を示す

---

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

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

### 推奨読解順序

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

Jest設定のスキーマと型定義を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `packages/jest-types/src/Config.ts` | ProjectConfig、GlobalConfigの型定義を確認 |

**読解のコツ**: moduleNameMapper、transform、moduleFileExtensionsは、JestがWebpackと連携するための主要な設定項目である。

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

Jest設定の読み込みと解釈処理を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.ts | `packages/jest-config/src/index.ts` | 設定ファイル読み込み処理 |
| 2-2 | normalize.ts | `packages/jest-config/src/normalize.ts` | 設定値の正規化処理 |

**主要処理フロー**:
1. **jest.config.js読み込み**: 設定ファイルの解析
2. **moduleNameMapper処理**: エイリアス解決ルールの設定
3. **transform処理**: ファイル変換ルールの設定
4. **moduleFileExtensions処理**: 解決対象拡張子の設定

#### Step 3: モジュール解決の詳細を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | resolver.ts | `packages/jest-resolve/src/resolver.ts` | moduleNameMapperの適用処理 |
| 3-2 | ScriptTransformer.ts | `packages/@jest/transform/src/ScriptTransformer.ts` | transformルールの適用処理 |

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

```
jest.config.js
    │
    ├─ packages/jest-config/src/index.ts
    │      └─ readInitialOptions()
    │             └─ normalize() [normalize.ts]
    │
    ├─ moduleNameMapper 処理
    │      └─ packages/jest-resolve/src/resolver.ts
    │             └─ getMappedPath()
    │                    └─ パターンマッチング → 置換
    │
    └─ transform 処理
           └─ packages/@jest/transform/src/ScriptTransformer.ts
                  └─ babel-jest / カスタムトランスフォーマー
```

### データフロー図

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

webpack.config.js ───▶ 設定項目抽出
     │                      │
     │    ┌─────────────────┼─────────────────┐
     │    ▼                 ▼                 ▼
     │  resolve.alias   module.rules   resolve.extensions
     │    │                 │                 │
     │    ▼                 ▼                 ▼
     └─▶ moduleNameMapper  transform   moduleFileExtensions
                │                │                 │
                └────────────────┴─────────────────┘
                                 │
                                 ▼
                          jest.config.js
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Webpack.md | `docs/Webpack.md` | ドキュメント | ページコンテンツ定義 |
| index.ts | `packages/jest-config/src/index.ts` | ソース | 設定ファイル読み込み |
| normalize.ts | `packages/jest-config/src/normalize.ts` | ソース | 設定値の正規化 |
| resolver.ts | `packages/jest-resolve/src/resolver.ts` | ソース | moduleNameMapper処理 |
| ScriptTransformer.ts | `packages/@jest/transform/src/ScriptTransformer.ts` | ソース | transform処理 |
| Config.ts | `packages/jest-types/src/Config.ts` | ソース | 設定型定義 |
