# 画面設計書 20-Configuration-Configuration File

## 概要

本ドキュメントは、Prettierドキュメントサイトの「Configuration - Configuration File」画面の設計書です。この画面はPrettierの設定ファイルの作成方法と書式を詳細に説明するドキュメントページです。

### 本画面の処理概要

この画面はPrettierの設定ファイル（.prettierrc、prettier.config.js等）の作成方法、サポートされる形式、オーバーライド機能、EditorConfig統合を説明する静的ドキュメントページです。プロジェクト固有のフォーマット設定を管理するための全手段を解説しています。

**業務上の目的・背景**：チーム開発では、プロジェクト全体で一貫したフォーマット設定を共有する必要があります。設定ファイルを使用することで、CLIオプションを毎回指定する必要がなくなり、エディタ統合やCI/CDパイプラインでも同じ設定が適用されます。この画面は、設定ファイルの全書式と高度な機能（オーバーライド、EditorConfig統合等）を開発者に提供します。

**画面へのアクセス方法**：ユーザーはメインサイトのナビゲーションバーから「Docs」セクションに入り、サイドバーの「Configuring Prettier」カテゴリ内の「Configuration File」リンクをクリックしてアクセスします。URLは `/docs/configuration` です。

**主要な操作・処理内容**：
1. サポートされる設定ファイル形式（JSON、YAML、JS、TS、TOML等）の理解
2. 基本的な設定ファイルの書き方の理解
3. overrides機能によるファイル別設定の理解
4. parserオプションの正しい使い方（overrides内のみ）の理解
5. EditorConfig統合の理解

**画面遷移**：この画面からはオプションドキュメント、Node.jsドキュメントへのリンクが設定されています。

**権限による表示制御**：なし。全ユーザーが同一のコンテンツを閲覧可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 13 | 設定ファイル解決（resolveConfig） | 主機能 | 設定ファイルの読み込み・解決方法を説明 |
| 14 | 設定ファイルパス検索（resolveConfigFile） | 補助機能 | 設定ファイルのパス検索方法を説明 |
| 15 | EditorConfig統合 | 補助機能 | .editorconfigとの統合方法を説明 |

## 画面種別

ドキュメント / 参照

## URL/ルーティング

- **URL**: `/docs/configuration`
- **ソースファイル**: `docs/configuration.md`
- **生成方式**: Docusaurus docs機能によるMarkdownからの静的HTML生成

## 入出力項目

本画面は静的ドキュメントページのため、ユーザー入力フィールドはありません。

## 表示項目

| セクション | 表示内容 | 説明 |
|-----------|---------|------|
| 設定ファイル優先順位 | package.json > .prettierrc > ... | 設定ファイルの検索優先順位 |
| TypeScript Configuration Files | TypeScript設定ファイル | Node.js>=22.6.0要件 |
| Basic Configuration | 基本設定例 | JSON, JS(ESM), JS(CJS), TS(ESM), TS(CJS), YAML, TOML |
| Configuration Overrides | オーバーライド設定 | ファイル別/ディレクトリ別の設定 |
| Setting the parser option | parserオプション設定 | overrides内でのparser指定 |
| Configuration Schema | スキーマ | JSON Schemaの提供 |
| EditorConfig | EditorConfig統合 | .editorconfigからの設定読み込み |

## イベント仕様

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

- Node.js type documentation → Node.jsドキュメント
- JSON Schema → schemastore.org

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

- `options.md` → オプションドキュメント
- `options.md#parser` → パーサーオプション説明

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

本画面は静的ドキュメントページのため、データベース更新は発生しません。

## メッセージ仕様

本画面は静的ドキュメントページのため、動的メッセージはありません。

## 例外処理

| 状態 | 説明 |
|------|------|
| ページ未発見（404） | URLが誤っている場合、Docusaurus標準の404ページを表示 |

## 備考

