# 画面設計書 1-ホームページ

## 概要

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

### 本画面の処理概要

ホームページはJestテスティングフレームワークの公式Webサイトのランディングページであり、訪問者に対してJestの特徴、機能、コミュニティ情報を視覚的に訴求し、ドキュメントやヘルプページへの誘導を行います。

**業務上の目的・背景**：Jestフレームワークの認知度向上と新規ユーザー獲得を目的としています。開発者がJestを初めて知る際の入口として機能し、フレームワークの主要な特徴（ゼロコンフィグ、スナップショットテスト、並列実行、充実したAPI）を効果的に伝えることで、導入検討のきっかけを提供します。

**画面へのアクセス方法**：Webブラウザで `https://jestjs.io/` にアクセスするか、サイト内のJestロゴをクリックすることでアクセスできます。

**主要な操作・処理内容**：
1. インタラクティブなカードアニメーションの表示とクリック操作によるテスト実行シミュレーション
2. ナビゲーションボタン（Get Started、Docs、Config、Get help）によるドキュメントページへの遷移
3. 機能紹介セクション（Zero config、Snapshots、Isolated、Great api）の閲覧
4. デモ画像（Fast and Safe、Code Coverage、Easy Mocking、Great Exceptions）の閲覧
5. Matcherセクションでのボタン切り替えによるスクリーンショット表示
6. YouTubeビデオの埋め込み再生
7. Open Collectiveスポンサー一覧の表示
8. Jestユーザー企業ロゴの一覧表示
9. ソーシャルリンク（Twitter Follow、GitHub Star）の利用

**画面遷移**：
- 遷移先：Getting Startedページ、ドキュメントページ、Configurationページ、ヘルプページ、ブログページ、バージョン一覧ページ、APIリファレンスページ
- 遷移元：サイト内すべてのページからヘッダーロゴクリックで遷移可能

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | jest | 主機能 | Jestフレームワーク全体の紹介、機能概要説明 |
| 16 | jest-snapshot | 補助機能 | スナップショットテスト機能の特徴紹介 |
| 14 | jest-mock | 補助機能 | モック機能の特徴紹介（Easy Mocking） |
| 10 | expect | 補助機能 | アサーションAPIの特徴紹介（Great api） |
| 22 | @jest/reporters | 補助機能 | テスト結果表示機能の紹介（Great Exceptions） |

## 画面種別

ランディングページ（LP）

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入出力 | データ型 | 説明 |
|--------|--------|----------|------|
| スポンサーデータ | 入力 | JSON | `backers.json`からスポンサー情報を取得 |
| ユーザー企業データ | 入力 | JSON | `users.json`からユーザー企業情報を取得 |
| 初回アクセスフラグ | 入出力 | Boolean | `localStorage`に保存し、アニメーション時間を制御 |

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| ヒーローセクション | Jestロゴ、カードアニメーション、ナビゲーションボタン | 静的コンテンツ |
| ソーシャルリンク | Twitter Followボタン、GitHub Starボタン | 外部API |
| イントロダクション | Jestの説明文、対応技術一覧 | 静的コンテンツ |
| 機能紹介 | Zero config、Snapshots、Isolated、Great apiの4カラム | 静的コンテンツ |
| Fast and Safe | 並列実行の説明、デモ画像 | 静的コンテンツ |
| Code Coverage | カバレッジ機能の説明、デモ画像 | 静的コンテンツ |
| Easy Mocking | モック機能の説明、デモ画像 | 静的コンテンツ |
| Great Exceptions | エラー表示機能の説明、Matcherボタン群 | 静的コンテンツ |
| Philosophy | Jestの設計思想 | 静的コンテンツ |
| Docs and Talks | YouTubeビデオ埋め込み | YouTube API |
| Open Collective | Gold Sponsors、Featured Sponsorsアバター | backers.json |
| Who uses Jest | ユーザー企業ロゴ一覧 | users.json |

## イベント仕様

### 1-カードクリックイベント

カードをクリックすると、テスト実行アニメーションが開始され、ランダムにPASS/FAILの結果が表示されます。

- 処理フロー:
  1. クリック対象のカード要素を特定
  2. `jest-card-running`クラスを追加してアニメーション開始
  3. ランダムに結果を生成（約80%の確率でPASS）
  4. 結果に応じて`jest-card-pass`または`jest-card-fail`クラスを追加
  5. ラベルテキストを"PASS"または"FAIL"に更新
  6. アニメーション完了後、`jest-card-popping`クラスで終了演出

### 2-ナビゲーションボタンクリック

各ボタンクリックで対応するページへ遷移します。

| ボタン名 | 遷移先 |
|----------|--------|
| Get Started | /docs/getting-started |
| Docs | /docs/getting-started |
| Config | /docs/configuration |
| Get help | /help |

### 3-Matcherボタン切り替え

Matcherセクションのボタンをクリックすると、対応するスクリーンショット画像が表示されます。

- 対象Matcher: toBe、toBeCloseTo、toEqual、toStrictEqual、toHaveProperty、toMatchSnapshot、toThrowError

### 4-スポンサー/ユーザー企業リンククリック

スポンサーアバターまたはユーザー企業ロゴをクリックすると、外部サイトへ遷移します（新規タブ）。

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

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

## メッセージ仕様

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

## 例外処理

