# 画面設計書 22-Configurationページ

## 概要

本ドキュメントは、Jestドキュメントサイトにおける「Configurationページ」の画面設計書です。Jestの設定オプションの詳細な説明を提供し、プロジェクトに応じたテスト環境のカスタマイズ方法を解説します。

### 本画面の処理概要

**業務上の目的・背景**：Configurationページは、Jestテストフレームワークの全設定オプションを網羅的に解説するリファレンスドキュメントです。Jestは「デフォルトで優れた動作」を哲学としていますが、プロジェクト固有の要件に応じてカスタマイズが必要な場合があります。本ページにより、開発者はテスト環境、カバレッジ設定、トランスフォーマー、モジュール解決など、あらゆる設定オプションを理解し、適切に構成できるようになります。

**画面へのアクセス方法**：ユーザーはヘッダーナビゲーションの「API」リンクまたはホームページの「Config」ボタンからアクセスします。サイドバーから「Configuration」を選択するか、Jest Objectページの「次へ」リンクから遷移することも可能です。URLは `/docs/configuration` です。

**主要な操作・処理内容**：
1. 設定ファイル形式（JavaScript/TypeScript/JSON）の選択と記述方法の確認
2. defineConfig/mergeConfigヘルパー関数の使用方法の確認
3. 各設定オプション（automock、cache、collectCoverage等）の詳細参照
4. テスト環境設定（testEnvironment）の構成方法の確認
5. トランスフォーム設定（transform）のカスタマイズ方法の確認
6. コードサンプルのコピーと適用

**画面遷移**：Jest Objectページから遷移、CLIページへ遷移可能。サイドバーから他のAPIドキュメントにも直接アクセス可能。

**権限による表示制御**：特になし。すべてのユーザーが全コンテンツにアクセス可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 5 | jest-config | 主機能 | Jest設定オプションの詳細説明 |
| 18 | @jest/transform | 補助機能 | transform設定オプションの説明 |
| 26 | jest-environment-node | 補助機能 | testEnvironment設定オプションの説明（node環境） |
| 27 | jest-environment-jsdom | 補助機能 | testEnvironment設定オプションの説明（jsdom環境） |
| 22 | @jest/reporters | 補助機能 | reporters設定オプションの説明 |

## 画面種別

詳細（ドキュメント参照）

## URL/ルーティング

- URL: `/docs/configuration`
- ファイルパス: `docs/Configuration.md`
- Docusaurusによる静的サイト生成

## 入出力項目

本画面は静的ドキュメントページのため、主要な入力項目はありません。

| 項目名 | 種別 | 説明 |
|--------|------|------|
| 検索クエリ | 入力（オプション） | サイト内検索機能で使用 |
| コードブロック | 出力 | コピー可能な設定サンプルコード |
| 目次（TOC） | 出力 | ページ内ナビゲーション（設定オプション一覧） |

## 表示項目

