# 画面設計書 9-About - Rationale

## 概要

本ドキュメントはPrettierドキュメントの「Rationale」ページの画面設計書です。Prettierの技術的な設計根拠を説明するドキュメントページとして機能します。

### 本画面の処理概要

本画面はPrettierがなぜ特定の方法でコードをフォーマットするのか、その技術的な判断根拠を詳細に説明するドキュメントページです。文字列、空行、マルチラインオブジェクト、デコレータ、セミコロン、コメントなど、様々なケースについての設計判断を解説します。

**業務上の目的・背景**：Prettierのフォーマット結果に疑問を持つユーザーに対して、なぜそのような出力になるのかの技術的根拠を説明します。また、Prettierが行うこと/行わないことの境界を明確にし、ユーザーの期待値を適切に設定することを目的としています。

**画面へのアクセス方法**：
- Prettier概要ページの脚注リンクをクリック
- サイドバーの「Rationale」をクリック
- ブラウザで直接 `https://prettier.io/docs/rationale` にアクセス

**主要な操作・処理内容**：
1. Prettierの設計根拠の各セクションの閲覧
2. コード例の確認
3. 外部リンク（standardjs.comなど）への遷移
4. サイドバーを通じた他のドキュメントページへの遷移

**画面遷移**：
- 遷移元：Prettier概要ページ、サイドバー
- 遷移先：Optionsページ、standardjs.com、GitHub Issues、サイドバー経由で他のドキュメントページ

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 本画面には直接関連する機能はありません（説明ドキュメント） |

## 画面種別

ドキュメント / 情報提示

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| セクション | 項目名 | 表示形式 | データソース |
|------------|--------|----------|--------------|
| ヘッダー | ページタイトル | H1テキスト | Front Matter（title: Rationale） |
| What Prettier is concerned about | Correctness | H3 + 本文 | Markdownコンテンツ |
| What Prettier is concerned about | Strings | H3 + 本文 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | Empty lines | H3 + 本文 | Markdownコンテンツ |
| What Prettier is concerned about | Multi-line objects | H3 + 本文 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | Decorators | H3 + 本文 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | Template literals | H3 + 本文 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | Semicolons | H3 + 本文 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | Print width | H3 + 本文 | Markdownコンテンツ |
| What Prettier is concerned about | Imports | H4 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | Testing functions | H4 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | JSX | H3 + コード例 | Markdownコンテンツ |
| What Prettier is concerned about | Comments | H3 + 本文 | Markdownコンテンツ |
| Disclaimer | 非標準構文について | 本文 | Markdownコンテンツ |
| Disclaimer | 機械生成ファイルについて | 本文 | Markdownコンテンツ |
| What Prettier is not concerned about | 範囲外の事項リスト | 箇条書き | Markdownコンテンツ |
| サイドバー | ドキュメントナビゲーション | リンクリスト | sidebars.js |

## イベント仕様

### 1-オプションページリンククリック

singleQuote、jsxSingleQuote、noSemi、printWidthなどのオプションへのリンクをクリックすると、Optionsページへ遷移します。

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

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

standardjs.comやGitHub Issuesなどの外部リンクをクリックすると、外部サイトへ遷移します。

**処理フロー**：
1. 外部リンククリックイベント発火
2. 外部サイトへ遷移

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

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

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

| 例外ケース | 処理内容 | ユーザーへの表示 |
|-----------|----------|-----------------|
| - | - | 例外ケースなし（静的ドキュメント） |

## 備考

- 本画面はDocusaurus docs機能でMarkdownから生成されます
- 最も長いドキュメントの一つで、多数のセクションとコード例を含む
- `<!-- prettier-ignore -->`コメントで意図的にフォーマットを無効化したコード例を含む
- :::note構文でノートブロックを表示
- 「What Prettier is concerned about」と「What Prettier is not concerned about」の2つの主要セクションで構成

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | rationale.md | `docs/rationale.md` | ドキュメントのMarkdownソース |

**読解のコツ**: 長いドキュメントなので、目次（H2/H3見出し）を先に把握することが重要です。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | rationale.md | `docs/rationale.md` | 2つの主要セクション構成 |

**主要コンテンツ**:
1. **1-4行目**: Front Matter（id, title）
2. **6行目**: 導入文
3. **8-10行目**: What Prettier is concerned about（H2）
4. **10-12行目**: Correctness（H3）
5. **14-22行目**: Strings（H3）
6. **24-29行目**: Empty lines（H3）
7. **31-88行目**: Multi-line objects（H3）
8. **90-140行目**: Decorators（H3）
9. **142-155行目**: Template literals（H3）
10. **156-219行目**: Semicolons（H3）
11. **220-260行目**: Print width（H3）
12. **261-296行目**: JSX（H3）
13. **297-339行目**: Comments（H3）
14. **340-347行目**: Disclaimer about non-standard syntax
15. **348-359行目**: What Prettier is not concerned about（H2）

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

```
rationale.md (Markdownソース)
    │
    ├─ Docusaurus docs plugin
    │      └─ Markdownパース
    │
    ├─ <!-- prettier-ignore -->処理
    │      └─ コードブロックのフォーマット無効化
    │
    ├─ :::note構文処理
    │      └─ ノートブロック生成
    │
    ├─ Front Matter処理
    │      └─ id, title抽出
    │
    ├─ sidebars.js
    │      └─ サイドバー生成
    │
    └─ Docusaurusテーマ
           └─ ページレンダリング
```

### データフロー図

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

docs/rationale.md       ───▶ Docusaurusビルド           ───▶ HTMLページ
         │
         ▼
コードブロック          ───▶ シンタックスハイライト     ───▶ ハイライト済みコード
         │
         ▼
:::note構文             ───▶ Admonition変換             ───▶ ノートブロック表示
         │
         ▼
内部リンク              ───▶ リンク解決                 ───▶ 相対パスリンク
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| rationale.md | `docs/rationale.md` | ドキュメント | メインMarkdownソース |
| sidebars.js | `website/sidebars.js` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus全体設定 |
| options.md | `docs/options.md` | ドキュメント | リンク先のオプションドキュメント |