| 例外ケース | 処理内容 |
|------------|----------|
| スポンサーデータ読み込み失敗 | 静的JSONファイルのため、ビルド時にエラーとして検出 |
| ユーザーデータ読み込み失敗 | 静的JSONファイルのため、ビルド時にエラーとして検出 |
| YouTubeビデオ読み込み失敗 | react-lite-youtube-embedにより軽量プレースホルダーを表示 |
| localStorage利用不可 | 初回アクセスとして扱い、長めのアニメーション時間を適用 |

## 備考

- Docusaurus v2フレームワークで構築されている
- 多言語対応（i18n）に対応しており、`<Translate>`コンポーネントで翻訳テキストを管理
- PWA（Progressive Web App）として動作可能
- カードアニメーションはDocusaurus v1から移行したVanilla JSコードで実装

---

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

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

### 推奨読解順序

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

スポンサー情報とユーザー企業情報のデータ構造を把握することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | backers.json | `website/backers.json` | スポンサー情報の構造（fromAccount、totalDonations、featured） |
| 1-2 | users.json | `website/users.json` | ユーザー企業情報の構造（image、infoLink、caption） |

**読解のコツ**: JSONファイルのスキーマを確認し、Reactコンポーネントでどのプロパティが使用されているかを照合します。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.js | `website/src/pages/index.js` | IndexPageコンポーネントがエクスポート、useEffectでアニメーション初期化 |

**主要処理フロー**:
1. **595-602行目**: IndexPageコンポーネントの定義、Layoutでラップ
2. **596行目**: useEffectでsetupLandingAnimationを呼び出し
3. **298-593行目**: Indexクラスコンポーネントでメインコンテンツをレンダリング

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

各セクションのコンポーネント構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.js | `website/src/pages/index.js` | HeroInteractive（272-296行目）、Card（169-263行目）、Hand（265-270行目） |
| 3-2 | Container.js | `website/src/components/v1/Container.js` | セクションのラッパーコンポーネント |
| 3-3 | GridBlock.js | `website/src/components/v1/GridBlock.js` | グリッドレイアウトコンポーネント |

**主要処理フロー**:
- **71-91行目**: Sponsorコンポーネント（スポンサーアバター表示）
- **93-113行目**: Backerコンポーネント（バッカーアバター表示）
- **115-167行目**: Contributorsコンポーネント（Open Collectiveセクション）

#### Step 4: アニメーション処理を理解する

インタラクティブなカードアニメーションの実装を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | _landingAnimation.js | `website/src/pages/animations/_landingAnimation.js` | setupLandingAnimation関数の全体構造 |

**主要処理フロー**:
- **8-13行目**: cardTransform関数（カード位置計算）
- **27-33行目**: positionCards関数（カード配置）
- **38-75行目**: resolveRun関数（テスト結果表示）
- **77-88行目**: forceRun関数（全カードテスト実行）
- **90-102行目**: runTest関数（個別テスト実行）
- **119-181行目**: setUpMatcherButtons関数（Matcherボタン設定）

#### Step 5: スタイル定義を理解する

ページのスタイル設定を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | index.module.css | `website/src/pages/index.module.css` | ページ固有のCSS Modules |

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

```
IndexPage (index.js:595-602)
    │
    ├─ useEffect → setupLandingAnimation (_landingAnimation.js:17-217)
    │      ├─ forceRun (77-88)
    │      ├─ positionCards (27-33)
    │      ├─ setUpMatcherButtons (119-181)
    │      └─ makeScreenshotsClickable (186-193)
    │
    └─ Index (298-593)
           ├─ HeroInteractive (272-296)
           │      ├─ TwitterButton (29-40)
           │      ├─ GitHubStarButton (42-55)
           │      ├─ Hand (265-270)
           │      │      └─ Card (169-263)
           │      └─ Button (57-68)
           │
           ├─ Container (v1/Container.js)
           │      └─ GridBlock (v1/GridBlock.js)
           │
           ├─ Contributors (115-167)
           │      ├─ Sponsor (71-91)
           │      └─ Backer (93-113)
           │
           └─ LiteYouTubeEmbed (外部ライブラリ)
```

### データフロー図

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

backers.json ────▶ Contributors ────────▶ スポンサー/バッカー一覧
                   コンポーネント

users.json ──────▶ Index.render() ──────▶ ユーザー企業ロゴ一覧

localStorage ────▶ setupLandingAnimation ──▶ カードアニメーション
(firstRun)         (_landingAnimation.js)

ユーザークリック ──▶ handleHandClick ────▶ テスト結果表示
                   runTest
                   resolveRun

Matcherボタン ────▶ setUpMatcherButtons ──▶ スクリーンショット切替
クリック
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.js | `website/src/pages/index.js` | ソース | ホームページのメインコンポーネント |
| _landingAnimation.js | `website/src/pages/animations/_landingAnimation.js` | ソース | カードアニメーション処理 |
| index.module.css | `website/src/pages/index.module.css` | スタイル | ページ固有スタイル |
| Container.js | `website/src/components/v1/Container.js` | ソース | コンテナコンポーネント |
| GridBlock.js | `website/src/components/v1/GridBlock.js` | ソース | グリッドレイアウト |
| MarkdownBlock.js | `website/src/components/v1/MarkdownBlock.js` | ソース | Markdownレンダリング |
| backers.json | `website/backers.json` | データ | スポンサー情報 |
| users.json | `website/users.json` | データ | ユーザー企業情報 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | サイト設定 |
| legacyCSS.css | `website/src/components/v1/legacyCSS.css` | スタイル | 旧バージョン互換スタイル |
| custom.css | `website/static/css/custom.css` | スタイル | カスタムスタイル |
| jest.css | `website/static/css/jest.css` | スタイル | Jest固有スタイル |
