# 機能設計書 69-JavaScript/TypeScript言語サポート

## 概要

本ドキュメントは、Doom EmacsにおけるJavaScript/TypeScript言語サポートモジュールの機能設計を記述する。本モジュールはJS/TS開発に必要な編集、REPL、NPM統合機能を提供する。

### 本機能の処理概要

JavaScript/TypeScript言語サポートモジュールは、JS/TSコードの編集サポート、Node.js REPL連携、NPMプロジェクト検出、Dashドキュメント参照、LSP連携などの機能を提供する。Tree-sitterによる高精度なシンタックスハイライトもサポートする。

**業務上の目的・背景**：
JavaScriptはWebフロントエンドからバックエンド（Node.js）まで幅広く使用される言語であり、TypeScriptはその型安全な拡張として急速に普及している。本モジュールにより、JS/TSプロジェクトの効率的な開発環境を提供する。

**機能の利用シーン**：
- JavaScript/TypeScriptファイルの編集
- Node.js REPLでの対話的実行
- NPMプロジェクトの検出とnode_modules/.binのPATH追加
- LSPによる補完・診断

**主要な処理内容**：
1. js-mode/js-ts-mode/typescript-ts-mode/tsx-ts-modeによる編集サポート
2. nodejs-repl連携
3. NPMプロジェクト検出（+javascript-npm-mode）
4. Gulpプロジェクト検出（+javascript-gulp-mode）
5. Dashドキュメント参照
6. LSP連携

**関連システム・外部連携**：
- js-mode/typescript-mode/typescript-ts-mode：メジャーモード
- nodejs-repl：REPL
- LSPサーバー（tsserver等）

**権限による制御**：
本機能に権限による制御は存在しない。

## 関連画面

本機能は画面を持たないエディタ機能である。

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | コード編集、REPL |

## 機能種別

言語サポート / REPL連携 / プロジェクト検出

## 入力仕様

### 入力パラメータ

本モジュールに固有のカスタム変数は定義されていない。

### 入力データソース

- JavaScript/TypeScriptソースファイル（.js, .mjs, .cjs, .ts, .tsx, .jsx）
- NPMプロジェクト設定（package.json）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| repl-buffer | buffer | REPL出力バッファ |
| npm-conf | hash-table | NPM設定キャッシュ |

### 出力先

- *nodejs* REPLバッファ

## 処理フロー

### 処理シーケンス

```
1. JS/TSファイルオープン
   └─ js-mode/js-ts-mode/typescript-ts-mode 有効化

2. モード初期化
   ├─ REPL handler設定
   ├─ electric設定
   ├─ ligatures設定
   ├─ docsets設定
   └─ LSP起動（+lsp時）

3. プロジェクトモード検出
   ├─ package.json検出
   │   └─ +javascript-npm-mode有効化
   │       └─ node_modules/.binをexec-pathに追加
   └─ gulpfile.js検出
       └─ +javascript-gulp-mode有効化
```

### フローチャート

```mermaid
flowchart TD
    A[JS/TSファイルオープン] --> B{ファイル拡張子}
    B -->|.js/.mjs/.cjs| C{+tree-sitter?}
    B -->|.ts| D{+tree-sitter?}
    B -->|.tsx/.jsx| E[tsx-ts-mode]
    C -->|Yes| F[js-ts-mode]
    C -->|No| G[js-mode]
    D -->|Yes| H[typescript-ts-mode]
    D -->|No| I[typescript-mode]
    F --> J[共通初期化]
    G --> J
    H --> J
    I --> J
    E --> J
    J --> K[REPL/docsets/ligatures設定]
    K --> L{+lsp?}
    L -->|Yes| M[lsp!]
    L -->|No| N[プロジェクト検出]
    M --> N
    N --> O{package.json?}
    O -->|Yes| P[+javascript-npm-mode]
    O -->|No| Q[編集開始]
    P --> Q
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | NPM PATH追加 | node_modules/.binをexec-pathに追加 | package.json検出時 |
| BR-02 | JS docsets | JavaScript関連docsets設定（Angular, React等） | js-mode/js-ts-mode |
| BR-03 | TS docsets | TypeScript, AngularTS追加 | typescript系mode |
| BR-04 | チェインインデント | js-chain-indent = t | js-mode |

### 計算ロジック

特になし。

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

本機能はデータベースを使用しない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | Node.js未インストール | nodeコマンドが見つからない | REPLエラー |

### リトライ仕様

特になし。

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

該当なし。

## パフォーマンス要件

特になし。

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

- node_modules/.binの実行ファイルを信頼して使用

## 備考

- +lspフラグでLSPサポートを有効化
- +tree-sitterフラグでjs-ts-mode/typescript-ts-modeを使用

---

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

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

### 推奨読解順序

#### Step 1: 共通設定関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | config.el | `modules/lang/javascript/config.el` | +javascript-common-config関数（11-41行目） |

**読解のコツ**:
- nodejs-repl-mode以外で共通設定を適用
- docsets, ligatures, LSPの設定を行う

#### Step 2: js-mode設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | config.el | `modules/lang/javascript/config.el` | js use-package（44-60行目） |

**主要処理フロー**:
- **45-47行目**: ファイル拡張子関連付け
- **49-54行目**: tree-sitter設定
- **56-58行目**: +javascript-common-config適用
- **60行目**: js-chain-indent設定

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | config.el | `modules/lang/javascript/config.el` | typescript-mode設定（63-67行目） |
| 3-2 | config.el | `modules/lang/javascript/config.el` | typescript-ts-mode設定（70-85行目） |

#### Step 4: プロジェクトモードを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | config.el | `modules/lang/javascript/config.el` | def-project-mode! npm（109-123行目） |
| 4-2 | config.el | `modules/lang/javascript/config.el` | def-project-mode! gulp（125-126行目） |

#### Step 5: autoload関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | autoload.el | `modules/lang/javascript/autoload.el` | NPM設定関数 |

**主要処理フロー**:
- **6-18行目**: +javascript-npm-conf（package.json解析）
- **21-38行目**: +javascript-npm-dep-p（依存関係チェック）
- **41-48行目**: +javascript-add-npm-path-h（PATH追加）
- **55-59行目**: +javascript/open-repl（REPL起動）

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

```
js-mode/typescript-ts-mode
    │
    └─ +javascript-common-config
           │
           ├─ set-repl-handler! (+javascript/open-repl)
           │
           ├─ set-electric!
           │
           ├─ set-ligatures!
           │
           ├─ set-docsets!
           │
           └─ [+lsp]
                  └─ lsp!

+javascript-npm-mode
    │
    └─ +javascript-add-npm-path-h
           │
           └─ add-to-list exec-path (node_modules/.bin)
```

### データフロー図

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

.js/.ts ファイル ───▶ js-mode/typescript-ts-mode ───▶ シンタックスハイライト
                              │
                              ├─ LSP連携 ───▶ 補完・診断
                              │
                              └─ REPL ───▶ 実行結果

package.json ───▶ +javascript-npm-conf ───▶ npm-conf (hash-table)
                         │
                         └─ +javascript-npm-dep-p ───▶ 依存関係判定
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| config.el | `modules/lang/javascript/config.el` | ソース | メイン設定 |
| autoload.el | `modules/lang/javascript/autoload.el` | ソース | NPM/REPL関数 |
| doctor.el | `modules/lang/javascript/doctor.el` | 診断 | Node.js診断 |
| packages.el | `modules/lang/javascript/packages.el` | 設定 | 依存パッケージ定義 |
