# 画面設計書 15-ES6 Class Mocksページ

## 概要

本ドキュメントは、JestドキュメントサイトにおけるES6 Class Mocksページの画面設計を定義する。このページはES6クラスをモックする4つの方法を詳細に説明するガイドページである。

### 本画面の処理概要

ES6 Class Mocksページは、ES6クラスのモック方法について4つのアプローチを比較解説する技術ドキュメントページである。依存性注入（DI）を使用するテスト設計パターンと、各モック手法のトレードオフを理解させる。

**業務上の目的・背景**：ES6クラスを使用するモダンなJavaScript/TypeScriptプロジェクトでは、クラス依存関係のモックが必要になることが多い。4つの異なるアプローチ（自動モック、手動モック、モジュールファクトリ、mockImplementation）を理解することで、テスト設計の柔軟性を向上させる。

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

**主要な操作・処理内容**：
1. 自動モック（jest.mock()）の学習：基本的なクラスモック方法
2. 手動モック（__mocks__ディレクトリ）の学習：カスタムモック実装
3. モジュールファクトリ（jest.mock with factory）の学習：インラインモック定義
4. mockImplementation()の学習：テストファイル内でのモック実装変更
5. 各手法の比較：トレードオフと使い分けの理解

**画面遷移**：
- 遷移元：Manual Mocksページ、サイドバーナビゲーション、検索結果
- 遷移先：Webpackページ、Mock Functionsページ

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 14 | jest-mock | 主機能 | mockImplementation、jest.fn()によるクラスモック |
| 18 | jest-resolve | 補助機能 | __mocks__ディレクトリの解決 |

## 画面種別

ドキュメント / ガイド

## URL/ルーティング

- URL: `/docs/es6-class-mocks`
- ファイルパス: `docs/ES6ClassMocks.md`

## 入出力項目

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

## 表示項目

| No | 項目名 | 表示形式 | 説明 |
|----|--------|----------|------|
| 1 | ページタイトル | テキスト | "ES6 Class Mocks" |
| 2 | 導入文 | テキスト | ES6クラスモックの概要説明 |
| 3 | An ES6 Class Exampleセクション | コードブロック＋テキスト | サンプルクラスの紹介 |
| 4 | 4 ways to mock方法の概要 | 番号付きリスト | 4つのモック手法の一覧 |
| 5 | Automatic mockセクション | コードブロック＋テキスト | jest.mock()による自動モック |
| 6 | Manual mockセクション | コードブロック＋テキスト | __mocks__ディレクトリの利用 |
| 7 | Calling jest.mock() with factoryセクション | コードブロック＋テキスト | ファクトリ関数の使用 |
| 8 | Replacing mockImplementationセクション | コードブロック＋テキスト | mockImplementation()の使用 |
| 9 | In-depth: Module factory parameterセクション | コードブロック＋テキスト | モジュールファクトリの詳細 |
| 10 | サイドバー | ナビゲーション | ドキュメント目次 |
| 11 | Prev/Nextナビゲーション | ボタン | 前後ページへの遷移リンク |

## イベント仕様

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

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

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

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

### 3-コードタブの切り替え

JavaScript/TypeScriptタブを切り替えると、対応する言語のコードサンプルが表示される。

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

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

## メッセージ仕様

該当なし

## 例外処理

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

## 備考

- Docusaurusフレームワークで自動生成されるページ
- Markdownファイル（docs/ES6ClassMocks.md）から静的HTMLに変換
- JavaScript/TypeScriptのコードタブ切り替え機能を使用
- コードブロックにはシンタックスハイライトが適用される

---

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

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

### 推奨読解順序

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

ES6クラスのモックにおける型定義を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.ts | `packages/jest-mock/src/index.ts` | MockedClass、MockedFunction型の定義を確認 |

**読解のコツ**: jest-mockパッケージはES6クラスを含むあらゆる関数/クラスのモックを提供する。MockedClass型は、コンストラクタとインスタンスメソッドの両方をモックする。

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

jest.mock()のクラスモック処理を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.ts | `packages/jest-runtime/src/index.ts` | jest.mock()の第2引数（factory）処理を確認 |
| 2-2 | index.ts | `packages/jest-mock/src/index.ts` | _generateMock()のクラス処理を確認 |

**主要処理フロー**:
1. **jest.mock()呼び出し**: モジュールをモック対象として登録
2. **factory関数の存在確認**: 第2引数があればカスタムモックを使用
3. **自動モック生成**: factory無しの場合、クラスの自動モックを生成
4. **mockImplementation()**: 既存モックの実装を変更

#### Step 3: 各モック手法の実装を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.ts | `packages/jest-mock/src/index.ts` | fn().mockImplementation()の実装（Line 146-147） |
| 3-2 | ModuleMocker | `packages/jest-mock/src/index.ts` | generateFromMetadata()によるクラスモック生成 |

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

```
【方法1: 自動モック】
jest.mock('./SoundPlayer')
    │
    └─ packages/jest-runtime/src/index.ts
           └─ _generateMockModule('./SoundPlayer')
                  └─ packages/jest-mock/src/index.ts
                         └─ generateFromMetadata() - クラス構造を解析しモック生成

【方法2: 手動モック】
jest.mock('./SoundPlayer')
    │
    └─ __mocks__/SoundPlayer.js を検索・使用

【方法3: モジュールファクトリ】
jest.mock('./SoundPlayer', () => {
  return jest.fn().mockImplementation(() => {...});
})
    │
    └─ factory関数の戻り値をモジュールとして使用

【方法4: mockImplementation】
const mockPlaySoundFile = jest.fn();
jest.mock('./SoundPlayer', () => {
  return jest.fn().mockImplementation(() => {
    return { playSoundFile: mockPlaySoundFile };
  });
});
```

### データフロー図

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

ES6クラス定義 ───▶ jest.mock() ───▶ モックモジュール登録
                        │
      ┌─────────────────┼─────────────────┐
      ▼                 ▼                 ▼
 [自動モック]      [手動モック]      [ファクトリ]
      │                 │                 │
      ▼                 ▼                 ▼
 メタデータ解析    __mocks__読込    factory()実行
      │                 │                 │
      └─────────────────┴─────────────────┘
                        │
                        ▼
               モッククラス返却
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ES6ClassMocks.md | `docs/ES6ClassMocks.md` | ドキュメント | ページコンテンツ定義 |
| index.ts | `packages/jest-mock/src/index.ts` | ソース | MockedClass型、mockImplementation実装 |
| index.ts | `packages/jest-runtime/src/index.ts` | ソース | jest.mock()実装 |
