# 画面設計書 3-バージョン一覧ページ

## 概要

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

### 本画面の処理概要

バージョン一覧ページはJestの各バージョン（現行安定版、最新開発版、過去バージョン、アーカイブバージョン）のドキュメントへのリンクを一覧表示するページです。ユーザーは必要なバージョンのドキュメントに素早くアクセスできます。

**業務上の目的・背景**：Jestは継続的にバージョンアップされており、異なるバージョンを使用しているユーザーが存在します。各バージョンに対応したドキュメントを提供することで、ユーザーが使用中のバージョンに適したドキュメントを参照できるようにします。

**画面へのアクセス方法**：
- ヘッダーナビゲーションのバージョンドロップダウンから「All versions」を選択
- 直接URL `/versions` にアクセス

**主要な操作・処理内容**：
1. 現行安定版（Current version）のドキュメントリンクとリリースノートへのアクセス
2. 最新開発版（Latest version / main）のドキュメントとソースコードへのアクセス
3. 過去バージョン（Past Versions）のドキュメントへのアクセス
4. アーカイブバージョン（Archived Versions）のドキュメントへのアクセス

**画面遷移**：
- 遷移先：各バージョンのGetting Startedページ、GitHub CHANGELOG、GitHubリポジトリ、アーカイブドキュメントサイト
- 遷移元：ヘッダーナビゲーション（バージョンドロップダウン）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | jest | 主機能 | Jestの各バージョン情報の一覧表示 |

## 画面種別

一覧ページ

## URL/ルーティング

- URL: `/versions`
- ルーティング: `website/src/pages/versions.js`

## 入出力項目

| 項目名 | 入出力 | データ型 | 説明 |
|--------|--------|----------|------|
| バージョン一覧 | 入力 | JSON配列 | `versions.json`からバージョン番号一覧を取得 |
| アーカイブバージョン | 入力 | JSONオブジェクト | `archivedVersions.json`からアーカイブURL情報を取得 |
| サイト設定 | 入力 | Object | useDocusaurusContextからサイトタイトルを取得 |

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| ヘッダー | "{siteConfig.title} Versions" タイトル | docusaurus.config.js |
| Current version (Stable) | 最新安定版のバージョン番号、Documentation/Release Notesリンク | versions.json[0] |
| Latest version | main（開発版）のDocumentation/Source Codeリンク | 静的コンテンツ |
| Past Versions | 過去バージョン一覧とDocumentationリンク | versions.json（最新版以外） |
| Archived Versions | アーカイブバージョン一覧とDocumentationリンク | archivedVersions.json |

## イベント仕様

### 1-現行安定版リンククリック

| リンク名 | 遷移先 |
|----------|--------|
| Documentation | /docs/getting-started |
| Release Notes | https://github.com/jestjs/jest/blob/main/CHANGELOG.md |

### 2-最新開発版リンククリック

| リンク名 | 遷移先 |
|----------|--------|
| Documentation | /docs/next/getting-started |
| Source Code | https://github.com/jestjs/jest |

### 3-過去バージョンリンククリック

各バージョンの「Documentation」をクリックすると、`/docs/{version}/getting-started` へ遷移します。

### 4-アーカイブバージョンリンククリック

各アーカイブバージョンの「Documentation」をクリックすると、archivedVersions.jsonで定義されたURLへ遷移します。

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

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

## メッセージ仕様

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

## 例外処理

| 例外ケース | 処理内容 |
|------------|----------|
| versions.json読み込み失敗 | 静的JSONファイルのため、ビルド時にエラーとして検出 |
| archivedVersions.json読み込み失敗 | 静的JSONファイルのため、ビルド時にエラーとして検出 |

## 備考

- versions.jsonはDocusaurusがバージョン管理時に自動生成
- archivedVersions.jsonは手動で管理されるアーカイブドキュメントURL一覧
- v1互換のContainerコンポーネントを使用

---

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

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

### 推奨読解順序

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

バージョン情報のデータ構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | versions.json | `website/versions.json` | バージョン番号の配列（最新が先頭） |
| 1-2 | archivedVersions.json | `website/archivedVersions.json` | バージョン番号とURLのマッピング |

**読解のコツ**: versions.jsonは配列形式で、インデックス0が最新安定版。archivedVersions.jsonはオブジェクト形式で、キーがバージョン番号、値がドキュメントURLです。

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

ページのレンダリング起点を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | versions.js | `website/src/pages/versions.js` | VersionsPage関数コンポーネント（18-109行目） |

**主要処理フロー**:
1. **12-13行目**: versions.jsonとarchivedVersions.jsonをインポート
2. **19行目**: useDocusaurusContextでサイト設定を取得
3. **20行目**: latestVersionとしてversions[0]を取得
4. **29-45行目**: Current version (Stable)セクションのレンダリング
5. **46-62行目**: Latest versionセクションのレンダリング
6. **63-83行目**: Past Versionsセクションのレンダリング
7. **84-103行目**: Archived Versionsセクションのレンダリング

#### Step 3: コンポーネント構造を理解する

使用しているコンポーネントを把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Container.js | `website/src/components/v1/Container.js` | wrapperV1/mainContainerV1クラス適用 |

**主要処理フロー**:
- **69-81行目**: versions.map()で過去バージョン一覧を動的生成
- **91-100行目**: Object.entries(ArchivedVersions).map()でアーカイブ一覧を動的生成

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

```
VersionsPage (versions.js:18-109)
    │
    ├─ useDocusaurusContext (line 19)
    │      └─ siteConfig取得
    │
    └─ Layout (@theme/Layout)
           │
           └─ Container (v1/Container.js)
                  │
                  ├─ header (h2: "{title} Versions")
                  │
                  ├─ Current version (Stable)
                  │      └─ table > tr > Link
                  │
                  ├─ Latest version
                  │      └─ table > tr > Link
                  │
                  ├─ Past Versions
                  │      └─ table > versions.map()
                  │             └─ tr > Link (version !== latestVersion)
                  │
                  └─ Archived Versions
                         └─ table > Object.entries().map()
                                └─ tr > Link
```

### データフロー図

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

versions.json ─────────▶ versions[0] ──────────▶ Current version表示
(配列)                     ↓
                         versions.map() ────────▶ Past Versions一覧
                         (v !== latestVersion)

archivedVersions.json ──▶ Object.entries() ────▶ Archived Versions一覧
(オブジェクト)             .map()

siteConfig ────────────▶ siteConfig.title ─────▶ ページタイトル
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| versions.js | `website/src/pages/versions.js` | ソース | バージョン一覧ページのメインコンポーネント |
| versions.json | `website/versions.json` | データ | バージョン番号一覧 |
| archivedVersions.json | `website/archivedVersions.json` | データ | アーカイブドキュメントURL一覧 |
| Container.js | `website/src/components/v1/Container.js` | ソース | コンテナコンポーネント |
| Layout | `@theme/Layout` | ソース | Docusaurusテーマレイアウト |
| Link | `@docusaurus/Link` | ソース | ルーティング対応リンクコンポーネント |
| useDocusaurusContext | `@docusaurus/useDocusaurusContext` | ソース | サイト設定取得フック |
