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

## 概要

本ドキュメントはPrettierウェブサイトのホームページ（トップページ）の画面設計書です。Prettierの紹介、機能説明、サポート言語・エディタ一覧、利用企業紹介を表示するランディングページとして機能します。

### 本画面の処理概要

本画面はPrettierプロジェクトの顔となるランディングページであり、訪問者に対してPrettierの価値提案を行い、各種機能への誘導を行います。

**業務上の目的・背景**：Prettierはオープンソースのコードフォーマッターであり、本ホームページはプロジェクトの認知度向上、新規ユーザーの獲得、既存ユーザーへの情報提供を目的としています。訪問者がPrettierの価値を即座に理解し、導入を検討できるよう設計されています。

**画面へのアクセス方法**：ブラウザで `https://prettier.io/` にアクセスすることで表示されます。Docusaurusベースのサイトのルートページとして配置されており、Navbarのロゴクリックや、各ページのフッターリンクからもアクセス可能です。

**主要な操作・処理内容**：
1. 「Try It Online」ボタンクリックでPlaygroundページへ遷移
2. 「Install Prettier」ボタンクリックでインストールドキュメントへ遷移
3. サポート言語一覧の表示と各言語のドキュメントリンク
4. エディタサポート情報の表示
5. 利用企業ロゴの表示と詳細リンク
6. エコシステム統計情報（GitHub依存リポジトリ数、npm依存パッケージ数）の表示
7. アニメーションロゴのドラッグ操作によるローリングアニメーション

**画面遷移**：
- 遷移元：直接アクセス、Navbar経由、フッターリンク経由
- 遷移先：Playground（/playground/）、Install（/docs/install）、Users（/users）、Docs（/docs）、Option Philosophy（/docs/option-philosophy）、Why Prettier?（/docs/why-prettier）、Blog（/blog）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 28 | サポート情報取得（getSupportInfo） | API連携 | 対応言語・エディタ一覧の表示データを取得 |

## 画面種別

ランディングページ / 情報提示画面

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| セクション | 項目名 | 表示形式 | データソース |
|------------|--------|----------|--------------|
| ヘッダー | ロゴ（アニメーション対応） | SVG画像 | @sandhose/prettier-animated-logo |
| ヘッダー | Try It Online ボタン | ボタン | 静的テキスト |
| ヘッダー | Install Prettier ボタン | ボタン | 静的テキスト |
| ヘッダー | Tideliftリンク | バナー | docusaurus.config.js customFields |
| Syntax Section | Tシャツ販売情報 | 画像+テキスト | 静的コンテンツ |
| TL;DR Section | What is Prettier? | リスト | 静的テキスト |
| TL;DR Section | Why? | リスト | 静的テキスト |
| Languages Section | 対応言語一覧 | アイコン+リスト | docusaurus.config.js customFields.supportedLanguages |
| Editor Support Section | エディタ一覧 | カード | website/data/editors.yml |
| Users Section | 利用企業ロゴ（ピン留め） | 画像グリッド | website/data/users.yml |
| Ecosystem Section | State of JS 統計 | テキスト+リンク | 静的テキスト |
| Ecosystem Section | GitHub依存リポジトリ数 | テキスト | 静的テキスト |
| Ecosystem Section | npm依存パッケージ数 | テキスト | 静的テキスト |

## イベント仕様

### 1-ロゴドラッグ操作

ユーザーがロゴをドラッグ（またはタッチ）すると、ローリングアニメーションが開始されます。

**処理フロー**：
1. `onDragStart` または `onTouchStart` イベント発火
2. `setRolling(true)` により `rolling` ステートを `true` に設定
3. AnimatedLogo コンポーネントがアニメーションを開始
4. アニメーション終了時に `onAnimationEnd` で `setRolling(false)` を呼び出し

### 2-Try It Online ボタンクリック

Playgroundページへ遷移します。

**処理フロー**：
1. ボタンクリックイベント発火
2. 本番環境では `/playground/` へ、開発環境では `http://localhost:5173/` へ遷移
3. `target="_self"` により同一タブで遷移

### 3-Install Prettier ボタンクリック

インストールドキュメントページへ遷移します。

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

### 4-ユーザーロゴクリック

企業の詳細ページ（外部サイト）へ遷移します。

**処理フロー**：
1. ロゴクリックイベント発火
2. `user.infoLink` で指定されたURLへ遷移

### 5-See others ボタンクリック

ユーザー一覧ページへ遷移します。

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

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

本画面はデータベースを使用しません。全てのデータは設定ファイル（YAML）またはDocusaurus設定から読み込まれます。

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

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

## メッセージ仕様

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

## 例外処理

| 例外ケース | 処理内容 | ユーザーへの表示 |
|-----------|----------|-----------------|
| 外部YAMLファイル読み込み失敗 | ビルド時エラー | 本番環境では発生しない（ビルド時に検出） |
| 画像読み込み失敗 | 代替テキスト表示 | altテキストまたは空表示 |