- グローバル設定ファイルは意図的にサポートされていない（プロジェクト間の一貫性確保のため）
- TypeScript設定ファイルはNode.js>=22.6.0が必要、v24.3.0未満では`--experimental-strip-types`が必要
- parserオプションはトップレベルに置くべきではない（overrides内のみ推奨）
- EditorConfig検索はプロジェクトルートで停止（EditorConfig仕様とは異なる）
- JSON Schema: https://www.schemastore.org/prettierrc.json

---

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

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

### 推奨読解順序

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

本画面のコンテンツはMarkdownファイルで管理されています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | configuration.md | `docs/configuration.md` | 設定ファイル仕様全体像を理解 |

**読解のコツ**: 各設定ファイル形式のコード例が豊富に記載されています。

#### Step 2: 設定ファイル解決処理を理解する

設定ファイルの検索と読み込み処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | resolve-config.js | `src/config/resolve-config.js` | resolveConfig, resolveConfigFile関数 |
| 2-2 | config-searcher.js | `src/config/prettier-config/config-searcher.js` | 設定ファイル検索処理 |

**主要処理フロー**:
1. **70-97行目**: resolveConfig関数でPrettier設定とEditorConfig統合
2. **102-108行目**: resolveConfigFile関数で設定ファイルパス検索

#### Step 3: 設定ファイルローダーを理解する

各形式の設定ファイルを読み込む処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | loaders.js | `src/config/prettier-config/loaders.js` | 各形式のローダー定義 |
| 3-2 | load-config.js | `src/config/prettier-config/load-config.js` | 設定ファイル読み込み |

**主要処理フロー**:
- JSON、YAML、JS、TS、TOML各形式のパース処理

#### Step 4: EditorConfig統合を理解する

EditorConfig読み込みと変換を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | index.js | `src/config/editorconfig/index.js` | EditorConfig読み込み |
| 4-2 | editorconfig-to-prettier.js | `src/config/editorconfig/editorconfig-to-prettier.js` | Prettierオプションへの変換 |

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

```
resolveConfig(filePath, options)
    │
    ├─ loadPrettierConfig()
    │      │
    │      ├─ searchPrettierConfig()
    │      │      └─ config-searcher.js
    │      │
    │      └─ loadPrettierConfigFile()
    │             └─ loaders.js (JSON/YAML/JS/TS/TOML)
    │
    ├─ loadEditorconfig()
    │      └─ editorconfig/index.js
    │             └─ editorconfig-to-prettier.js
    │
    └─ mergeOverrides()
           └─ オーバーライド適用
```

### データフロー図

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

.prettierrc.json
.prettierrc.yaml
.prettierrc.js ─────────▶ config-searcher ─────────▶ 設定ファイルパス
prettier.config.js                 │
etc.                               ▼
                           load-config
                                   │
                                   ▼
                           設定オブジェクト
                                   │
.editorconfig ──────────▶ editorconfig loader     │
                                   │              │
                                   ▼              │
                           editorconfig設定 ◀────┘
                                   │
                                   ▼
                           mergeOverrides()
                                   │
                                   ▼
                           最終オプションオブジェクト
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| configuration.md | `docs/configuration.md` | ドキュメント | 設定ファイルガイド |
| resolve-config.js | `src/config/resolve-config.js` | ソース | 設定解決メイン処理 |
| config-searcher.js | `src/config/prettier-config/config-searcher.js` | ソース | 設定ファイル検索 |
| loaders.js | `src/config/prettier-config/loaders.js` | ソース | 各形式ローダー |
| load-config.js | `src/config/prettier-config/load-config.js` | ソース | 設定読み込み |
| index.js | `src/config/editorconfig/index.js` | ソース | EditorConfig読み込み |
| editorconfig-to-prettier.js | `src/config/editorconfig/editorconfig-to-prettier.js` | ソース | EditorConfig変換 |
| options.md | `docs/options.md` | ドキュメント | オプションドキュメント（関連参照） |
