# 機能設計書 44-JavaScript/TypeScript

## 概要

本ドキュメントは、space-vimにおけるJavaScript/TypeScript言語サポート機能の設計仕様を定義する。本機能はvim-javascript、vim-jsx-improve、tsuquyomi等のプラグインを統合し、JavaScript/TypeScriptファイル編集時の構文ハイライト、JSXサポート、TypeScript補完機能を提供する。

### 本機能の処理概要

本機能は、JavaScript（.js/.jsx）およびTypeScript（.ts/.tsx）ファイルの編集時に、モダンなJavaScript/TypeScript開発に必要な言語サポート機能を提供する。

**業務上の目的・背景**：JavaScript/TypeScriptは現代のWebアプリケーション開発において最も重要な言語であり、React、Vue、Angular等のフレームワークで広く使用されている。Vim上でのフロントエンド開発を効率化し、型安全性を確保することで、開発生産性とコード品質の向上を実現する。

**機能の利用シーン**：
- JavaScriptスクリプト・モジュールの作成・編集
- React/JSXコンポーネントの開発
- TypeScriptによる型安全な開発
- ESLintによるコード品質チェック
- TSサーバーによる型チェック・補完

**主要な処理内容**：
1. JavaScriptファイルタイプ検出時のftplugin設定適用
2. vim-javascript/vim-jsx-improveによる構文ハイライト
3. ALE連携によるESLintリンターの実行
4. TypeScript用tsuquyomiによるTSServer連携
5. vimprocによる非同期処理サポート

**関連システム・外部連携**：
- pangloss/vim-javascript プラグイン
- neoclide/vim-jsx-improve プラグイン
- Quramy/tsuquyomi プラグイン（TypeScript）
- Shougo/vimproc.vim プラグイン
- leafgarland/typescript-vim プラグイン
- ianks/vim-tsx プラグイン
- ESLint（リンター）
- TypeScript Server（tsserver）

**権限による制御**：特になし（全ユーザー共通機能）

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 8 | 補完ポップアップ | 参照画面 | JavaScript/TypeScriptコードの補完候補表示 |
| 10 | ALE/Syntastic（構文エラー表示） | 参照画面 | ESLintによるリアルタイム構文チェック |

## 機能種別

言語サポート / 構文ハイライト / リント / 型チェック / 補完

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| g:jsx_ext_required | Number | No | JSX拡張子必須フラグ | 0または1 |
| b:ale_linters | List | No | ALE用リンター | 文字列のリスト |

### 入力データソース

- JavaScript/TypeScriptソースファイル（.js/.jsx/.ts/.tsx）
- プロジェクトの設定ファイル（tsconfig.json、.eslintrc等）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| 構文ハイライト | Highlight | JavaScript/TypeScript構文の色分け表示 |
| 補完候補 | List | 識別子・型の補完候補 |
| リント結果 | List | ESLint構文エラー・警告の一覧 |
| 型情報 | String | TypeScript型情報の表示 |

### 出力先

- エディタバッファ（構文ハイライト）
- 補完ポップアップウィンドウ
- サインカラム（エラー・警告表示）
- エコーエリア（型情報）

## 処理フロー

### 処理シーケンス

```
1. JavaScript/TypeScriptファイルオープン
   └─ ファイルタイプ検出

2. JavaScript用ftplugin読み込み
   └─ ftplugin/javascript.vim

3. バッファ設定適用
   └─ tabstop=2, softtabstop=2, shiftwidth=2

4. ALE設定適用
   └─ b:ale_linters = ['eslint']

5. TypeScriptファイルの場合
   └─ tsuquyomi プラグイン読み込み
   └─ TSServer接続

6. JSXファイルの場合
   └─ vim-jsx-improve による構文サポート
```

### フローチャート

