# 画面設計書 4-ヘルプ

## 概要

本ドキュメントはPrettierウェブサイトのヘルプページの画面設計書です。ドキュメント案内、コミュニティ情報、更新情報へのリンクを提供するサポートページとして機能します。

### 本画面の処理概要

本画面はPrettierを利用するユーザーに対して、サポートリソースへのアクセスを提供するハブページです。3カラムカードレイアウトで各種情報への導線を整理して表示します。

**業務上の目的・背景**：Prettierを利用する開発者が困った際に、適切なサポートリソースを素早く見つけられるようにすることを目的としています。ドキュメント、コミュニティ、更新情報という3つの主要なサポートチャネルへの導線を提供し、ユーザーの自己解決を促進します。

**画面へのアクセス方法**：
- ブラウザで直接 `https://prettier.io/help` にアクセス
- Navbarやフッターのヘルプリンク（存在する場合）

**主要な操作・処理内容**：
1. ドキュメントへのリンクの提供
2. コミュニティ情報の案内
3. 更新情報の案内

**画面遷移**：
- 遷移元：直接アクセス
- 遷移先：ドキュメント（/docs）

**権限による表示制御**：本画面は公開ページのため、権限による表示制御はありません。全ての訪問者が同一のコンテンツを閲覧できます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 本画面には直接関連する機能はありません |

## 画面種別

情報提示 / ヘルプハブ

## URL/ルーティング

- URL: `/help`
- ファイルパス: `website/src/pages/help/index.jsx`

## 入出力項目

本画面はユーザー入力を受け付けない表示専用ページです。

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| - | - | - | - | 入力項目なし |

## 表示項目

| セクション | 項目名 | 表示形式 | データソース |
|------------|--------|----------|--------------|
| ヘッダー | ページタイトル | H1テキスト | 静的テキスト「Need help?」 |
| ヘッダー | サブテキスト | テキスト | 静的テキスト |
| カード1 | Browse Docs | カード | 静的テキスト |
| カード2 | Join the community | カード | 静的テキスト |
| カード3 | Stay up to date | カード | 静的テキスト |

## イベント仕様

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

「Browse Docs」カード内のリンクをクリックすると、ドキュメントページへ遷移します。

**処理フロー**：
1. リンククリックイベント発火
2. `/docs`へ遷移

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

本画面はデータベースを使用しません。

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | データベース操作なし |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|----------------|----------|
| - | - | - | 本画面ではメッセージ表示なし |

## 例外処理

| 例外ケース | 処理内容 | ユーザーへの表示 |
|-----------|----------|-----------------|
| - | - | 例外ケースなし（静的ページ） |

## 備考

- 本画面はDocusaurusフレームワークをベースに構築されています
- 3カラムカードレイアウト（Docusaurus標準のcardクラス使用）
- シンプルな静的コンテンツページ
- JSX内で`class`属性を使用（通常は`className`だが、動作に影響なし）

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.jsx | `website/src/pages/help/index.jsx` | ページ全体の構造 |

**主要処理フロー**:
1. **11-22行目**: Cardコンポーネントの定義
2. **24-54行目**: Helpコンポーネントのレンダリング

**読解のコツ**: シンプルな静的ページであり、Docusaurusのカードスタイルを活用しています。

#### Step 2: カードコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.jsx | `website/src/pages/help/index.jsx` | Cardコンポーネントの実装（11-22行目） |

**主要処理フロー**:
- **13-15行目**: card__headerでタイトル表示
- **16-18行目**: card__bodyで本文表示

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

```
Help (index.jsx:24)
    │
    ├─ Layout (@theme/Layout)
    │      └─ Docusaurusテーマレイアウト
    │
    ├─ Heading (@theme/Heading)
    │      └─ 「Need help?」タイトル
    │
    └─ div.row
           ├─ Card (Browse Docs)
           │      └─ Link → /docs
           │
           ├─ Card (Join the community)
           │
           └─ Card (Stay up to date)
```

### データフロー図

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

静的テキスト            ───▶ Cardコンポーネント         ───▶ カード表示
         │
         ▼
静的リンク（/docs）     ───▶ Linkコンポーネント         ───▶ ドキュメントへの遷移
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.jsx | `website/src/pages/help/index.jsx` | ソース | ヘルプページコンポーネント |
| @theme/Layout | Docusaurusテーマ | ライブラリ | ページレイアウト |
| @theme/Heading | Docusaurusテーマ | ライブラリ | 見出しコンポーネント |
| @docusaurus/Link | Docusaurus | ライブラリ | リンクコンポーネント |
