# 画面設計書 9-Jest Platformページ

## 概要

本ドキュメントは、JestドキュメントサイトのJest Platformページについて、画面構成、機能、データフロー、コードリーディングガイドを記述した画面設計書です。

### 本画面の処理概要

Jest PlatformページはJestをプラットフォームとして使用する方法を説明するドキュメントページです。Jestの内部パッケージ（jest-changed-files、jest-diff、jest-docblock、jest-get-type、jest-validate、jest-worker、pretty-format）をスタンドアロンで使用する方法について、サンプルコードとともに解説します。

**業務上の目的・背景**：Jestはテスティングフレームワークとしてだけでなく、個々の機能を独立したパッケージとして提供しています。開発者はこれらのパッケージを自身のプロジェクトで活用することで、ファイル変更検出、差分表示、並列処理など、Jestが内部で使用している強力な機能を利用できます。

**画面へのアクセス方法**：
- サイドバーナビゲーションから選択
- 直接URL `/docs/jest-platform` にアクセス

**主要な操作・処理内容**：
1. jest-changed-filesセクションでGit/Hgリポジトリの変更ファイル検出方法の確認
2. jest-diffセクションで値の差分表示方法の確認
3. jest-docblockセクションでコメントブロック解析方法の確認
4. jest-get-typeセクションでJavaScript値の型判定方法の確認
5. jest-validateセクションで設定検証方法の確認
6. jest-workerセクションで並列処理の実装方法の確認
7. pretty-formatセクションで値の人間可読フォーマット方法の確認
8. サイドバーナビゲーションで他のドキュメントページへ遷移

**画面遷移**：
- 遷移先：各パッケージのGitHub READMEページ（外部リンク）
- 遷移元：他のドキュメントページ

**権限による表示制御**：なし（全ユーザーに同一コンテンツを表示）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 3 | @jest/core | 主機能 | Jestをプラットフォームとして使用する方法 |
| 40 | jest-haste-map | 補助機能 | ファイルシステムキャッシュの利用方法 |
| 43 | jest-worker | 補助機能 | ワーカープール管理の利用方法 |
| 22 | @jest/reporters | 補助機能 | レポーター機能の利用方法 |

## 画面種別

ドキュメントページ

## URL/ルーティング

- URL: `/docs/jest-platform`
- ルーティング: `docs/JestPlatform.md`（Docusaurusによる自動変換）

## 入出力項目

該当なし（Markdownコンテンツの静的表示）

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| タイトル | "Jest Platform" | Markdown Front Matter |
| 導入文 | Jestパッケージの独立使用の概要 | 静的コンテンツ |
| jest-changed-files | Git/Hg変更ファイル検出パッケージ | 静的コンテンツ |
| jest-diff | 差分表示パッケージ | 静的コンテンツ |
| jest-docblock | コメントブロック解析パッケージ | 静的コンテンツ |
| jest-get-type | 型判定パッケージ | 静的コンテンツ |
| jest-validate | 設定検証パッケージ | 静的コンテンツ |
| jest-worker | 並列処理パッケージ | 静的コンテンツ |
| pretty-format | フォーマットパッケージ | 静的コンテンツ |
| サイドバー | ドキュメントナビゲーション | sidebars.json |

## イベント仕様

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

サイドバーのリンクをクリックすると、対応するドキュメントページへ遷移します。

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

各パッケージのGitHub READMEへのリンクをクリックすると、新規タブで外部サイトが開きます。

| パッケージ名 | リンク先 |
|-------------|----------|
| jest-changed-files | https://github.com/jestjs/jest/blob/main/packages/jest-changed-files/README.md |
| jest-docblock | https://github.com/jestjs/jest/blob/main/packages/jest-docblock/README.md |
| jest-validate | https://github.com/jestjs/jest/blob/main/packages/jest-validate/README.md |
| jest-worker | https://github.com/jestjs/jest/blob/main/packages/jest-worker/README.md |
| pretty-format | https://github.com/jestjs/jest/blob/main/packages/pretty-format/README.md |

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

該当なし（静的サイトのため、データベース操作は発生しない）

## メッセージ仕様