```mermaid
flowchart TD
    A[ファイルオープン] --> B{ファイルタイプ?}
    B -->|.js/.jsx| C[javascript ftplugin]
    B -->|.ts| D[typescript プラグイン]
    B -->|.tsx| E[typescript.tsx プラグイン]
    C --> F[バッファ設定適用]
    D --> G[tsuquyomi読み込み]
    E --> G
    F --> H[ALE ESLint設定]
    G --> I[TSServer接続]
    H --> J[編集開始]
    I --> J
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-44-01 | レイヤー有効化ルール | javascriptレイヤーが有効な場合のみftplugin処理を実行 | ファイルオープン時 |
| BR-44-02 | JSX拡張子不要ルール | g:jsx_ext_required=0により.js内でもJSX構文をサポート | JSX判定時 |
| BR-44-03 | TypeScript遅延読み込み | TypeScriptファイル用プラグインはファイルタイプ検出時に読み込み | ファイルオープン時 |

### 計算ロジック

該当なし

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

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

本機能はデータベース操作を行わない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | ESLint未インストール | ESLintが未インストール | プロジェクトへのESLintインストール案内 |
| - | TSServer接続エラー | TypeScriptが未インストール | TypeScriptインストール案内 |
| - | vimproc未コンパイル | vimprocのmakeが実行されていない | :VimProcInstall 実行案内 |

### リトライ仕様

TSServer接続エラー時は自動再接続を試みる。

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

該当なし

## パフォーマンス要件

- TypeScriptファイルは遅延読み込みにより起動時間を最適化
- vimprocによる非同期処理でエディタの応答性を維持

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

- 外部ツール（ESLint, tsserver等）はローカル環境のものを使用
- node_modules内のツールは信頼できるプロジェクトのみで使用

## 備考

- g:jsx_ext_required = 0 により、.jsファイル内でもJSX構文が認識される
- TypeScript用プラグインは vimproc.vim のコンパイルが必要（:VimProcInstall）

---

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

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

### 推奨読解順序

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

JavaScript/TypeScript言語サポートで使用される設定変数を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | config.vim | `layers/+lang/javascript/config.vim` | vim-jsx設定変数 |

**読解のコツ**: `g:jsx_ext_required` の設定がJSX判定に影響する。

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

JavaScriptファイルオープン時の処理起点を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | javascript.vim | `core/ftplugin/javascript.vim` | ftpluginエントリーポイント |

**主要処理フロー**:
1. **1-4行目**: 二重読み込み防止とレイヤー有効化チェック
2. **6行目**: `setlocal tabstop=2 softtabstop=2 shiftwidth=2` でバッファ設定
3. **8行目**: `let b:ale_linters = ['eslint']` でALE設定

#### Step 3: JavaScriptプラグイン登録を理解する

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

**主要処理フロー**:
- **1行目**: vim-javascript の登録（javascriptファイルタイプ）
- **2行目**: vim-jsx-improve の登録（javascript, javascript.jsx）

#### Step 4: TypeScriptプラグイン登録を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | packages.vim | `layers/+lang/typescript/packages.vim` | TypeScriptプラグイン登録 |

**主要処理フロー**:
- **1行目**: tsuquyomi（TypeScript IDE機能）
- **2行目**: vimproc.vim（非同期処理、要make）
- **3行目**: typescript-vim（構文ハイライト）
- **4行目**: vim-tsx（TSX構文サポート）

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

```
JavaScript/TypeScriptファイルオープン
    │
    ├─ JavaScriptの場合
    │      ├─ core/ftplugin/javascript.vim
    │      │      ├─ spacevim#load('javascript') 確認
    │      │      ├─ setlocal 設定（tabstop=2等）
    │      │      └─ b:ale_linters = ['eslint']
    │      │
    │      └─ layers/+lang/javascript/ プラグイン
    │             ├─ vim-javascript（構文ハイライト）
    │             └─ vim-jsx-improve（JSXサポート）
    │
    └─ TypeScriptの場合
           └─ layers/+lang/typescript/ プラグイン
                  ├─ tsuquyomi（TSServer連携）
                  ├─ vimproc.vim（非同期処理）
                  ├─ typescript-vim（構文）
                  └─ vim-tsx（TSXサポート）
```

### データフロー図

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

JS/TSソースコード ───▶ ftplugin設定適用 ──────▶ バッファ設定
     │
     ├─────────────────▶ ALE/ESLint リント ────▶ エラー表示
     │
     └─────────────────▶ TSServer（TypeScript）▶ 型情報・補完
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| javascript.vim | `core/ftplugin/javascript.vim` | 設定 | JavaScriptファイル用ftplugin |
| packages.vim | `layers/+lang/javascript/packages.vim` | 設定 | JavaScriptプラグイン登録 |
| config.vim | `layers/+lang/javascript/config.vim` | 設定 | vim-jsx設定 |
| packages.vim | `layers/+lang/typescript/packages.vim` | 設定 | TypeScriptプラグイン登録 |
