# 画面設計書 23-Editors - WebStorm

## 概要

本ドキュメントは、Prettier公式サイトの「WebStorm Setup」ドキュメントページの画面設計書である。このページは、JetBrains社のIDEファミリー（WebStorm、IntelliJ IDEA、PhpStorm、PyCharm等）でPrettierを使用するための詳細な設定方法を解説するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、WebStormおよび他のJetBrains IDEでPrettierを統合するための設定手順を詳細に説明している。組み込みサポート、プラグインのインストール、キーボードショートカット、保存時の自動フォーマット設定など、実用的な設定方法を提供する。

**業務上の目的・背景**：JetBrains IDEは多くのプロフェッショナル開発者に使用されており、Prettierとの統合は開発効率向上に不可欠である。WebStormには組み込みのPrettierサポートがあるが、他のJetBrains IDE（IntelliJ IDEA、PhpStorm、PyCharm等）では追加プラグインが必要となる。この画面は、IDEごとの違いを明確にし、適切な設定方法を案内することで、開発者がスムーズにPrettier環境を構築できるようにする。

**画面へのアクセス方法**：ホームページのナビゲーションバーから「Docs」をクリックし、サイドバーの「Editors」セクション内の「WebStorm」リンクをクリックしてアクセスする。また、Editor Integrationページからも直接リンクされている。URLは `/docs/webstorm` である。

**主要な操作・処理内容**：
1. JetBrains IDEのPrettierサポート状況の確認
2. 非WebStorm IDEでのPrettierプラグインインストール方法の確認
3. Prettierのインストール・設定方法の外部リンク参照
4. キーボードショートカット（Reformat with Prettier）の確認
5. 保存時自動フォーマット、Reformat Code連携の設定方法の学習
6. 対象ファイルタイプのカスタマイズ方法（globパターン）の確認

**画面遷移**：
- 遷移元：Editor Integration（/docs/editors）、ホームページ
- 遷移先：JetBrains Prettier プラグインページ（外部）、JetBrains WebStorm Prettierヘルプ（外部）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当なし（設定ガイドページのため直接的なAPI連携はなし） |

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "WebStorm Setup" | H1見出し |
| JetBrains IDEs見出し | WebStorm以外のIDEも含む説明 | H2見出し |
| WebStorm組み込みサポート | WebStormのビルトインPrettierサポートについて | |
| プラグインリンク | JetBrains Prettierプラグインへのリンク | 外部リンク |
| インストール・設定リンク | JetBrains公式ヘルプへのリンク | 外部リンク |
| Reformat with Prettierアクション | キーボードショートカットの説明 | macOS: Opt+Shift+Cmd+P、Windows/Linux: Alt+Shift+Ctrl+P |
| 保存時フォーマット設定 | On save設定の説明 | |
| Reformat Code連携 | On 'Reformat Code' action設定の説明 | |
| 設定画面スクリーンショット | Prettier設定画面の画像 | /images/webstorm/prettier-settings.png |
| ファイルタイプカスタマイズ | globパターンによる対象ファイル指定 | |
| WebStormオンラインヘルプリンク | 詳細情報への外部リンク | 外部リンク |

## イベント仕様

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

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

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

JetBrains関連の外部リンク（プラグインページ、ヘルプページ）をクリックすると、新しいタブで外部サイトが開く。

### 3-画像表示

設定画面のスクリーンショット画像（`/images/webstorm/prettier-settings.png`）が表示される。

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

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

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

## メッセージ仕様

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

## 例外処理

| 例外 | 処理内容 |
|------|---------|
| 404 Not Found | ドキュメントが存在しない場合、Docusaurusの404ページを表示 |
| 画像読み込みエラー | スクリーンショット画像が存在しない場合、altテキストを表示 |
| 外部リンク切れ | 外部リンクのリンク先が存在しない場合、外部サイトの404ページを表示 |

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: webstorm`と`title: WebStorm Setup`を定義
- 設定画面のスクリーンショット画像を含む（`/images/webstorm/prettier-settings.png`）
- JetBrains公式のヘルプページとプラグインページへの外部リンクを含む

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | webstorm.md | `docs/webstorm.md` | WebStorm/JetBrains IDE設定の説明内容、外部リンク構成 |

**読解のコツ**: ページ全体が単一のH2セクション「JetBrains IDEs」で構成されている。WebStormだけでなく、IntelliJ IDEA、PhpStorm、PyCharm等の他のJetBrains IDEについても説明している点に注目。

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

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

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

**主要処理フロー**:
1. **行26**: "Editors"カテゴリに"webstorm"が含まれている

#### Step 3: 関連画像リソースを理解する

ドキュメントで使用される画像ファイルを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | prettier-settings.png | `website/static/images/webstorm/prettier-settings.png` | 設定画面のスクリーンショット |

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

```
Docusaurus Build Process
    |
    +-- docs/webstorm.md (Source)
    |      |
    |      +-- External Links
    |      |      +-- JetBrains Plugin Page
    |      |      +-- JetBrains Help Page
    |      |
    |      +-- Static Assets
    |             +-- /images/webstorm/prettier-settings.png
    |
    +-- website/sidebars.json (Navigation)
           |
           +-- "Editors" Category
                  +-- editors
                  +-- webstorm (this page)
                  +-- vim
                  +-- watching-files
```

### データフロー図

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

Markdown File     ------> Docusaurus MDX Compiler -----> HTML Page
(docs/webstorm.md)        (Image Resolution)             (/docs/webstorm)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown)
       +-- Image References
       +-- External Links
```

### 関連ファイル一覧

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