該当なし（フォーム入力や処理結果のメッセージは存在しない）

## 例外処理

該当なし（静的Markdownコンテンツのため、例外処理は不要）

## 備考

- Docusaurusによりdocs/JestPlatform.mdから自動生成
- Front Matterのidが`jest-platform`のため、URLは`/docs/jest-platform`
- 各パッケージのサンプルコードはJavaScript形式で提供
- jest-workerのサンプルコードにはtitle属性が使用されている

---

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

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

### 推奨読解順序

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

Markdownドキュメントの構造とFront Matterを把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | JestPlatform.md | `docs/JestPlatform.md` | Front Matter（id: jest-platform, title: Jest Platform） |

**読解のコツ**: ドキュメントは7つのパッケージ紹介セクションで構成されています。各セクションにはパッケージの説明とサンプルコードが含まれています。

#### Step 2: セクション構造を理解する

各パッケージの説明内容を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | JestPlatform.md | `docs/JestPlatform.md` | 各セクションの構造（1-171行） |

**主要セクション**:
- **8-27行目**: jest-changed-files（変更ファイル検出）
- **29-45行目**: jest-diff（差分表示）
- **47-72行目**: jest-docblock（コメント解析）
- **74-93行目**: jest-get-type（型判定）
- **95-119行目**: jest-validate（設定検証）
- **120-151行目**: jest-worker（並列処理）
- **152-171行目**: pretty-format（フォーマット）

#### Step 3: 関連パッケージを理解する

実際のパッケージ実装を把握します（実装詳細の参照用）。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | jest-changed-files | `packages/jest-changed-files/` | Git/Hg変更検出の実装 |
| 3-2 | jest-diff | `packages/jest-diff/` | 差分表示の実装 |
| 3-3 | jest-worker | `packages/jest-worker/` | ワーカープールの実装 |
| 3-4 | pretty-format | `packages/pretty-format/` | フォーマットの実装 |

**読解のコツ**: 各パッケージのsrc/index.tsがエントリーポイントです。エクスポートされている関数・クラスを確認することで、ドキュメントの内容と実装の対応を理解できます。

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

```
Docusaurus Build Process
    │
    ├─ docs/JestPlatform.md
    │      │
    │      ├─ Front Matter解析
    │      │      └─ id: jest-platform → URL: /docs/jest-platform
    │      │
    │      ├─ Markdown → HTML変換
    │      │      ├─ jest-changed-files セクション
    │      │      ├─ jest-diff セクション
    │      │      ├─ jest-docblock セクション
    │      │      ├─ jest-get-type セクション
    │      │      ├─ jest-validate セクション
    │      │      ├─ jest-worker セクション
    │      │      └─ pretty-format セクション
    │      │
    │      └─ Code Block処理
    │             └─ title属性 → ファイル名表示
    │
    └─ sidebars.json
           └─ サイドバーナビゲーション生成
```

### データフロー図

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

JestPlatform.md ────────▶ Markdown Parser ────────▶ HTML コンテンツ
                                │
                                ├─ コードブロック処理
                                │      ├─ シンタックスハイライト
                                │      └─ title属性処理
                                │
                                └─ 外部リンク処理
                                       └─ GitHub READMEリンク

sidebars.json ──────────▶ Sidebar Generator ──────▶ サイドバーUI
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| JestPlatform.md | `docs/JestPlatform.md` | ドキュメント | Jest Platformページのコンテンツ |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション定義 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus全体設定 |
| jest-changed-files | `packages/jest-changed-files/` | ソース | 変更ファイル検出パッケージ |
| jest-diff | `packages/jest-diff/` | ソース | 差分表示パッケージ |
| jest-docblock | `packages/jest-docblock/` | ソース | コメント解析パッケージ |
| @jest/get-type | `packages/jest-get-type/` | ソース | 型判定パッケージ |
| jest-validate | `packages/jest-validate/` | ソース | 設定検証パッケージ |
| jest-worker | `packages/jest-worker/` | ソース | 並列処理パッケージ |
| pretty-format | `packages/pretty-format/` | ソース | フォーマットパッケージ |