## 備考

- 本画面はDocusaurusフレームワークをベースに構築されています
- アニメーションロゴは `@sandhose/prettier-animated-logo` パッケージを使用
- レスポンシブデザイン対応（モバイル、タブレット、デスクトップ）
- ダークモード対応（Docusaurusのテーマ機能）

---

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

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

### 推奨読解順序

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

まず、画面で使用されるデータの構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | users.yml | `website/data/users.yml` | 利用企業データの構造（caption, image, infoLink, pinned） |
| 1-2 | editors.yml | `website/data/editors.yml` | エディタ情報の構造（name, image, content） |
| 1-3 | languages.yml | `website/data/languages.yml` | 対応言語データの構造（name, image, variants） |
| 1-4 | docusaurus.config.js | `website/docusaurus.config.js` | customFieldsでのデータ注入方法 |

**読解のコツ**: YAMLファイルのデータがDocusaurus設定を通じてReactコンポーネントに渡される流れを追跡してください。

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

処理の起点となるファイル・関数を特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.jsx | `website/src/pages/index.jsx` | ホームページのメインコンポーネント |

**主要処理フロー**:
1. **374-391行目**: `Home` コンポーネントのエクスポートとレイアウト構成
2. **55-88行目**: `HomepageHeader` ヒーローセクションのレンダリング
3. **147-190行目**: `LanguagesSection` 対応言語グリッドの生成
4. **217-245行目**: `EditorSupportSection` エディタサポート情報の表示
5. **266-372行目**: `UsersSection` 利用企業とエコシステム統計の表示

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.jsx | `website/src/pages/index.jsx` | DraggableLogo（16-42行目）: アニメーションロゴの状態管理 |
| 3-2 | index.jsx | `website/src/pages/index.jsx` | LanguageItem（200-215行目）: 言語アイテムの表示ロジック |
| 3-3 | index.jsx | `website/src/pages/index.jsx` | Editor（254-264行目）: エディタカードの表示ロジック |

**主要処理フロー**:
- **16-27行目**: ドラッグイベントハンドリングとアニメーション状態管理
- **148-172行目**: 言語データのチャンク分割ロジック（2言語、9バリアント以内）

#### Step 4: スタイリングを理解する

CSSモジュールによるスタイリングを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | index.module.css | `website/src/pages/index.module.css` | セクション別スタイル定義 |

**主要スタイル**:
- **16-33行目**: ヒーローバナーのスタイル
- **156-163行目**: 言語セクションの配色
- **211-249行目**: エディタセクションのグリッドレイアウト
- **251-295行目**: ユーザーセクションのスタイル

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

```
Home (index.jsx:374)
    │
    ├─ Layout (@theme/Layout)
    │      └─ Docusaurusテーマレイアウト
    │
    ├─ HomepageHeader (index.jsx:55)
    │      ├─ Tidelift (index.jsx:44)
    │      └─ DraggableLogo (index.jsx:16)
    │             └─ AnimatedLogo (@sandhose/prettier-animated-logo)
    │
    ├─ SyntaxSection (index.jsx:90)
    │
    ├─ TldrSection (index.jsx:107)
    │
    ├─ LanguagesSection (index.jsx:147)
    │      └─ LanguageItem (index.jsx:200) × N
    │
    ├─ EditorSupportSection (index.jsx:217)
    │      └─ Editor (index.jsx:254) × N
    │
    └─ UsersSection (index.jsx:266)
```

### データフロー図

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

docusaurus.config.js    ───▶ useDocusaurusContext()     ───▶ siteConfig
         │                                                        │
         ▼                                                        ▼
customFields.users      ───▶ UsersSection               ───▶ 利用企業ロゴ表示
customFields.editors    ───▶ EditorSupportSection       ───▶ エディタカード表示
customFields.languages  ───▶ LanguagesSection           ───▶ 言語一覧表示

[ユーザー操作]               [状態更新]                      [UI更新]

ロゴドラッグ            ───▶ setRolling(true)           ───▶ アニメーション開始
アニメーション終了      ───▶ setRolling(false)          ───▶ アニメーション停止
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.jsx | `website/src/pages/index.jsx` | ソース | ホームページメインコンポーネント |
| index.module.css | `website/src/pages/index.module.css` | スタイル | CSSモジュールによるスタイル定義 |
| users.yml | `website/data/users.yml` | データ | 利用企業情報 |
| editors.yml | `website/data/editors.yml` | データ | エディタ情報 |
| languages.yml | `website/data/languages.yml` | データ | 対応言語情報 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus設定とcustomFields |
| @sandhose/prettier-animated-logo | 外部パッケージ | ライブラリ | アニメーションロゴコンポーネント |
