# 機能設計書 51-Vueスクリプトインデント（vueIndentScriptAndStyle）

## 概要

本ドキュメントは、Prettierの`vueIndentScriptAndStyle`オプションに関する機能設計書である。このオプションは、Vueファイル（.vue）において、`<script>`タグおよび`<style>`タグの内部コンテンツに対してインデントを適用するかどうかを制御する。

### 本機能の処理概要

**業務上の目的・背景**：Vueのシングルファイルコンポーネント（SFC）では、`<template>`、`<script>`、`<style>`タグが同一ファイル内に存在する。多くのプロジェクトでは、これらのタグ内コンテンツをインデントしない形式が採用されているが、コードの視認性を高めるためにインデントを希望するチームも存在する。このオプションにより、プロジェクトのコーディング規約に合わせた柔軟なフォーマットが可能になる。

**機能の利用シーン**：Vueプロジェクトにおいて、チームのスタイルガイドに従ったフォーマットを実現する際に使用される。特に、既存のコードベースとの一貫性を保ちたい場合や、特定のリンターとの互換性を確保したい場合に活用される。

**主要な処理内容**：
1. オプション値（true/false）の読み込み
2. Vueファイルのパース時に`<script>`および`<style>`タグを識別
3. オプションがfalse（デフォルト）の場合、タグ内コンテンツへのインデント追加をスキップ
4. オプションがtrueの場合、タグ内コンテンツに通常のインデントを適用

**関連システム・外部連携**：Vue言語サポートプラグイン、HTMLパーサーと連携して動作する。

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

## 関連画面

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

## 機能種別

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

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| vueIndentScriptAndStyle | boolean | No | Vueファイルのscript/styleタグ内をインデントするかどうか | true/falseのブール値のみ許可 |

### 入力データソース

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

## 出力仕様

### 出力データ

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

### 出力先

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

## 処理フロー

### 処理シーケンス

```
1. オプション解析
   └─ vueIndentScriptAndStyleオプションの値を取得（デフォルト: false）
2. Vueファイルパース
   └─ HTMLパーサーによりVueファイルを解析
3. script/styleタグの判定
   └─ isScriptLikeTagまたはisVueCustomBlock関数で判定
4. インデント適用判定
   └─ vueIndentScriptAndStyleがfalseかつルート直下のscript/styleの場合、インデントをスキップ
5. コンテンツ出力
   └─ 判定結果に基づいてインデント有無を決定し出力
```

### フローチャート

```mermaid
flowchart TD
    A[開始] --> B[Vueファイルをパース]
    B --> C{script/styleタグか?}
    C -->|No| D[通常のインデント処理]
    C -->|Yes| E{vueIndentScriptAndStyle?}
    E -->|true| D
    E -->|false| F{ルート直下か?}
    F -->|Yes| G[インデントをスキップ]
    F -->|No| D
    D --> H[コンテンツを出力]
    G --> H
    H --> I[終了]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-51-1 | デフォルト動作 | script/styleタグ内コンテンツはインデントしない | vueIndentScriptAndStyle = false（デフォルト） |
| BR-51-2 | インデント適用 | script/styleタグ内コンテンツにインデントを適用 | vueIndentScriptAndStyle = true |
| BR-51-3 | 適用対象 | ルート直下のscript/styleタグのみが対象 | parser = "vue" かつ親要素がroot |

### 計算ロジック

特別な計算ロジックは存在しない。

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

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

## エラー処理

### エラーケース一覧

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

### リトライ仕様

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

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

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

## パフォーマンス要件

オプション参照のみの軽量な処理であり、特別なパフォーマンス要件は存在しない。

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

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

## 備考

- このオプションはVueファイル専用であり、他のファイルタイプには影響しない。
- `<script setup>`や`<style scoped>`などの修飾子付きタグにも同様に適用される。

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | options.js | `src/language-html/options.js` | vueIndentScriptAndStyleオプションの定義を確認 |

**読解のコツ**: このファイルでは、HTMLカテゴリのオプション定義が行われている。vueIndentScriptAndStyleはboolean型でデフォルトがfalseであることを確認する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | element.js | `src/language-html/print/element.js` | printChildrenDoc関数でオプションが参照される箇所 |

**主要処理フロー**:
1. **83-92行目**: script/styleタグ判定とインデント適用判定
2. **84行目**: isScriptLikeTagまたはisVueCustomBlockでタグ種別を判定
3. **87行目**: options.vueIndentScriptAndStyleがfalseの場合、childrenDocをそのまま返却

#### Step 3: ユーティリティ関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.js | `src/language-html/utilities/index.js` | isScriptLikeTag、isVueCustomBlock関数の実装 |

**主要処理フロー**:
- isScriptLikeTag: scriptやstyleタグかどうかを判定
- isVueCustomBlock: Vueカスタムブロック（i18nなど）かどうかを判定

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

```
printElement (element.js)
    │
    ├─ printChildrenDoc
    │      ├─ isScriptLikeTag (utilities/index.js)
    │      ├─ isVueCustomBlock (utilities/index.js)
    │      └─ options.vueIndentScriptAndStyle 参照
    │
    └─ indent または 直接返却
```

### データフロー図

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

オプション設定 ───▶ printChildrenDoc関数 ───▶ インデント有無が決定された
(vueIndentScriptAndStyle)   (element.js:83-92)       childrenDoc
        │
        ▼
Vueファイル内容 ───▶ isScriptLikeTag判定 ───▶ タグ種別判定結果
                    isVueCustomBlock判定
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| options.js | `src/language-html/options.js` | ソース | vueIndentScriptAndStyleオプション定義 |
| element.js | `src/language-html/print/element.js` | ソース | オプションを参照してインデント制御 |
| index.js | `src/language-html/utilities/index.js` | ソース | タグ種別判定ユーティリティ |
| index.d.ts | `src/index.d.ts` | 型定義 | TypeScript型定義（427行目） |
