# 機能設計書 56-Vue

## 概要

本ドキュメントは、space-vimにおけるVue.jsサポート機能の設計を定義する。vim-vueプラグインを利用したVue単一ファイルコンポーネント（.vue）の構文ハイライトと編集支援を提供する。

### 本機能の処理概要

Vue.js開発での生産性を向上させるため、単一ファイルコンポーネント（SFC）内のtemplate、script、styleセクションそれぞれに対応した構文ハイライトとエディタ設定を提供する。

**業務上の目的・背景**：Vue.jsはモダンなJavaScriptフレームワークとして広く利用されており、単一ファイルコンポーネント（.vue）形式でコンポーネントを定義するのが一般的である。.vueファイルはHTML、JavaScript、CSSが1つのファイルに含まれる特殊な形式であるため、各セクションに適切な構文ハイライトを適用する専用プラグインが必要である。

**機能の利用シーン**：Vue.jsプロジェクトの開発時、`.vue`ファイルを編集する際に自動的に有効化される。templateセクション（HTML）、scriptセクション（JavaScript/TypeScript）、styleセクション（CSS/SCSS/LESS）がそれぞれ適切にハイライトされる。

**主要な処理内容**：
1. Vue単一ファイルコンポーネントの構文ハイライト
2. templateセクション（HTML構文）のハイライト
3. scriptセクション（JavaScript/TypeScript構文）のハイライト
4. styleセクション（CSS/SCSS/LESS構文）のハイライト
5. タブストップ/ソフトタブの自動設定（2スペース）

**関連システム・外部連携**：vim-vueプラグインとの連携。+lang/htmlレイヤーのemmet-vimも.vueファイルで利用可能。Volar（Vue Language Server）やcoc.nvimと組み合わせることでより高度なLSP機能が利用可能。

**権限による制御**：特になし。レイヤー有効化によりすべての機能が利用可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | Vimエディタ画面 | 主画面 | Vueファイル編集時の構文ハイライト表示 |

## 機能種別

構文解析 / 構文ハイライト / 言語サポート

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| - | - | - | 設定変数なし（デフォルト動作） | - |

### 入力データソース

- Vue単一ファイルコンポーネント（.vue）のバッファ内容

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| 構文ハイライト | 視覚表示 | Vue/HTML/JS/CSSの複合ハイライト |

### 出力先

- Vimエディタ画面（バッファ表示）

## 処理フロー

### 処理シーケンス

```
1. レイヤー読み込み
   └─ +lang/vueレイヤーが有効化される
2. プラグイン読み込み
   └─ vim-vueプラグインがvim-plugにより読み込まれる（遅延読み込み）
3. ファイル検出
   └─ .vueファイルオープン時にfiletypeがvueに設定される
4. 構文ハイライト適用
   └─ vim-vueの構文定義に基づきハイライトが適用される
5. ftplugin適用
   └─ タブ幅設定が適用される
```

### フローチャート

```mermaid
flowchart TD
    A[Vim起動] --> B{vueレイヤー有効?}
    B -->|Yes| C[vim-vueプラグイン登録]
    B -->|No| Z[終了]
    C --> D{.vueファイルを開く?}
    D -->|Yes| E[filetype=vue設定]
    D -->|No| F[待機]
    F --> D
    E --> G[vim-vue読み込み]
    G --> H[構文ハイライト適用]
    H --> I[ftplugin/vue.vim適用]
    I --> J[編集可能状態]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-56-01 | レイヤー依存 | +lang/vueレイヤーの有効化が必要 | .spacevimファイルでレイヤー指定時 |
| BR-56-02 | ファイルタイプ検出 | .vueファイルで自動有効化 | ファイルオープン時 |
| BR-56-03 | 遅延読み込み | vueファイルタイプでのみプラグインロード | for: 'vue'指定 |
| BR-56-04 | タブ幅設定 | Vueファイルは2スペースインデント | ftplugin適用時 |
| BR-56-05 | htmlレイヤー依存 | ftpluginはhtmlレイヤー有効時のみ適用 | spacevim#load('html')確認 |

### 計算ロジック

特になし

## データベース操作仕様

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

該当なし（データベース操作を行わない）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | プラグイン未インストール | vim-plugによるインストール未完了 | :PlugInstall実行 |
| - | ハイライト遅延 | 大規模.vueファイル | プラグイン設定の最適化 |

### リトライ仕様

該当なし

## トランザクション仕様

該当なし

## パフォーマンス要件

- 大規模Vueコンポーネントでも構文ハイライトが適切に適用されること
- ファイルオープン時のレイテンシ：200ms以下

## セキュリティ考慮事項

- 外部通信なし
- ローカルファイルの読み取りのみ

## 備考

- +lang/htmlレイヤーも有効化することでemmet-vimがVueファイルでも利用可能
- Vue 3/Composition APIにも対応
- coc.nvimとVolarを併用することでより高度なLSP機能が利用可能

---

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

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

### 推奨読解順序

#### Step 1: データ構造を理解する

Vueレイヤーは設定ファイルを持たず、プラグイン登録のみで構成される。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | packages.vim | `layers/+lang/vue/packages.vim` | vim-vueプラグインの登録を確認 |

**読解のコツ**: `{ 'for': 'vue' }`オプションは遅延読み込みを示し、vueファイルタイプでのみプラグインがロードされる。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | packages.vim | `layers/+lang/vue/packages.vim` | MPマクロによるプラグイン登録 |

**主要処理フロー**:
1. **1行目**: `MP 'posva/vim-vue', { 'for': 'vue' }` - vim-vueプラグイン登録（遅延読み込み）

#### Step 3: ftplugin設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | vue.vim | `core/ftplugin/vue.vim` | Vueファイル固有設定 |

**主要処理フロー**:
- **1行目**: `spacevim#load('html')` - htmlレイヤー有効性チェック（Vue ftpluginはhtmlレイヤー依存）
- **6行目**: `setlocal tabstop=2 softtabstop=2 shiftwidth=2` - 2スペースインデント設定

#### Step 4: HTML連携を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | packages.vim | `layers/+lang/html/packages.vim` | emmet-vimのVue対応を確認 |

**主要処理フロー**:
- **3行目**: `MP 'mattn/emmet-vim', { 'for': [ 'html', 'vue', 'css' ] }` - emmetはVueでも利用可能

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

```
.spacevim (ユーザー設定)
    │
    ├─ Layer '+lang/vue' 有効化
    │      │
    │      └─ packages.vim
    │             └─ MP 'posva/vim-vue' (Vue構文ハイライト)
    │
    └─ Layer '+lang/html' 有効化（推奨）
           │
           └─ packages.vim
                  └─ MP 'mattn/emmet-vim' (Vueでも利用可能)
```

### データフロー図

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

.spacevim ───▶ レイヤーシステム ───▶ プラグイン登録
                     │
                     ▼
.vueファイル ───▶ vim-vue ───▶ 構文ハイライト
                     │        (template/script/style)
                     ▼
              ftplugin/vue.vim ───▶ タブ幅設定
                     │
                     ▼
Emmet省略記法 ───▶ emmet-vim ───▶ 展開されたHTML
(htmlレイヤー有効時)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| packages.vim | `layers/+lang/vue/packages.vim` | 設定 | vim-vueプラグインの登録 |
| vue.vim | `core/ftplugin/vue.vim` | ftplugin | Vue固有のエディタ設定 |
| packages.vim | `layers/+lang/html/packages.vim` | 設定 | emmet-vimのVue対応 |
| LAYERS.md | `layers/LAYERS.md` | ドキュメント | レイヤー一覧とプラグイン情報 |
