# 画面設計書 6-Asynchronous Testingページ

## 概要

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

### 本画面の処理概要

Asynchronous TestingページはJestにおける非同期テストの書き方を説明するドキュメントページです。Promise、Async/Await、Callbacks、.resolves/.rejectsの4つのアプローチについて、サンプルコードとともに詳細に解説します。

**業務上の目的・背景**：現代のJavaScript開発では非同期処理が一般的であり、非同期コードのテストは避けて通れません。このページでは、Jestが提供する非同期テストの各種手法を理解し、適切な方法を選択できるようにします。

**画面へのアクセス方法**：
- Using Matchersページからの「test asynchronous code」リンクをクリック
- サイドバーナビゲーションから選択
- 直接URL `/docs/asynchronous` にアクセス

**主要な操作・処理内容**：
1. Promisesセクションでreturn文による非同期テストの確認
2. Async/Awaitセクションでasync関数によるテストの確認
3. Callbacksセクションでdoneコールバックによるテストの確認
4. .resolves/.rejectsセクションでマッチャーチェーンによるテストの確認
5. サイドバーナビゲーションで他のドキュメントページへ遷移

**画面遷移**：
- 遷移先：他のドキュメントページ
- 遷移元：Using Matchersページ、他のドキュメントページ

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 10 | expect | 主機能 | 非同期テストにおけるexpectの使用方法 |
| 7 | jest-circus | 補助機能 | 非同期テストの実行環境の説明 |

## 画面種別

ドキュメントページ

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| タイトル | "Testing Asynchronous Code" | Markdown Front Matter |
| 導入文 | 非同期テストの概要説明 | 静的コンテンツ |
| Promises | Promiseをreturnする方法 | 静的コンテンツ |
| Async/Await | async/await構文の使用方法 | 静的コンテンツ |
| Callbacks | doneコールバックの使用方法 | 静的コンテンツ |
| .resolves / .rejects | マッチャーチェーンの使用方法 | 静的コンテンツ |
| サイドバー | ドキュメントナビゲーション | sidebars.json |

## イベント仕様

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

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Docusaurusによりdocs/TestingAsyncCode.mdから自動生成
- Front Matterのidが`asynchronous`のため、URLは`/docs/asynchronous`
- cautionアドモニションで重要な注意事項を強調表示
- 各手法の長所・短所は記載されておらず、状況に応じた選択を推奨

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TestingAsyncCode.md | `docs/TestingAsyncCode.md` | Front Matter（id: asynchronous, title: Testing Asynchronous Code） |

**読解のコツ**: URLは`/docs/asynchronous`ですが、実際のファイル名は`TestingAsyncCode.md`です。Front Matterのidがルーティングに使用されます。

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

4つの非同期テストアプローチを把握します。

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

**主要セクション**:
- **8-20行目**: Promises（returnでPromiseを返す方法）
- **22-55行目**: Async/Await（async関数とawait構文）
- **71-122行目**: Callbacks（doneコールバック）
- **124-143行目**: .resolves / .rejects（マッチャーチェーン）

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

jest-circusの非同期処理を把握します（実装詳細の参照用）。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | jest-circus | `packages/jest-circus/src/` | テストランナーの非同期処理実装 |

**読解のコツ**: jest-circusがdoneコールバック、async/await、Promiseの各パターンをどのように処理しているかを確認できます。

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

```
Docusaurus Build Process
    │
    ├─ docs/TestingAsyncCode.md
    │      │
    │      ├─ Front Matter解析
    │      │      └─ id: asynchronous → URL: /docs/asynchronous
    │      │
    │      ├─ Markdown → HTML変換
    │      │      ├─ Promises セクション
    │      │      ├─ Async/Await セクション
    │      │      ├─ Callbacks セクション
    │      │      └─ .resolves/.rejects セクション
    │      │
    │      └─ Admonitions処理
    │             └─ :::caution → 警告UI
    │
    └─ sidebars.json
           └─ サイドバーナビゲーション生成
```

### データフロー図

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

TestingAsyncCode.md ────▶ Markdown Parser ────────▶ HTML コンテンツ
                                │
                                ├─ コードブロック処理
                                │      └─ シンタックスハイライト
                                │
                                └─ Admonitions処理
                                       └─ :::caution → UI変換

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

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TestingAsyncCode.md | `docs/TestingAsyncCode.md` | ドキュメント | Asynchronous Testingページのコンテンツ |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション定義 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus全体設定 |
| jest-circus (package) | `packages/jest-circus/` | ソース | テストランナー実装 |
| expect (package) | `packages/expect/` | ソース | expectマッチャー実装（.resolves/.rejects含む） |
