# 画面設計書 11-Usage-Ignore

## 概要

本ドキュメントは、Prettierドキュメントサイトの「Usage - Ignore」画面の設計書です。この画面はPrettierでファイルやコードの一部をフォーマット対象から除外する方法を説明するドキュメントページです。

### 本画面の処理概要

この画面はPrettierのIgnore機能について包括的なガイダンスを提供する静的ドキュメントページです。ユーザーがフォーマットを適用したくないファイルやコードブロックを除外するための各種方法を詳細に解説しています。

**業務上の目的・背景**：開発プロジェクトには、自動生成されたコード、サードパーティライブラリ、特定のフォーマットを維持すべきコード（例：行列表現のコード）など、Prettierによるフォーマットを適用すべきでないファイルやコード領域が存在します。この画面は、そうしたニーズに対応するためのIgnore機能の使い方を開発者に提供します。

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

**主要な操作・処理内容**：
1. `.prettierignore` ファイルの作成方法と書式の理解
2. 各言語での `prettier-ignore` コメントの使用方法の参照
3. コマンドラインでの除外パターン指定方法の確認
4. デフォルトで無視されるディレクトリ（.git, node_modules等）の確認

**画面遷移**：この画面からは関連するCLIドキュメント（`--ignore-path`、`--with-node-modules`オプション）へのリンクが設定されています。また、サイドバーを通じて他のUsageドキュメントページへ遷移可能です。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 22 | Ignoreファイル処理（--ignore-path） | 主機能 | .prettierignoreの設定方法と無視ルールを説明 |

## 画面種別

ドキュメント / 参照

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| セクション | 表示内容 | 説明 |
|-----------|---------|------|
| Ignoring Files: .prettierignore | .prettierignoreファイルの使い方 | gitignore構文でのパターン指定方法 |
| デフォルト無視ディレクトリ | .git, .svn, .hg, node_modules | CLIがデフォルトで無視するディレクトリ一覧 |
| JavaScript | `// prettier-ignore` コメント | JS/TS用のIgnoreコメント構文 |
| JSX | `{/* prettier-ignore */}` コメント | JSX用のIgnoreコメント構文 |
| HTML | `<!-- prettier-ignore -->` 系コメント | HTML用のIgnore構文（属性指定含む） |
| CSS | `/* prettier-ignore */` コメント | CSS/SCSS/Less用のIgnoreコメント構文 |
| Markdown | Range Ignore | prettier-ignore-start/end構文 |
| YAML | `# prettier-ignore` | YAML用のIgnoreコメント構文 |
| GraphQL | `# prettier-ignore` | GraphQL用のIgnoreコメント構文 |
| Handlebars | `{{! prettier-ignore }}` | Handlebars用のIgnoreコメント構文 |
| Command Line File Patterns | 負のパターン指定 | CLI使用時の一時的な除外方法 |

## イベント仕様

### 1-リンククリック

ドキュメント内のリンクをクリックすると、対応するドキュメントページに遷移します。

- `cli.md#--ignore-path` → CLIオプションドキュメント
- `cli.md#--with-node-modules` → CLIオプションドキュメント

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

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

## メッセージ仕様

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

## 例外処理

| 状態 | 説明 |
|------|------|
| ページ未発見（404） | URLが誤っている場合、Docusaurus標準の404ページを表示 |
| ビルドエラー | Markdownの構文エラー等がある場合、Docusaurusビルド時にエラー出力 |

## 備考

- 本ドキュメントはDocusaurusフレームワークを使用して生成される静的ページです
- Markdown内の `<!-- prettier-ignore -->` コメントは実際にPrettierによるフォーマットを無効化する例として機能しています
- fast-glob の高度なglob構文へのリンクが含まれています

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ignore.md | `docs/ignore.md` | Ignore機能の全体像、各言語でのIgnoreコメント構文を理解 |

**読解のコツ**: Docusaurusのfront matter（`id`, `title`）がドキュメントのメタデータとして使用されます。

#### Step 2: CLI実装でのIgnore処理を理解する

CLIがファイルを処理する際のIgnoreロジックを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | directory-ignorer.js | `src/cli/directory-ignorer.js` | デフォルトで無視されるディレクトリの定義 |
| 2-2 | expand-patterns.js | `src/cli/expand-patterns.js` | ファイルパターン展開時のIgnore処理 |

**主要処理フロー**:
1. **4-5行目**: alwaysIgnoredDirectoriesとwithNodeModulesの定義
2. **12-19行目**: DirectoryIgnorerクラスのコンストラクタでignorePatternsを生成
3. **25-32行目**: shouldIgnoreメソッドでパスを判定

#### Step 3: パーサー側のIgnore Pragma処理を理解する

各パーサーでのprettier-ignoreコメント検出を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | core.js | `src/main/core.js` | hasIgnorePragma関数の呼び出し |
| 3-2 | print-ignored.js | `src/main/print-ignored.js` | prettier-ignore処理の実装 |

**主要処理フロー**:
- **319-322行目**: hasIgnorePragma関数で各パーサーのhasIgnorePragmaメソッドを呼び出し

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

```
prettier CLI
    │
    ├─ DirectoryIgnorer
    │      └─ shouldIgnore() - ディレクトリ単位の除外判定
    │
    ├─ expand-patterns
    │      └─ ignorePatterns適用
    │
    └─ core.js/formatWithCursor
           └─ hasIgnorePragma() - パーサー側のIgnore判定
                  └─ parser.hasIgnorePragma() - 各言語のIgnoreコメント検出
```

### データフロー図

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

.prettierignore ────────────▶ IgnorerLoader ────────────▶ 除外ファイル判定
                                    │
                                    ▼
コマンドライン ────────────▶ DirectoryIgnorer ───────▶ ディレクトリ除外判定
(--ignore-path, etc.)               │
                                    ▼
ソースコード ────────────▶ Parser.hasPrettierIgnore() ▶ コード部分除外判定
(prettier-ignore コメント)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ignore.md | `docs/ignore.md` | ドキュメント | Ignore機能の説明ドキュメント |
| directory-ignorer.js | `src/cli/directory-ignorer.js` | ソース | デフォルト除外ディレクトリの定義 |
| expand-patterns.js | `src/cli/expand-patterns.js` | ソース | ファイルパターン展開とIgnore処理 |
| core.js | `src/main/core.js` | ソース | Ignore Pragmaチェック呼び出し |
| print-ignored.js | `src/main/print-ignored.js` | ソース | prettier-ignore処理実装 |
| cli.md | `docs/cli.md` | ドキュメント | CLIオプションドキュメント（関連参照） |
