# 画面設計書 2-ヘルプページ

## 概要

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

### 本画面の処理概要

ヘルプページはJest利用者向けのサポート情報を集約したページであり、ドキュメントへのリンク、コミュニティリソース、最新情報の入手方法を3カラムレイアウトで整理して提供します。

**業務上の目的・背景**：Jestユーザーが問題に直面した際や情報を探している際に、適切なリソースへ迅速にアクセスできるようにすることを目的としています。ボランティアベースのプロジェクトであることを明示し、コミュニティベースのサポート体制を案内します。

**画面へのアクセス方法**：
- ヘッダーナビゲーションの「Help」リンクをクリック
- ホームページの「Get help」ボタンをクリック
- 直接URL `/help` にアクセス

**主要な操作・処理内容**：
1. 「Browse the docs」セクションでドキュメントリンクを確認・クリック
2. 「Join the community」セクションでコミュニティリソース（Discord、Stack Overflow）へアクセス
3. 「Stay up to date」セクションで最新情報リソース（Twitter、ブログ、CHANGELOG）へアクセス

**画面遷移**：
- 遷移先：Getting Startedページ、Troubleshootingページ、Configurationページ、APIリファレンスページ、ブログページ、外部サイト（Reactiflux Discord、Stack Overflow、Twitter、GitHub）
- 遷移元：ホームページ、ヘッダーナビゲーション

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | jest | 主機能 | Jestの各種ドキュメントへのリンク提供 |
| 5 | jest-config | 遷移先機能 | 設定ドキュメントへのリンク |

## 画面種別

情報提供ページ

## URL/ルーティング

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

## 入出力項目

該当なし（静的コンテンツのみ）

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| ヘッダー | "Need help?" タイトル、説明文 | 静的コンテンツ |
| Browse the docs | ドキュメントリンク一覧（Getting Started、Troubleshoot、Configure Jest、API Reference） | 静的コンテンツ |
| Join the community | コミュニティリンク一覧（Reactiflux Discord、Stack Overflow） | 静的コンテンツ |
| Stay up to date | 最新情報リンク一覧（Twitter、ブログ、CHANGELOG） | 静的コンテンツ |

## イベント仕様

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

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

| リンク名 | 遷移先 |
|----------|--------|
| get started | /docs/getting-started |
| Troubleshoot | /docs/troubleshooting |
| configure Jest | /docs/configuration |
| API Reference | /docs/api |

### 2-コミュニティリンククリック

コミュニティリソースへのリンクをクリックすると、外部サイトへ遷移します（新規タブ）。

| リンク名 | 遷移先 |
|----------|--------|
| Reactiflux | https://www.reactiflux.com/ |
| Stack Overflow (existing questions) | https://stackoverflow.com/questions/tagged/jestjs |
| Stack Overflow (ask your own) | https://stackoverflow.com/questions/ask |

### 3-最新情報リンククリック

最新情報リソースへのリンクをクリックすると、対応するページへ遷移します。

| リンク名 | 遷移先 |
|----------|--------|
| Jest (Twitter) | https://twitter.com/jestjs_ |
| Jest blog | /blog/ |
| changelog | https://github.com/jestjs/jest/blob/main/CHANGELOG.md |

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- 3カラムレイアウト（GridBlock layout="threeColumn"）で情報を整理
- Docusaurus v2のLayoutコンポーネントでラップ
- Translateコンポーネントによる多言語対応
- v1互換のContainerおよびGridBlockコンポーネントを使用

---

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

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

### 推奨読解順序

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

この画面は静的コンテンツのみのため、特別なデータ構造は存在しません。supportLinks配列の構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | help.js | `website/src/pages/help.js` | supportLinks配列の構造（content、title） |

**読解のコツ**: supportLinks配列内の各オブジェクトが1つのカラムに対応します。contentプロパティにはMarkdown形式のテキストが含まれています。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | help.js | `website/src/pages/help.js` | HelpPageコンポーネントがエクスポート（82-88行目） |

**主要処理フロー**:
1. **82-88行目**: HelpPage関数コンポーネントの定義、Layoutでラップ
2. **17-80行目**: Helpクラスコンポーネントでメインコンテンツをレンダリング
3. **19-53行目**: supportLinks配列の定義（3つのセクション）
4. **73行目**: GridBlockでsupportLinksを3カラムで表示

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Container.js | `website/src/components/v1/Container.js` | wrapperV1/mainContainerV1クラス適用 |
| 3-2 | GridBlock.js | `website/src/components/v1/GridBlock.js` | threeColumnレイアウト |
| 3-3 | MarkdownBlock.js | `website/src/components/v1/MarkdownBlock.js` | Markdown内リンクのレンダリング |

**主要処理フロー**:
- **56-77行目**: Container内でヘッダーとGridBlockを配置
- **73行目**: GridBlock contents={supportLinks} layout="threeColumn"

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

```
HelpPage (help.js:82-88)
    │
    └─ Layout (@theme/Layout)
           │
           └─ Help (help.js:17-80)
                  │
                  ├─ Container (v1/Container.js)
                  │      │
                  │      ├─ header (h2: "Need help?")
                  │      │
                  │      └─ p (説明文)
                  │
                  └─ GridBlock (v1/GridBlock.js)
                         │
                         └─ supportLinks配列 (3カラム)
                                ├─ Browse the docs
                                ├─ Join the community
                                └─ Stay up to date
```

### データフロー図

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

supportLinks ────▶ GridBlock ───────────▶ 3カラムレイアウト
(静的配列)           コンポーネント            表示

                   MarkdownBlock ────────▶ リンク付きテキスト
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| help.js | `website/src/pages/help.js` | ソース | ヘルプページのメインコンポーネント |
| Container.js | `website/src/components/v1/Container.js` | ソース | コンテナコンポーネント |
| GridBlock.js | `website/src/components/v1/GridBlock.js` | ソース | 3カラムグリッドレイアウト |
| MarkdownBlock.js | `website/src/components/v1/MarkdownBlock.js` | ソース | Markdownテキストレンダリング |
| Layout | `@theme/Layout` | ソース | Docusaurusテーマレイアウト |
| Translate | `@docusaurus/Translate` | ソース | 多言語対応コンポーネント |
