# 画面設計書 10-Usage - Install

## 概要

本ドキュメントはPrettierドキュメントの「Install」ページの画面設計書です。Prettierのインストール方法を説明するドキュメントページとして機能します。

### 本画面の処理概要

本画面はPrettierをプロジェクトにインストールし、基本的な設定を行い、初回フォーマットを実行するまでの手順を説明するドキュメントページです。npm、yarn、pnpm、bunの各パッケージマネージャーに対応したインストール手順を提供します。

**業務上の目的・背景**：Prettierを新規に導入するユーザーに対して、インストールから初期設定、初回実行までの一連の手順をガイドします。また、CI設定、エディタ統合、Gitフック設定への導線も提供し、Prettier導入の完全なオンボーディング体験を提供することを目的としています。

**画面へのアクセス方法**：
- ホームページの「Install Prettier」ボタンをクリック
- サイドバーの「Install」をクリック
- ブラウザで直接 `https://prettier.io/docs/install` にアクセス
- フッターの「Usage」リンクをクリック

**主要な操作・処理内容**：
1. パッケージマネージャー別のインストールコマンドの確認
2. 設定ファイル（.prettierrc）の作成手順の確認
3. 無視ファイル（.prettierignore）の作成手順の確認
4. フォーマットコマンドの実行方法の確認
5. エディタ統合、ESLint連携、Gitフック設定への遷移

**画面遷移**：
- 遷移元：ホームページ、サイドバー、フッター
- 遷移先：Editors、Integrating with Linters、Pre-commit、各種外部リンク

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | ファイルフォーマット（--write） | 主機能 | npm経由でのインストール後のフォーマット実行方法を説明 |
| 25 | ヘルプ表示（--help） | 補助機能 | インストール後のヘルプコマンドの使い方を説明 |
| 26 | バージョン表示（--version） | 補助機能 | インストール後のバージョン確認方法を説明 |

## 画面種別

ドキュメント / チュートリアル

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| セクション | 項目名 | 表示形式 | データソース |
|------------|--------|----------|--------------|
| ヘッダー | ページタイトル | H1テキスト | Front Matter（title: Install） |
| 導入 | インストールコマンド | タブ付きコードブロック | Markdownコンテンツ |
| 導入 | 設定ファイル作成コマンド | コードブロック | Markdownコンテンツ |
| 導入 | 無視ファイル作成コマンド | コードブロック | Markdownコンテンツ |
| 導入 | フォーマットコマンド | タブ付きコードブロック | Markdownコンテンツ |
| 導入 | チェックコマンド | コードブロック | Markdownコンテンツ |
| Set up your editor | エディタ統合の説明 | テキスト + リンク | Markdownコンテンツ |
| ESLint (and other linters) | ESLint連携の説明 | テキスト + リンク | Markdownコンテンツ |
| Git hooks | Gitフック設定 | タブ付きコードブロック | Markdownコンテンツ |
| Summary | まとめリスト | 箇条書き | Markdownコンテンツ |
| サイドバー | ドキュメントナビゲーション | リンクリスト | sidebars.js |

## イベント仕様

### 1-タブ切り替え

パッケージマネージャー（npm、yarn、pnpm、bun）のタブを切り替えると、該当するコマンドが表示されます。

**処理フロー**：
1. タブクリックイベント発火
2. Docusaurusのタブコンポーネントが選択状態を切り替え
3. 該当するコマンドブロックが表示

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

ignore.md、editors.md、integrating-with-linters.md、precommit.mdなどへのリンクをクリックすると、該当ページへ遷移します。

**処理フロー**：
1. リンククリックイベント発火
2. 該当ドキュメントページへ遷移

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