| セクション | 表示内容 | 備考 |
|------------|----------|------|
| イントロダクション | 設定ファイルの形式、defineConfigの使用方法、デフォルト値の取得方法 | JavaScript/TypeScript両方の例を提供 |
| automock | 自動モック設定（boolean） | デフォルト: false |
| bail | テスト失敗時の中断設定 | デフォルト: 0 |
| cacheDirectory | キャッシュディレクトリ設定 | 文字列パス |
| clearMocks | モック自動クリア設定 | デフォルト: false |
| collectCoverage | カバレッジ収集設定 | デフォルト: false |
| collectCoverageFrom | カバレッジ対象ファイル設定 | glob配列 |
| coverageDirectory | カバレッジ出力ディレクトリ | 文字列パス |
| coveragePathIgnorePatterns | カバレッジ除外パターン | 正規表現配列 |
| coverageProvider | カバレッジプロバイダー | 'babel' または 'v8' |
| coverageReporters | カバレッジレポーター | istanbulレポーター配列 |
| coverageThreshold | カバレッジ閾値設定 | オブジェクト |
| dependencyExtractor | 依存関係抽出設定 | カスタムモジュールパス |
| displayName | プロジェクト表示名 | マルチプロジェクト用 |
| errorOnDeprecated | 非推奨API使用時エラー | デフォルト: false |
| extensionsToTreatAsEsm | ESM拡張子設定 | 拡張子配列 |
| fakeTimers | フェイクタイマー設定 | オブジェクト |
| forceCoverageMatch | カバレッジ強制マッチ | glob配列 |
| globals | グローバル変数設定 | オブジェクト |
| globalSetup | グローバルセットアップ | モジュールパス |
| globalTeardown | グローバルティアダウン | モジュールパス |
| haste | Hasteモジュールシステム設定 | オブジェクト |
| injectGlobals | グローバル注入設定 | デフォルト: true |
| maxConcurrency | 最大同時実行数 | デフォルト: 5 |
| maxWorkers | 最大ワーカー数 | 数値またはパーセント |
| moduleDirectories | モジュールディレクトリ | デフォルト: ["node_modules"] |
| moduleFileExtensions | モジュール拡張子 | 拡張子配列 |
| moduleNameMapper | モジュール名マッピング | 正規表現→パスオブジェクト |
| modulePathIgnorePatterns | モジュールパス除外 | 正規表現配列 |
| modulePaths | 追加モジュールパス | パス配列 |
| notify | 通知設定 | デフォルト: false |
| notifyMode | 通知モード | 'always'等 |
| preset | プリセット設定 | プリセット名 |
| prettierPath | Prettierパス | モジュールパス |
| projects | プロジェクト設定 | パス/設定配列 |
| randomize | テスト順序ランダム化 | デフォルト: false |
| reporters | レポーター設定 | レポーター配列 |
| resetMocks | モック自動リセット | デフォルト: false |
| resetModules | モジュール自動リセット | デフォルト: false |
| resolver | カスタムリゾルバー | モジュールパス |
| restoreMocks | モック自動リストア | デフォルト: false |
| rootDir | ルートディレクトリ | パス |
| roots | ルートパス配列 | パス配列 |
| runner | テストランナー | デフォルト: jest-runner |
| sandboxInjectedGlobals | サンドボックス注入グローバル | シンボル配列 |
| setupFiles | セットアップファイル | パス配列 |
| setupFilesAfterEnv | 環境セットアップファイル | パス配列 |
| showSeed | シード値表示 | デフォルト: false |
| slowTestThreshold | 遅いテスト閾値 | ミリ秒 |
| snapshotFormat | スナップショット形式 | オブジェクト |
| snapshotResolver | スナップショットリゾルバー | モジュールパス |
| snapshotSerializers | スナップショットシリアライザー | モジュール配列 |
| testEnvironment | テスト環境 | 'node'または'jsdom' |
| testEnvironmentOptions | テスト環境オプション | オブジェクト |
| testFailureExitCode | 失敗時終了コード | デフォルト: 1 |
| testMatch | テストマッチパターン | glob配列 |
| testPathIgnorePatterns | テストパス除外 | 正規表現配列 |
| testRegex | テスト正規表現 | 正規表現 |
| testRunner | テストランナーモジュール | モジュールパス |
| testSequencer | テストシーケンサー | モジュールパス |
| testTimeout | テストタイムアウト | デフォルト: 5000ms |
| transform | トランスフォーム設定 | 正規表現→トランスフォーマー |
| transformIgnorePatterns | トランスフォーム除外 | 正規表現配列 |
| unmockedModulePathPatterns | アンモックパターン | 正規表現配列 |
| verbose | 詳細出力 | デフォルト: false |
| watchPathIgnorePatterns | ウォッチ除外パターン | 正規表現配列 |
| watchPlugins | ウォッチプラグイン | プラグイン配列 |
| workerIdleMemoryLimit | ワーカーメモリ制限 | バイト数 |
| workerThreads | ワーカースレッド使用 | デフォルト: false |

## イベント仕様

### 1-目次クリック

ページ内の該当設定オプションセクションへスクロール移動

### 2-コードブロックコピー

設定サンプルコードをクリップボードにコピー

### 3-タブ切り替え（JavaScript/TypeScript）

設定例の言語表示を切り替え

### 4-サイドバーナビゲーション

他のドキュメントページへ遷移

### 5-前へ/次へリンク

Jest ObjectページまたはCLIページへ遷移

### 6-外部リンク（npm等）

関連するnpmパッケージやGitHubリポジトリへ遷移

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

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

本画面は静的ドキュメントページのため、データベース操作は発生しません。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 静的コンテンツのみ |

## メッセージ仕様

| メッセージID | メッセージ内容 | 表示条件 | 種別 |
|-------------|--------------|----------|------|
| - | - | - | 静的コンテンツのため該当なし |

## 例外処理

