# 画面設計書 11-More Resourcesページ

## 概要

本ドキュメントは、JestドキュメントサイトにおけるMore Resourcesページの画面設計を定義する。このページはJestの追加リソースへのリンクを提供するドキュメントページである。

### 本画面の処理概要

More Resourcesページは、Jestの学習を深めるための追加リソースへのナビゲーションを提供する静的コンテンツページである。

**業務上の目的・背景**：Jestフレームワークの基本的な使い方を学んだユーザーに対して、より深い理解を得るための追加学習リソースを提供する。公式ドキュメント、サンプルコード、コミュニティリソースへの導線を一元化することで、ユーザーの学習効率を向上させる。

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

**主要な操作・処理内容**：
1. ドキュメントリンクの閲覧：Snapshot Testing、Mock Functions、Migration Guide等の詳細ドキュメントへのリンク表示
2. サンプルコードの参照：GitHubリポジトリのexamplesフォルダへのリンク提供
3. コミュニティリソースの利用：Discord（Reactiflux）、Twitter等のコミュニティへの誘導

**画面遷移**：
- 遷移元：Jest Communityページ、サイドバーナビゲーション、検索結果
- 遷移先：Snapshot Testingページ、Mock Functionsページ、Migration Guideページ、Configurationページ、GlobalAPIページ、Troubleshootingページ、外部リンク（GitHub、Discord、Twitter、Blog）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | jest | 主機能 | 追加リソースへのリンク提供 |

## 画面種別

ドキュメント / リンク一覧

## URL/ルーティング

- URL: `/docs/more-resources`
- ファイルパス: `docs/MoreResources.md`

## 入出力項目

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

## 表示項目

| No | 項目名 | 表示形式 | 説明 |
|----|--------|----------|------|
| 1 | ページタイトル | テキスト | "More Resources" |
| 2 | 導入文 | テキスト | Jestの学習を深めるための案内文 |
| 3 | Browse the docsセクション | リンクリスト | 内部ドキュメントへのリンク一覧 |
| 4 | Learn by exampleセクション | リンクリスト | GitHubのサンプルコードへのリンク |
| 5 | Join the communityセクション | リンクリスト | コミュニティリソースへのリンク |
| 6 | サイドバー | ナビゲーション | ドキュメント目次 |
| 7 | Prev/Nextナビゲーション | ボタン | 前後ページへの遷移リンク |

## イベント仕様

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

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

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

ユーザーがGitHub、Discord、Twitter等の外部リンクをクリックすると、新しいタブで外部サイトが開く。

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

サイドバーの項目をクリックすると、該当するドキュメントページに遷移する。

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

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

## メッセージ仕様

該当なし

## 例外処理

| 例外状態 | 表示・動作 |
|---------|-----------|
| ページが見つからない | 404エラーページを表示 |
| 外部リンク先が無効 | ブラウザのエラーページを表示（制御外） |

## 備考

- Docusaurusフレームワークで自動生成されるページ
- Markdownファイル（docs/MoreResources.md）から静的HTMLに変換
- 多言語対応（i18n）に対応

---

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

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

### 推奨読解順序

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

静的コンテンツページのため、主にMarkdownファイルの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MoreResources.md | `docs/MoreResources.md` | Front Matter（id, title）とセクション構成を確認 |

**読解のコツ**: Docusaurusのドキュメントファイルは、YAMLフロントマターでメタデータを定義し、Markdown形式でコンテンツを記述する。

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

Docusaurusの設定ファイルがドキュメントのルーティングを制御する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | docusaurus.config.js | `website/docusaurus.config.js` | docs プラグインの設定、サイドバー設定を確認 |
| 2-2 | sidebars.js | `website/sidebars.js` | More Resourcesの配置位置を確認 |

**主要処理フロー**:
1. **Line 1-4 (MoreResources.md)**: フロントマターでid: `more-resources`、title: `More Resources`を定義
2. **Lines 6-14 (MoreResources.md)**: Browse the docsセクションで内部ドキュメントリンクを列挙
3. **Lines 16-18 (MoreResources.md)**: Learn by exampleセクションでGitHubリンクを提供
4. **Lines 20-24 (MoreResources.md)**: Join the communityセクションでコミュニティリソースを案内

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

```
docusaurus.config.js (設定)
    │
    ├─ sidebars.js (サイドバー定義)
    │      └─ Introduction カテゴリ
    │             └─ more-resources
    │
    └─ docs/MoreResources.md (コンテンツ)
           └─ 静的HTMLに変換 → /docs/more-resources
```

### データフロー図

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

Markdownファイル ───▶ Docusaurus Build ───▶ 静的HTML
(MoreResources.md)        │                   (/docs/more-resources)
                          │
sidebars.js ──────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MoreResources.md | `docs/MoreResources.md` | ソース | ページコンテンツ定義 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | サイト全体の設定 |
| sidebars.js | `website/sidebars.js` | 設定 | サイドバーナビゲーション定義 |