eslint-config-prettier、husky、lint-stagedなどの外部リンクをクリックすると、外部サイトへ遷移します。

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

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

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

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

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

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|----------------|----------|
| MSG-01 | ヒント | Prettier will follow rules specified in .gitignore... | :::tip Admonitionとして表示 |
| MSG-02 | 情報 | What is that npx thing? | :::info Admonitionとして表示 |
| MSG-03 | 警告 | If you forget to install Prettier first... | :::warning Admonitionとして表示 |
| MSG-04 | 注記 | Don't skip the regular local install! | :::note Admonitionとして表示 |

## 例外処理

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

## 備考

- 本画面はDocusaurus docs機能でMarkdownから生成されます
- Docusaurusのタブコンポーネント（Tabs/TabItem）を使用
- `%PRETTIER_VERSION%`プレースホルダーがビルド時に実際のバージョンに置換される
- :::tip、:::info、:::warning、:::note構文でAdmonitionを表示
- パッケージマネージャー別のコマンドを網羅的に提供
- Gitフック設定にhusky + lint-stagedの組み合わせを推奨

---

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

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

### 推奨読解順序

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

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

**読解のコツ**: DocusaurusのTabs/TabItemコンポーネントの使い方と、Admonition構文を理解することが重要です。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | install.md | `docs/install.md` | セクション構成とタブコンポーネント |

**主要コンテンツ**:
1. **1-4行目**: Front Matter（id, title）
2. **6-8行目**: MDXインポート（Tabs, TabItem）
3. **9行目**: 導入文
4. **11-40行目**: インストールコマンド（タブ付き）
5. **42-59行目**: 設定ファイル作成
6. **61-72行目**: ヒントAdmonition
7. **73-141行目**: フォーマットコマンド（タブ付き）+ 各種Admonition
8. **152-156行目**: Set up your editor
9. **166-170行目**: ESLint (and other linters)
10. **172-241行目**: Git hooks（タブ付き）
11. **243-254行目**: Summary

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

```
install.md (MDXソース)
    │
    ├─ import Tabs from "@theme/Tabs"
    │      └─ Docusaurusタブコンポーネント
    │
    ├─ import TabItem from "@theme/TabItem"
    │      └─ Docusaurusタブアイテムコンポーネント
    │
    ├─ Docusaurus docs plugin
    │      └─ MDXパース
    │
    ├─ :::tip/:::info/:::warning/:::note構文処理
    │      └─ Admonitionコンポーネント生成
    │
    ├─ %PRETTIER_VERSION%置換
    │      └─ ビルド時バージョン挿入
    │
    ├─ Front Matter処理
    │      └─ id, title抽出
    │
    ├─ sidebars.js
    │      └─ サイドバー生成
    │
    └─ Docusaurusテーマ
           └─ ページレンダリング
```

### データフロー図

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

docs/install.md         ───▶ Docusaurusビルド           ───▶ HTMLページ
         │
         ▼
Tabs/TabItem            ───▶ タブコンポーネント生成     ───▶ インタラクティブタブ
         │
         ▼
:::tip等構文            ───▶ Admonition変換             ───▶ 情報ボックス表示
         │
         ▼
%PRETTIER_VERSION%      ───▶ バージョン置換             ───▶ 実際のバージョン番号
         │
         ▼
コードブロック          ───▶ シンタックスハイライト     ───▶ ハイライト済みコード
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| install.md | `docs/install.md` | ドキュメント | メインMDXソース |
| sidebars.js | `website/sidebars.js` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus全体設定 |
| ignore.md | `docs/ignore.md` | ドキュメント | リンク先の無視設定ドキュメント |
| editors.md | `docs/editors.md` | ドキュメント | リンク先のエディタ統合ドキュメント |
| integrating-with-linters.md | `docs/integrating-with-linters.md` | ドキュメント | リンク先のリンター連携ドキュメント |
| precommit.md | `docs/precommit.md` | ドキュメント | リンク先のpre-commitドキュメント |
| comparison.md | `docs/comparison.md` | ドキュメント | リンク先の比較ドキュメント |
| related-projects.md | `docs/related-projects.md` | ドキュメント | リンク先の関連プロジェクトドキュメント |
