# 画面設計書 24-Editors - Vim

## 概要

本ドキュメントは、Prettier公式サイトの「Vim Setup」ドキュメントページの画面設計書である。このページは、VimおよびNeovimエディタでPrettierを使用するための複数のプラグインと設定方法を詳細に解説するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、Vim/NeovimでPrettierを統合するための複数のアプローチを提供している。専用プラグイン（vim-prettier）から汎用リンター/フォーマッターエンジン（Neoformat、ALE、coc-prettier）まで、様々な選択肢と各プラグインの詳細な設定方法を説明している。

**業務上の目的・背景**：VimおよびNeovimは、多くのシニア開発者やサーバー管理者に愛用されているエディタである。Prettierとの統合には複数のアプローチがあり、ユーザーの既存環境や好みに応じた選択が重要となる。この画面は、vim-prettier（専用）、Neoformat、ALE、coc-prettier（汎用）といった複数の選択肢を提示し、それぞれの設定方法を詳細に説明することで、Vimユーザーが最適な方法でPrettierを導入できるようにする。

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

**主要な操作・処理内容**：
1. vim-prettierプラグインのインストール・使用方法の確認
2. Neoformatプラグインの設定（node_modules対応、保存時フォーマット、autocmd設定）
3. ALEプラグインの設定（fixers設定、明示的リンター設定、保存時フォーマット）
4. coc-prettierプラグインの設定（CocInstall、formatOnSave設定）
5. 手動実行のカスタムキーバインド設定
6. 各プラグインのGitHubリポジトリの参照

**画面遷移**：
- 遷移元：Editor Integration（/docs/editors）、ホームページ
- 遷移先：Configuration（/docs/configuration）、各プラグインのGitHubリポジトリ（外部リンク）

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

## 関連機能

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

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "Vim Setup" | H1見出し |
| プラグイン概要 | vim-prettier、Neoformat、ALE、coc-prettierの紹介 | 導入テキスト |
| vim-prettierセクション | 専用プラグインの案内 | H2見出し |
| Neoformatセクション | Neoformatプラグインの詳細設定 | H2見出し |
| vim-plugインストール例 | `Plug 'sbdchd/neoformat'` | コードブロック |
| neoformat_try_node_exe設定 | プロジェクトローカルPrettier使用設定 | コードブロック |
| Neoformat実行コマンド | `:Neoformat`または`:Neoformat prettier` | |
| 保存時フォーマット設定 | `autocmd BufWritePre *.js Neoformat` | コードブロック |
| autocmdイベント説明 | TextChanged、InsertLeave等 | |
| formatprg設定例 | オプション指定方法 | コードブロック |
| ALEセクション | ALEプラグインの詳細設定 | H2見出し |
| ale_fixers設定 | JavaScript/CSSのPrettier fixer設定 | コードブロック |
| ale_linters_explicit設定 | 明示的リンター設定 | コードブロック |
| ALEFix実行 | `:ALEFix`コマンド | |
| ale_fix_on_save設定 | 保存時フォーマット設定 | コードブロック |
| ale_javascript_prettier_options設定 | オプション指定方法 | コードブロック |
| coc-prettierセクション | coc-prettierプラグインの設定 | H2見出し |
| coc.nvimインストール | vim-plugでのインストール | コードブロック |
| CocInstallコマンド | `CocInstall coc-prettier` | |
| Prettierコマンド定義 | `command! -nargs=0 Prettier ...` | コードブロック |
| coc-settings.json設定 | formatOnSaveFiletypes設定 | JSONコードブロック |
| Running manuallyセクション | カスタムキーバインド設定 | H2見出し |
| カスタムキーバインド例 | `gp`でPrettier実行 | コードブロック |

## イベント仕様

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

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

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

本文内のconfiguration.mdへのリンクをクリックすると、設定ファイルのドキュメントページに遷移する。

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: vim`と`title: Vim Setup`を定義
- 複数のプラグインオプションを詳細に説明しており、ページ内容が充実している
- Vimスクリプトコードブロックにはシンタックスハイライトが適用される
- configuration.mdへの内部リンクが複数箇所にある

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | vim.md | `docs/vim.md` | 各プラグインセクションの構成、設定例のVimスクリプト |

**読解のコツ**: ページは5つの主要セクション（vim-prettier、Neoformat、ALE、coc-prettier、Running manually）で構成されている。各セクションでは、インストール方法、基本設定、保存時フォーマット設定、オプション指定方法の順で説明されている。

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

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

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

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

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

Vim設定ガイドから参照される関連ドキュメントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | configuration.md | `docs/configuration.md` | 設定ファイルの書き方（プラグイン設定で参照） |

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

```
Docusaurus Build Process
    |
    +-- docs/vim.md (Source)
    |      |
    |      +-- Internal Links
    |      |      +-- configuration.md (設定ファイル推奨)
    |      |
    |      +-- External Links
    |             +-- vim-prettier (GitHub)
    |             +-- Neoformat (GitHub)
    |             +-- ALE (GitHub)
    |             +-- coc.nvim (GitHub)
    |             +-- coc-prettier (GitHub)
    |             +-- vim-plug (GitHub)
    |
    +-- website/sidebars.json (Navigation)
           |
           +-- "Editors" Category
                  +-- editors
                  +-- webstorm
                  +-- vim (this page)
                  +-- watching-files
```

### データフロー図

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

Markdown File     ------> Docusaurus MDX Compiler -----> HTML Page
(docs/vim.md)             (Syntax Highlighting)          (/docs/vim)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown)
       +-- Vim Script Code Blocks
       +-- JSON Code Blocks
       +-- Internal/External Links
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| vim.md | `docs/vim.md` | ソース | ドキュメントコンテンツ（Markdown） |
| configuration.md | `docs/configuration.md` | ソース | 設定ファイルガイド（リンク先） |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション構成 |
| editors.md | `docs/editors.md` | ソース | 親ページ（Editor Integration） |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurusサイト全体の設定（vimシンタックスハイライト設定を含む） |