| 例外状況 | 対応内容 |
|----------|----------|
| ページが見つからない | Docusaurus標準の404ページを表示 |
| ネットワークエラー | ブラウザ標準のエラー表示 |

## 備考

- 設定ファイルは`jest.config.js|ts|mjs|cjs|cts|json`形式がサポートされる
- `defineConfig`ヘルパー関数により型安全な設定が可能
- `mergeConfig`関数で複数設定のマージが可能
- 設定オブジェクトは常にJSON-serializableである必要がある
- `jest-config`パッケージからデフォルト値を取得可能

---

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

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

### 推奨読解順序

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

まず、Jest設定の型定義を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Config.ts | `packages/@jest/types/src/Config.ts` | InitialOptions、ProjectConfig、GlobalConfigの型定義 |
| 1-2 | index.ts | `packages/jest-config/src/index.ts` | defineConfig、mergeConfig関数の定義（50-78行目） |

**読解のコツ**: Config.tsの型定義を先に理解することで、各設定オプションの期待値が明確になります。

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

設定ファイルの読み込みと解析の流れを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.ts | `packages/jest-config/src/index.ts` | readConfig、readInitialOptions関数（80-379行目） |

**主要処理フロー**:
1. **80-121行目**: `readConfig`関数 - 設定ファイルの読み込みと正規化
2. **123-259行目**: `groupOptions`関数 - globalConfigとprojectConfigへの分離
3. **326-379行目**: `readInitialOptions`関数 - 初期設定の読み込み

#### Step 3: 設定の正規化を理解する

設定オプションの検証と正規化の流れを確認します。

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

**主要処理フロー**:
- 各設定オプションの型チェック
- デフォルト値の適用
- 相対パスの絶対パス変換

#### Step 4: デフォルト値を理解する

各設定オプションのデフォルト値を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Defaults.ts | `packages/jest-config/src/Defaults.ts` | 全設定オプションのデフォルト値 |

**主要処理フロー**:
- `automock`: false
- `bail`: 0
- `clearMocks`: false
- `testEnvironment`: 'node'
- その他多数のデフォルト値

#### Step 5: 設定の説明を理解する

各設定オプションの説明を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | Descriptions.ts | `packages/jest-config/src/Descriptions.ts` | 全設定オプションの説明文 |

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

```
jest-cli/run
    │
    ├─ jest-config/readConfigs
    │      ├─ readConfig
    │      │      ├─ readInitialOptions
    │      │      │      ├─ resolveConfigPath
    │      │      │      └─ readConfigFileAndSetRootDir
    │      │      │
    │      │      └─ normalize
    │      │             ├─ Defaults (デフォルト値適用)
    │      │             └─ 各オプションの検証
    │      │
    │      └─ groupOptions
    │             ├─ globalConfig 生成
    │             └─ projectConfig 生成
    │
    └─ @jest/core/runCLI
           └─ 設定を使用してテスト実行
```

### データフロー図

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

jest.config.js  ───▶ readConfigFileAndSetRootDir ───▶ InitialOptions
                           │
                           ▼
                     normalize
                           │
                           ▼
                     groupOptions
                           │
                ┌──────────┴──────────┐
                ▼                     ▼
         GlobalConfig          ProjectConfig
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Configuration.md | `docs/Configuration.md` | ドキュメント | Configurationページのソースファイル |
| index.ts | `packages/jest-config/src/index.ts` | ソース | 設定読み込みのエントリーポイント |
| normalize.ts | `packages/jest-config/src/normalize.ts` | ソース | 設定の正規化処理 |
| Defaults.ts | `packages/jest-config/src/Defaults.ts` | ソース | デフォルト値定義 |
| Descriptions.ts | `packages/jest-config/src/Descriptions.ts` | ソース | 設定オプションの説明 |
| Deprecated.ts | `packages/jest-config/src/Deprecated.ts` | ソース | 非推奨オプション定義 |
| resolveConfigPath.ts | `packages/jest-config/src/resolveConfigPath.ts` | ソース | 設定ファイルパス解決 |
| readConfigFileAndSetRootDir.ts | `packages/jest-config/src/readConfigFileAndSetRootDir.ts` | ソース | 設定ファイル読み込み |
| Config.ts | `packages/@jest/types/src/Config.ts` | ソース | 設定の型定義 |
| constants.ts | `packages/jest-config/src/constants.ts` | ソース | 定数定義（拡張子順序等） |
