# 画面設計書 27-Misc - Related Projects

## 概要

本ドキュメントは、Prettier公式サイトの「Related Projects」ドキュメントページの画面設計書である。このページは、Prettierと連携して使用できる関連プロジェクト、統合ツール、フォーク版、その他のユーティリティを一覧形式で紹介するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、ESLint統合、stylelint統合、フォーク版、その他のユーティリティツールを体系的に分類して紹介している。各プロジェクトはGitHubリポジトリへのリンクとともに簡潔な説明が付されている。

**業務上の目的・背景**：Prettierはエコシステムの一部として機能し、ESLint、stylelintなどの他のツールと連携することで、より包括的なコード品質管理を実現できる。この画面は、Prettierユーザーが関連ツールを発見し、自身のワークフローに組み込むことを支援する。また、parallel-prettier、prettier_d、pretty-quickなどのパフォーマンス向上ツールや、他言語への移植版（csharpier、Prettier for Swift）も紹介している。

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

**主要な操作・処理内容**：
1. ESLint統合ツール（eslint-config-prettier、eslint-plugin-prettier、prettier-eslint、prettier-standard）の確認
2. stylelint統合ツール（stylelint-config-prettier、stylelint-prettier、prettier-stylelint）の確認
3. フォーク版（prettierx）の確認
4. その他のユーティリティ（parallel-prettier、prettier_d、pretty-quick、rollup-plugin-prettier、jest-runner-prettier、prettier-chrome、spotless、csharpier、Prettier for Swift、reviewdog-action-prettier、monaco-prettier）の確認

**画面遷移**：
- 遷移元：ホームページ、他のドキュメントページ
- 遷移先：各プロジェクトのGitHubリポジトリ（外部リンク）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当なし（関連プロジェクト一覧ページのため） |

## 画面種別

ドキュメント表示（静的コンテンツ） - 一覧・カタログ

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "Related Projects" | H1見出し |
| ESLint Integrations | ESLint連携ツールセクション | H2見出し |
| eslint-config-prettier | ESLintの不要/競合ルールを無効化 | GitHubリンク付き |
| eslint-plugin-prettier | PrettierをESLintルールとして実行 | GitHubリンク付き |
| prettier-eslint | Prettier出力をeslint --fixに渡す | GitHubリンク付き |
| prettier-standard | prettierxとprettier-eslintでstandardルール適用 | GitHubリンク付き |
| stylelint Integrations | stylelint連携ツールセクション | H2見出し |
| stylelint-config-prettier | stylelintの不要/競合ルールを無効化 | GitHubリンク付き |
| stylelint-prettier | Prettierをstylelintルールとして実行 | GitHubリンク付き |
| prettier-stylelint | Prettier出力をstylelint --fixに渡す | GitHubリンク付き |
| Forks | フォーク版セクション | H2見出し |
| prettierx | より少ない意見を持つPrettierフォーク | GitHubリンク付き |
| Misc | その他のツールセクション | H2見出し |
| parallel-prettier | 大規模プロジェクト向け並列フォーマットCLI | GitHubリンク付き |
| prettier_d | Node.js起動遅延を回避するサーバー版 | GitHubリンク付き |
| pretty-quick | 変更されたファイルのみフォーマット | GitHubリンク付き |
| rollup-plugin-prettier | RollupでPrettierを使用 | GitHubリンク付き |
| jest-runner-prettier | JestランナーとしてPrettier実行 | GitHubリンク付き |
| prettier-chrome | ブラウザ拡張版Prettier | GitHubリンク付き |
| spotless | gradle/mavenからPrettier実行 | GitHubリンク付き |
| csharpier | C#向けPrettier移植版 | GitHubリンク付き |
| Prettier for Swift | Swift版Prettier | GitHubリンク付き |
| reviewdog-action-prettier | GitHub ActionsでPrettier実行 | GitHubリンク付き |
| monaco-prettier | Monaco EditorへのPrettier統合 | GitHubリンク付き |

## イベント仕様

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

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

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

各プロジェクトのGitHubリポジトリリンクをクリックすると、新しいタブで外部サイトが開く。

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: related-projects`と`title: Related Projects`を定義
- 全てのプロジェクトリンクは外部GitHubリポジトリへのリンク
- 4つのカテゴリ（ESLint Integrations、stylelint Integrations、Forks、Misc）に分類されている
- 各プロジェクトは簡潔な1行説明とともに紹介されている

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | related-projects.md | `docs/related-projects.md` | 各カテゴリの構成、プロジェクト一覧、外部リンク |

**読解のコツ**: ページは4つのH2セクション（ESLint Integrations、stylelint Integrations、Forks、Misc）で構成されている。各プロジェクトはリスト形式で、リンクと簡潔な説明がセットになっている。

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

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

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

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

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

```
Docusaurus Build Process
    |
    +-- docs/related-projects.md (Source)
    |      |
    |      +-- External Links (All)
    |             +-- ESLint Integration Repos
    |             |      +-- eslint-config-prettier
    |             |      +-- eslint-plugin-prettier
    |             |      +-- prettier-eslint
    |             |      +-- prettier-standard
    |             |
    |             +-- stylelint Integration Repos
    |             |      +-- stylelint-config-prettier
    |             |      +-- stylelint-prettier
    |             |      +-- prettier-stylelint
    |             |
    |             +-- Fork Repos
    |             |      +-- prettierx
    |             |
    |             +-- Misc Repos
    |                    +-- parallel-prettier
    |                    +-- prettier_d
    |                    +-- pretty-quick
    |                    +-- ... (others)
    |
    +-- website/sidebars.json (Navigation)
           |
           +-- "Misc" Category
                  +-- technical-details
                  +-- related-projects (this page)
                  +-- for-enterprise
```

### データフロー図

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

Markdown File          ------> Docusaurus MDX Compiler -----> HTML Page
(docs/related-         (Link Resolution)                      (/docs/related-
projects.md)                                                   projects)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown Lists)
       +-- External Links (GitHub)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| related-projects.md | `docs/related-projects.md` | ソース | ドキュメントコンテンツ（Markdown） |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurusサイト全体の設定 |
