# 画面設計書 5-About - Prettier概要

## 概要

本ドキュメントはPrettierドキュメントの概要ページ（What is Prettier?）の画面設計書です。Prettierの基本的な概要説明を行うドキュメントページとして機能します。

### 本画面の処理概要

本画面はPrettierとは何か、どのような言語をサポートしているか、どのように動作するかを説明するドキュメントの入り口となるページです。

**業務上の目的・背景**：Prettierを初めて知るユーザーに対して、Prettierの基本的な概念と価値提案を説明します。サポートしている言語一覧、コード整形の仕組み、関連する学習リソース（カンファレンストーク）への導線を提供し、ユーザーがPrettierを理解する最初のステップを支援します。

**画面へのアクセス方法**：
- ホームページの「documentation」リンクをクリック
- Navbarの「Docs」をクリック
- ブラウザで直接 `https://prettier.io/docs` にアクセス
- フッターの「About」リンクをクリック

**主要な操作・処理内容**：
1. Prettierの概要説明の閲覧
2. サポート言語一覧の確認
3. コード整形例の確認
4. カンファレンストーク動画へのリンク
5. サイドバーを通じた他のドキュメントページへの遷移

**画面遷移**：
- 遷移元：ホームページ、Navbar、フッター、ヘルプページ
- 遷移先：Why Prettier?、Rationale、各言語の公式サイト、YouTubeカンファレンストーク

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | コードフォーマット（format） | 主機能 | Prettierの基本的なフォーマット機能の説明 |
| 5 | JavaScript/TypeScript パース | 補助機能 | 対応言語としてJavaScript/TypeScriptパースを説明 |
| 6 | CSS/SCSS/Less パース | 補助機能 | 対応言語としてCSS/SCSS/Lessパースを説明 |
| 7 | HTML/Vue/Angular パース | 補助機能 | 対応言語としてHTML/Vue/Angularパースを説明 |
| 8 | Markdown/MDX パース | 補助機能 | 対応言語としてMarkdown/MDXパースを説明 |
| 9 | YAML パース | 補助機能 | 対応言語としてYAMLパースを説明 |
| 10 | GraphQL パース | 補助機能 | 対応言語としてGraphQLパースを説明 |
| 11 | JSON/JSON5/JSONC パース | 補助機能 | 対応言語としてJSONパースを説明 |
| 12 | Handlebars/Glimmer パース | 補助機能 | 対応言語としてHandlebars/Glimmerパースを説明 |

## 画面種別

ドキュメント / 情報提示

## URL/ルーティング

- URL: `/docs` または `/docs/index`
- ファイルパス: `docs/index.md`
- Docusaurus docs機能で生成

## 入出力項目

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

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

## 表示項目

| セクション | 項目名 | 表示形式 | データソース |
|------------|--------|----------|--------------|
| ヘッダー | ページタイトル | H1テキスト | Front Matter（title: What is Prettier?） |
| 本文 | Prettier概要説明 | テキスト | Markdownコンテンツ |
| 本文 | サポート言語一覧 | 箇条書きリスト | Markdownコンテンツ |
| 本文 | コード例（短い関数呼び出し） | コードブロック | Markdownコンテンツ |
| 本文 | コード例（長い関数呼び出し） | コードブロック | Markdownコンテンツ |
| 本文 | フォーマット後コード例 | コードブロック | Markdownコンテンツ |
| 本文 | YouTubeサムネイル1 | 画像リンク | 静的画像 |
| 本文 | YouTubeサムネイル2 | 画像リンク | 静的画像 |
| 本文 | 脚注 | テキスト | Markdownコンテンツ |
| サイドバー | ドキュメントナビゲーション | リンクリスト | sidebars.js |

## イベント仕様

### 1-言語リンククリック

サポート言語のリンクをクリックすると、各言語の公式サイトへ遷移します。

**処理フロー**：
1. 言語リンククリックイベント発火
2. 各言語の公式サイト（外部）へ遷移

### 2-YouTubeサムネイルクリック

カンファレンストークのサムネイル画像をクリックすると、YouTube動画へ遷移します。

**処理フロー**：
1. サムネイル画像クリックイベント発火
2. YouTube動画ページへ遷移

### 3-脚注リンククリック

脚注のrationalへのリンクをクリックすると、Rationaleページへ遷移します。

**処理フロー**：
1. 脚注リンククリックイベント発火
2. `/docs/rationale`の該当セクションへ遷移

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

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

**処理フロー**：
1. サイドバーリンククリックイベント発火
2. 選択したドキュメントページへ遷移

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

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

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

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

## メッセージ仕様

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

## 例外処理

| 例外ケース | 処理内容 | ユーザーへの表示 |
|-----------|----------|-----------------|
| 画像読み込み失敗 | 代替テキスト表示 | alt属性の値 |

## 備考

- 本画面はDocusaurus docs機能でMarkdownから生成されます
- Front Matterで`id: index`、`title: What is Prettier?`を指定
- コード例には`<!-- prettier-ignore -->`コメントで意図的にフォーマットを無効化
- 脚注で例外ケース（空行、マルチラインオブジェクト）について説明
- YouTube動画へのリンクはサムネイル画像を使用

---

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

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

### 推奨読解順序

#### Step 1: ドキュメント構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.md | `docs/index.md` | ドキュメントのMarkdownソース |
| 1-2 | sidebars.js | `website/sidebars.js` | サイドバーナビゲーション構成 |

**読解のコツ**: DocusaurusのMarkdownフォーマットとFront Matter構文を理解することが重要です。

#### Step 2: コンテンツ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.md | `docs/index.md` | メインコンテンツの構造 |

**主要コンテンツ**:
1. **1-4行目**: Front Matter（id, title）
2. **6行目**: 概要説明の開始
3. **8-22行目**: サポート言語一覧
4. **24-27行目**: 概要説明の続き
5. **30-51行目**: コード例と説明
6. **55-59行目**: カンファレンストークへのリンク
7. **61-63行目**: 脚注

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

```
index.md (Markdownソース)
    │
    ├─ Docusaurus docs plugin
    │      └─ Markdownパース
    │
    ├─ Front Matter処理
    │      └─ id, title抽出
    │
    ├─ sidebars.js
    │      └─ サイドバー生成
    │
    └─ Docusaurusテーマ
           └─ ページレンダリング
```

### データフロー図

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

docs/index.md           ───▶ Docusaurusビルド           ───▶ HTMLページ
         │
         ▼
Front Matter            ───▶ メタデータ抽出             ───▶ ページタイトル
         │
         ▼
Markdownコンテンツ      ───▶ MDX変換                   ───▶ Reactコンポーネント
         │
         ▼
sidebars.js             ───▶ サイドバー生成             ───▶ ナビゲーション
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.md | `docs/index.md` | ドキュメント | メインMarkdownソース |
| sidebars.js | `website/sidebars.js` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus全体設定 |
| /images/youtube-cover/*.png | `website/static/images/` | 静的アセット | YouTubeサムネイル画像 |
