# 画面設計書 25-Editors - Watching Files

## 概要

本ドキュメントは、Prettier公式サイトの「Watching For Changes」ドキュメントページの画面設計書である。このページは、エディタがPrettierをサポートしていない場合の代替手段として、ファイル監視ツールを使用してファイル変更時に自動的にPrettierを実行する方法を解説するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、onchangeパッケージを使用したファイル監視設定方法を提供している。エディタにPrettier統合機能がない場合でも、ファイルが変更されるたびに自動的にPrettierでフォーマットを適用できる。

**業務上の目的・背景**：すべてのエディタがPrettierプラグインを持っているわけではない。また、軽量なエディタやシンプルなテキストエディタを好む開発者もいる。この画面は、エディタに依存せずにPrettierの自動フォーマット機能を活用する方法を提供することで、より多くの開発者がPrettierを利用できるようにする。onchangeパッケージはファイルシステムの変更を監視し、指定したコマンドを自動実行する軽量なツールである。

**画面へのアクセス方法**：ホームページのナビゲーションバーから「Docs」をクリックし、サイドバーの「Editors」セクション内の「Watching Files」リンクをクリックしてアクセスする。また、Editor Integrationページからも、エディタがPrettierをサポートしていない場合の代替手段としてリンクされている。URLは `/docs/watching-files` である。

**主要な操作・処理内容**：
1. onchangeパッケージを使用したコマンドライン実行方法の確認
2. package.jsonへのスクリプト追加方法の確認
3. `--ignore-unknown`オプションの使用方法の理解
4. `{{changed}}`プレースホルダーの使用方法の理解

**画面遷移**：
- 遷移元：Editor Integration（/docs/editors）、ホームページ
- 遷移先：onchangeパッケージのnpmページ（外部リンク）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当なし（外部ツール連携の説明ページのため） |

## 画面種別

ドキュメント表示（静的コンテンツ） - 設定ガイド

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "Watching For Changes" | H1見出し |
| 導入テキスト | onchangeを使用したファイル監視の説明 | onchangeへのリンク付き |
| コマンドライン例 | `npx onchange "**/*" -- npx prettier --write --ignore-unknown {{changed}}` | bashコードブロック |
| package.json例 | scriptsにprettier-watchを追加する例 | JSONコードブロック |

## イベント仕様

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

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

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

onchangeパッケージのnpmページへのリンクをクリックすると、新しいタブで外部サイトが開く。

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: watching-files`と`title: Watching For Changes`を定義
- ページ内容は非常にシンプルで、主にonchangeパッケージの使用方法を説明
- `--ignore-unknown`オプションはPrettierが認識しないファイルタイプをスキップするために使用
- `{{changed}}`はonchangeが変更されたファイルパスに置換するプレースホルダー

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | watching-files.md | `docs/watching-files.md` | onchangeコマンドの使用例、package.jsonスクリプト設定 |

**読解のコツ**: このページは非常にシンプルで、コマンドライン例とpackage.jsonへの設定追加の2つの方法を説明している。onchangeの`{{changed}}`プレースホルダーがPrettierの対象ファイルとして使用される点に注目。

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

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

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

**主要処理フロー**:
1. **行26**: "Editors"カテゴリの最後に"watching-files"が含まれている

#### Step 3: 関連ドキュメントとの関係を理解する

Editor Integrationページからの参照を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | editors.md | `docs/editors.md` | watching-files.mdへの参照（エディタ非対応時の代替手段） |

**主要処理フロー**:
- **行8**: editors.mdからwatching-files.mdへのリンク

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

```
Docusaurus Build Process
    |
    +-- docs/watching-files.md (Source)
    |      |
    |      +-- External Links
    |             +-- npmjs.com/package/onchange
    |
    +-- website/sidebars.json (Navigation)
           |
           +-- "Editors" Category
                  +-- editors
                  +-- webstorm
                  +-- vim
                  +-- watching-files (this page)
```

### データフロー図

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

Markdown File          ------> Docusaurus MDX Compiler -----> HTML Page
(docs/watching-files.md)       (Code Block Rendering)         (/docs/watching-files)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown)
       +-- Bash Code Block
       +-- JSON Code Block
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| watching-files.md | `docs/watching-files.md` | ソース | ドキュメントコンテンツ（Markdown） |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション構成 |
| editors.md | `docs/editors.md` | ソース | 親ページ（Editor Integration、このページへリンク） |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurusサイト全体の設定 |
