# 機能設計書 55-タブ幅（tabWidth）

## 概要

本ドキュメントは、Prettierの`tabWidth`オプションに関する機能設計書である。このオプションは、1つのインデントレベルあたりのスペース数を指定する。タブ文字の表示幅としても使用され、インデント計算やアライメント計算に影響する。

### 本機能の処理概要

**業務上の目的・背景**：コードのインデント幅はプロジェクトごとに異なる慣習がある。2スペース、4スペース、8スペースなど様々なスタイルが存在する。このオプションにより、プロジェクトのコーディング規約に合わせたインデント幅の統一が可能になる。

**機能の利用シーン**：すべてのコードフォーマット時に使用される。特に、新規プロジェクトでのスタイル設定、既存プロジェクトとの整合性維持、EditorConfigとの連携において重要である。

**主要な処理内容**：
1. オプション値（整数）の読み込み
2. インデント生成時にtabWidthを使用
3. アライメント計算時にtabWidthを考慮
4. useTabsがfalseの場合、tabWidthの数のスペースを出力

**関連システム・外部連携**：すべての言語パーサー・プリンター、EditorConfigと連携して動作する。

**権限による制御**：権限による制御は存在しない。設定ファイルまたはCLIオプションで指定する。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 2 | Playground | 補助機能 | サイドバーからタブ幅オプションを設定 |
| 19 | Configuration - Options | 主機能 | tabWidthオプションの詳細説明 |

## 機能種別

設定オプション / フォーマット制御

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| tabWidth | int | No | 1インデントあたりのスペース数 | 0以上の整数、デフォルト: 2 |

### 入力データソース

- 設定ファイル（.prettierrc、prettier.config.js等）
- CLIオプション（--tab-width）
- プログラマティックAPI呼び出し時のオプションオブジェクト
- EditorConfigファイル（indent_size、tab_width）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| formattedCode | string | インデント幅設定が適用されたフォーマット済みコード |

### 出力先

フォーマット結果は呼び出し元に返却される（標準出力、ファイル、API戻り値）。

## 処理フロー

### 処理シーケンス

```
1. オプション解析
   └─ tabWidthオプションの値を取得（デフォルト: 2）
2. インデント生成
   └─ generateIndent関数でインデント文字列を生成
3. スペース追加
   └─ useTabsがfalseの場合、tabWidth分のスペースを追加
4. タブ追加
   └─ useTabsがtrueの場合、タブを追加しlength += tabWidth
5. アライメント計算
   └─ getAlignmentSize関数でタブ幅を考慮
```

### フローチャート

```mermaid
flowchart TD
    A[開始] --> B[tabWidth値を取得]
    B --> C[インデント処理開始]
    C --> D{useTabs?}
    D -->|Yes| E[タブ文字を追加]
    D -->|No| F[スペースを追加]
    E --> G[length += tabWidth]
    F --> H[tabWidth分のスペースを追加]
    G --> I[出力]
    H --> I
    I --> J[終了]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-55-1 | デフォルト値 | 2スペースを1インデントとする | tabWidth未指定 |
| BR-55-2 | スペースモード | tabWidthの数のスペースを出力 | useTabs = false |
| BR-55-3 | タブモード | タブを1文字出力し、lengthにtabWidthを加算 | useTabs = true |
| BR-55-4 | アライメント | タブ幅の倍数になるようアライメントを計算 | align処理時 |
| BR-55-5 | EditorConfig | indent_size または tab_width から取得 | EditorConfig設定時 |

### 計算ロジック

```javascript
// インデント生成（indent.js）
if (options.useTabs) {
  addTabs(1); // length += options.tabWidth * count
} else {
  addSpaces(options.tabWidth);
}

// アライメント計算（get-alignment-size.js）
size = size + tabWidth - (size % tabWidth);
```

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

データベース操作は発生しない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | 型エラー | 整数以外の値が指定された場合 | Prettierのオプション検証でエラーが発生 |

### リトライ仕様

リトライは不要（同期的な設定適用処理）。

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

トランザクション管理は不要。

## パフォーマンス要件

インデント計算は頻繁に行われるが、単純な演算のためパフォーマンスへの影響は軽微。

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

セキュリティに関する特別な考慮事項は存在しない。

## 備考

- useTabsオプションと組み合わせて使用される。
- Markdown等でのリストインデント計算にも使用される。
- EditorConfigのindent_sizeまたはtab_widthから自動設定される。

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | core-options.evaluate.js | `src/main/core-options.evaluate.js` | tabWidthオプションの定義 |

**読解のコツ**: このファイルでは、tabWidthがint型でデフォルト2、範囲が0〜無限大であることを確認する。

#### Step 2: インデント生成を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | indent.js | `src/document/printer/indent.js` | generateIndent関数でのtabWidth使用 |

**主要処理フロー**:
1. **8行目**: IndentOptionsの型定義（useTabs, tabWidth）
2. **72-76行目**: useTabsがtrueの場合のタブ追加
3. **75行目**: useTabsがfalseの場合、addSpaces(options.tabWidth)
4. **103行目**: タブ幅をlengthに加算

#### Step 3: アライメント計算を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | get-alignment-size.js | `src/utilities/get-alignment-size.js` | タブ幅を考慮したアライメント計算 |

**主要処理フロー**:
- **7行目**: getAlignmentSize(text, tabWidth, startIndex)
- **12-15行目**: タブ文字の場合、次のtabWidthの倍数になるようサイズを計算

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

```
printDocToString (printer.js)
    │
    ├─ makeIndent (indent.js:180)
    │      └─ generateIndent (indent.js:57)
    │             ├─ options.useTabs チェック
    │             ├─ addTabs → length += tabWidth * count
    │             └─ addSpaces(options.tabWidth)
    │
    └─ makeAlign (indent.js:145)
           └─ generateIndent
                  └─ options.tabWidth 参照

core.js
    └─ getAlignmentSize (get-alignment-size.js)
           └─ tabWidth を使用してアライメント計算
```

### データフロー図

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

オプション設定 ───▶ generateIndent関数 ───▶ インデント文字列
(tabWidth)            (indent.js)          (スペースまたはタブ)
        │
        ▼
        tabWidth ───▶ アライメント計算 ───▶ 位置揃え文字列
                      (get-alignment-size.js)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| core-options.evaluate.js | `src/main/core-options.evaluate.js` | ソース | オプション定義（191-197行目） |
| indent.js | `src/document/printer/indent.js` | ソース | インデント生成ロジック |
| get-alignment-size.js | `src/utilities/get-alignment-size.js` | ソース | アライメントサイズ計算 |
| get-indent-size.js | `src/utilities/get-indent-size.js` | ソース | インデントサイズ計算 |
| editorconfig-to-prettier.js | `src/config/editorconfig/editorconfig-to-prettier.js` | ソース | EditorConfig変換（27-29行目） |
| align.js | `src/document/builders/align.js` | ソース | アライメントDoc生成 |
| core.js | `src/main/core.js` | ソース | tabWidth参照（46, 198行目） |
| public.d.ts | `src/document/public.d.ts` | 型定義 | IndentOptions型定義（219行目） |
