# 画面設計書 26-Misc - Technical Details

## 概要

本ドキュメントは、Prettier公式サイトの「Technical Details」ドキュメントページの画面設計書である。このページは、Prettierの内部アーキテクチャと技術的な実装詳細を解説するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、Prettierの中間表現（Intermediate Representation、IR）ベースのフォーマッティングアルゴリズムについて説明している。recastプリンターからのフォーク、Wadlerの"A prettier printer"アルゴリズムの採用、ASTからIR（Doc）への変換、IRから最終的な文字列への変換という処理フローを解説している。

**業務上の目的・背景**：Prettierのプラグイン開発者やコントリビューターにとって、内部アーキテクチャの理解は不可欠である。この画面は、Prettierがどのようにコードをフォーマットしているのかという技術的な仕組みを説明し、カスタムプラグインの開発やPrettier自体への貢献を支援する。また、Playgroundのdoc-explorerモードを通じて、実際のIRの動作を確認する方法も提供している。

**画面へのアクセス方法**：ホームページのナビゲーションバーから「Docs」をクリックし、サイドバーの「Misc」セクション内の「Technical Details」リンクをクリックしてアクセスする。URLは `/docs/technical-details` である。

**主要な操作・処理内容**：
1. Prettierのアーキテクチャ概要の理解（recastからのフォーク、Wadlerアルゴリズム）
2. IRベースのフォーマッティングの仕組みの理解
3. Playgroundのdoc-explorerモードの使用方法の確認
4. commands.mdへの外部リンク参照

**画面遷移**：
- 遷移元：ホームページ、他のドキュメントページ
- 遷移先：Playground（/playground/）、recastリポジトリ（外部）、Wadler論文（外部）、commands.md（外部）

**権限による表示制御**：なし（公開ドキュメントページ）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 34 | 行制御（line、softline、hardline） | 主機能 | Docビルダーの技術的詳細を説明 |
| 35 | インデント制御（indent、dedent、align） | 補助機能 | インデント制御の技術的詳細を説明 |
| 36 | グループ化（group、conditionalGroup） | 補助機能 | グループ化の技術的詳細を説明 |
| 37 | 結合（join、fill） | 補助機能 | 結合機能の技術的詳細を説明 |
| 38 | 条件分岐（ifBreak） | 補助機能 | 条件分岐の技術的詳細を説明 |
| 39 | Docユーティリティ | 補助機能 | Docユーティリティの技術的詳細を説明 |
| 62 | 文字幅計算（getStringWidth） | 補助機能 | 文字幅計算の技術的詳細を説明 |
| 63 | インデントサイズ計算 | 補助機能 | インデントサイズ計算の技術的詳細を説明 |
| 64 | 空行検出 | 補助機能 | 空行検出の技術的詳細を説明 |
| 65 | コメント操作 | 補助機能 | コメント操作の技術的詳細を説明 |
| 66 | スキップ関数 | 補助機能 | スキップ関数の技術的詳細を説明 |

## 画面種別

ドキュメント表示（静的コンテンツ） - 技術解説

## URL/ルーティング

- URL: `/docs/technical-details`
- ルーティング: Docusaurus docs機能による自動生成

## 入出力項目

本画面は静的なドキュメント表示ページのため、ユーザー入力項目はない。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| - | - | - | 該当なし |

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "Technical Details" | H1見出し |
| recastからのフォーク説明 | プリンターがrecastからフォークされた背景 | 外部リンク付き |
| Wadlerアルゴリズム説明 | "A prettier printer"論文への言及 | 外部リンク付き |
| IRベースの処理説明 | ASTからIR、IRから文字列への変換フロー | |
| IRの例 | `["(", line, arg, line, ")"]`の例示 | |
| Playgroundのdoc-explorerモード | IRを探索できる特別モードの説明 | /playground/へのリンク |
| commands.mdへのリンク | より詳細な技術情報への参照 | GitHubリンク |

## イベント仕様

### 1-ページ読み込み

Docusaurusによる静的サイトジェネレーションにより、ビルド時にMarkdownファイルからHTMLページが生成される。ユーザーがページにアクセスすると、生成済みのHTMLコンテンツが表示される。

### 2-Playgroundリンククリック

Playgroundへのリンクをクリックすると、Prettier Playgroundに遷移する。そこでサイドバーからparserオプションを"doc-explorer"に設定することで、IRを確認できる。

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

recastリポジトリ、Wadler論文、commands.mdへのリンクをクリックすると、新しいタブで外部サイトが開く。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 静的サイトのため該当なし |

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|---------|---------------|
| - | - | - | 静的ドキュメントページのため該当なし |

## 例外処理

| 例外 | 処理内容 |
|------|---------|
| 404 Not Found | ドキュメントが存在しない場合、Docusaurusの404ページを表示 |
| 外部リンク切れ | 外部リンクのリンク先が存在しない場合、外部サイトの404ページを表示 |

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: technical-details`と`title: Technical Details`を定義
- Prettierの内部実装に関する技術的な解説ページ
- プラグイン開発者やコントリビューター向けの高度な内容
- commands.mdはGitHubリポジトリ内の別ファイルで、より詳細なコマンド仕様を記載

---

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

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

### 推奨読解順序

#### Step 1: ドキュメントコンテンツを理解する

まず、実際のMarkdownドキュメントの内容と構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | technical-details.md | `docs/technical-details.md` | Prettierアーキテクチャの概要説明、外部リンク構成 |

**読解のコツ**: このページは短いが、Prettierの核心的な技術思想を説明している。recast、Wadlerアルゴリズム、IRの3つのキーワードに注目して読み解く。

#### Step 2: サイドバー構成を理解する

ドキュメントのナビゲーション構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | sidebars.json | `website/sidebars.json` | "Misc"カテゴリ内での位置づけ |

**主要処理フロー**:
1. **行27**: "Misc"カテゴリに["technical-details", "related-projects", "for-enterprise"]が含まれている

#### Step 3: 関連する内部実装を理解する

技術詳細で言及されている内部コードを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | commands.md | `commands.md` | Doc（IR）コマンドの詳細仕様 |

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

```
Docusaurus Build Process
    |
    +-- docs/technical-details.md (Source)
    |      |
    |      +-- Internal Links
    |      |      +-- Playground (doc-explorer mode)
    |      |
    |      +-- External Links
    |             +-- GitHub: recast repository
    |             +-- Wadler "A prettier printer" paper
    |             +-- GitHub: commands.md
    |
    +-- website/sidebars.json (Navigation)
           |
           +-- "Misc" Category
                  +-- technical-details (this page)
                  +-- related-projects
                  +-- for-enterprise
```

### データフロー図

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

Markdown File          ------> Docusaurus MDX Compiler -----> HTML Page
(docs/technical-       (Link Resolution)                      (/docs/technical-
details.md)                                                    details)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown)
       +-- Code Examples (IR syntax)
       +-- Internal/External Links
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| technical-details.md | `docs/technical-details.md` | ソース | ドキュメントコンテンツ（Markdown） |
| commands.md | `commands.md` | ドキュメント | Docコマンドの詳細仕様（リンク先） |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurusサイト全体の設定 |
