# 機能設計書 56-タブ使用（useTabs）

## 概要

本ドキュメントは、Prettierの`useTabs`オプションに関する機能設計書である。このオプションは、インデントにスペースの代わりにタブ文字を使用するかどうかを制御する。アクセシビリティの観点から、タブ文字を使用することで各ユーザーが自分の好みのインデント幅で表示できる利点がある。

### 本機能の処理概要

**業務上の目的・背景**：インデントにスペースを使うかタブを使うかは、開発チームによって異なる方針がある。タブを使用することで、各開発者が自分のエディタ設定でインデント幅を自由に調整でき、特に視覚障害を持つ開発者にとってはアクセシビリティの向上につながる。このオプションにより、プロジェクトのインデント方針を統一できる。

**機能の利用シーン**：すべてのコードフォーマット時に使用される。特に、アクセシビリティを重視するプロジェクト、Makefileなどタブが必要な言語、既存コードベースとの整合性維持において重要である。

**主要な処理内容**：
1. オプション値（true/false）の読み込み
2. インデント生成時にuseTabsを参照
3. trueの場合はタブ文字を出力、falseの場合はスペースを出力
4. 論理長（length）の計算にtabWidthを使用

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

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

## 関連画面

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

## 機能種別

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

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| useTabs | boolean | No | インデントにタブを使用するかどうか | true/falseのブール値のみ許可 |

### 入力データソース

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

## 出力仕様

### 出力データ

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

### 出力先

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

## 処理フロー

### 処理シーケンス

```
1. オプション解析
   └─ useTabsオプションの値を取得（デフォルト: false）
2. インデント生成要求
   └─ Docツリーのindentコマンドを処理
3. インデント文字決定
   └─ generateIndent関数でuseTabsに基づいて文字を決定
4. タブ/スペース出力
   └─ trueの場合タブ、falseの場合スペースを追加
5. 長さ計算
   └─ タブの場合、tabWidth分の長さを加算
```

### フローチャート

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

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-56-1 | デフォルト動作 | スペースでインデントする | useTabs = false（デフォルト） |
| BR-56-2 | タブインデント | タブ文字でインデントする | useTabs = true |
| BR-56-3 | 長さ計算 | タブの論理長はtabWidthを使用 | useTabs = true |
| BR-56-4 | EditorConfig | indent_style = tab でtrue、space でfalse | EditorConfig設定時 |
| BR-56-5 | 三項演算子 | useTabs時の特別なスペーシング処理 | ternary.js参照 |

### 計算ロジック

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

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

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

## エラー処理

### エラーケース一覧

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

### リトライ仕様

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

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

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

## パフォーマンス要件

単純な条件分岐のためパフォーマンスへの影響は軽微。

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

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

## 備考

- tabWidthオプションと組み合わせて使用される。
- アクセシビリティの観点から、タブの使用を推奨するプロジェクトもある。
- EditorConfigのindent_styleから自動設定される。

---

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

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

### 推奨読解順序

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

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

**読解のコツ**: このファイルでは、useTabsがboolean型でデフォルトfalseであることを確認する。

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

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

**主要処理フロー**:
1. **8行目**: IndentOptionsの型定義（useTabs: boolean, tabWidth: number）
2. **72-76行目**: useTabsがtrueの場合のタブ追加ロジック
3. **112行目**: useTabsがtrueの場合のflushTabs呼び出し

#### Step 3: 三項演算子での特別処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ternary.js | `src/language-js/print/ternary.js` | useTabsを考慮した三項演算子フォーマット |

**主要処理フロー**:
- **184行目**: isBigTabs = options.tabWidth > 2 || options.useTabs
- **232-234行目**: useTabs時のスペーシング処理

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

```
printDocToString (printer.js)
    │
    ├─ makeIndent (indent.js:180)
    │      └─ generateIndent (indent.js:57)
    │             ├─ options.useTabs チェック (72行目)
    │             ├─ addTabs (72-73行目) ← useTabs = true
    │             └─ addSpaces (75行目) ← useTabs = false
    │
    └─ flush (indent.js:111)
           ├─ flushTabs (112行目) ← useTabs = true
           └─ flushSpaces (114行目) ← useTabs = false

三項演算子処理:
printTernary (ternary.js)
    └─ options.useTabs 参照 (184行目, 232行目)
```

### データフロー図

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

オプション設定 ───▶ generateIndent関数 ───▶ インデント文字
(useTabs)            (indent.js)          ("\t" または " "の連続)
        │
        ▼
        useTabs ───▶ 条件分岐 ───▶ タブまたはスペース
                     (72-76行目)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| core-options.evaluate.js | `src/main/core-options.evaluate.js` | ソース | オプション定義（198-203行目） |
| indent.js | `src/document/printer/indent.js` | ソース | インデント生成ロジック |
| editorconfig-to-prettier.js | `src/config/editorconfig/editorconfig-to-prettier.js` | ソース | EditorConfig変換（20-22行目） |
| ternary.js | `src/language-js/print/ternary.js` | ソース | 三項演算子の特別処理（184, 232行目） |
| ternary-old.js | `src/language-js/print/ternary-old.js` | ソース | 旧三項演算子処理（296, 315行目） |
| public.d.ts | `src/document/public.d.ts` | 型定義 | IndentOptions型定義（224行目） |
