# 画面設計書 10-Jest Communityページ

## 概要

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

### 本画面の処理概要

Jest CommunityページはJestコミュニティに関する情報を提供するドキュメントページです。jest-communityというGitHub組織の紹介、コミュニティが管理するプロジェクト（vscode-jest、jest-extended、eslint-plugin-jest、awesome-jest）の紹介、コミュニティへの参加方法について解説します。

**業務上の目的・背景**：Jestはオープンソースプロジェクトであり、コミュニティによる貢献が重要です。このページでは、Jestのエコシステムを支えるコミュニティプロジェクトを紹介し、ユーザーがコミュニティに参加・貢献する方法を案内します。

**画面へのアクセス方法**：
- サイドバーナビゲーションから選択
- 直接URL `/docs/jest-community` にアクセス

**主要な操作・処理内容**：
1. jest-communityのGitHub組織の概要確認
2. コミュニティプロジェクト（vscode-jest、jest-extended等）のリンク確認
3. Awesome Jestリストの確認
4. コミュニティへの貢献方法の確認
5. サイドバーナビゲーションで他のドキュメントページへ遷移

**画面遷移**：
- 遷移先：各コミュニティプロジェクトのGitHubページ（外部リンク）
- 遷移元：他のドキュメントページ

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | jest | 主機能 | Jestコミュニティ関連情報の提供 |

## 画面種別

ドキュメントページ

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| タイトル | "Jest Community" | Markdown Front Matter |
| 導入文 | jest-community組織の概要説明 | 静的コンテンツ |
| プロジェクト一覧 | vscode-jest、jest-extended、eslint-plugin-jest、awesome-jest | 静的コンテンツ |
| Awesome Jest | awesome-jestリストの紹介 | 静的コンテンツ |
| 貢献方法 | PR送信、プロジェクト移管の案内 | 静的コンテンツ |
| サイドバー | ドキュメントナビゲーション | sidebars.json |

## イベント仕様

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

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

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

各コミュニティプロジェクトへのリンクをクリックすると、新規タブで外部サイト（GitHub）が開きます。

| プロジェクト名 | リンク先 |
|---------------|----------|
| jest-community | https://github.com/jest-community |
| vscode-jest | https://github.com/jest-community/vscode-jest |
| jest-extended | https://github.com/jest-community/jest-extended |
| eslint-plugin-jest | https://github.com/jest-community/eslint-plugin-jest |
| awesome-jest | https://github.com/jest-community/awesome-jest |
| awesome-jest (PR) | https://github.com/jest-community/awesome-jest/pulls |

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Docusaurusによりdocs/JestCommunity.mdから自動生成
- Front Matterのidが`jest-community`のため、URLは`/docs/jest-community`
- 比較的短いドキュメント（22行）
- コミュニティへの貢献を促進する内容

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | JestCommunity.md | `docs/JestCommunity.md` | Front Matter（id: jest-community, title: Jest Community） |

**読解のコツ**: ドキュメントは簡潔で、jest-community組織の紹介とawesome-jestリストの2つの主要セクションで構成されています。

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

各セクションの内容を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | JestCommunity.md | `docs/JestCommunity.md` | 全体構造（1-22行） |

**主要セクション**:
- **6-15行目**: jest-community組織の紹介とプロジェクトリスト
- **17-21行目**: Awesome Jestセクション（リソースリスト、貢献方法）

#### Step 3: 外部リソースを理解する

リンク先のGitHubプロジェクトを把握します（任意の参照）。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | vscode-jest | GitHub: jest-community/vscode-jest | VS Code拡張機能 |
| 3-2 | jest-extended | GitHub: jest-community/jest-extended | 追加マッチャー |
| 3-3 | eslint-plugin-jest | GitHub: jest-community/eslint-plugin-jest | ESLintプラグイン |
| 3-4 | awesome-jest | GitHub: jest-community/awesome-jest | リソースキュレーション |

**読解のコツ**: これらは外部プロジェクトであり、Jestコアリポジトリとは別に管理されています。

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

```
Docusaurus Build Process
    │
    ├─ docs/JestCommunity.md
    │      │
    │      ├─ Front Matter解析
    │      │      └─ id: jest-community → URL: /docs/jest-community
    │      │
    │      ├─ Markdown → HTML変換
    │      │      ├─ jest-community紹介セクション
    │      │      │      ├─ vscode-jestリンク
    │      │      │      ├─ jest-extendedリンク
    │      │      │      ├─ eslint-plugin-jestリンク
    │      │      │      └─ awesome-jestリンク
    │      │      │
    │      │      └─ Awesome Jestセクション
    │      │             └─ 貢献方法案内
    │      │
    │      └─ 外部リンク処理
    │             └─ GitHubプロジェクトリンク
    │
    └─ sidebars.json
           └─ サイドバーナビゲーション生成
```

### データフロー図

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

JestCommunity.md ───────▶ Markdown Parser ────────▶ HTML コンテンツ
                                │
                                └─ 外部リンク処理
                                       └─ GitHubプロジェクトリンク

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

### 関連ファイル一覧

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