# 画面設計書 47-シンタックスハイライト

## 概要

本ドキュメントは、Laravelフレームワークの例外レンダラーにおけるシンタックスハイライトコンポーネント（syntax-highlight.blade.php）の画面設計書である。ソースコードに対してシンタックスハイライト（構文の色付け）を適用し、行番号やエラー行のハイライト表示機能を提供するBladeコンポーネントについて定義する。

### 本画面の処理概要

**業務上の目的・背景**：ソースコードを視覚的に見やすく表示することは、デバッグ作業の効率化に大きく貢献する。このコンポーネントは、PHP、SQL、JSONなどのコードに対してシンタックスハイライトを適用し、キーワードや変数、文字列などを色分け表示する。また、エディタモードでは行番号表示と特定行のハイライト機能を提供し、エラー発生箇所を明確に示すことができる。

**画面へのアクセス方法**：frame-code.blade.php、formatted-source.blade.php、query.blade.php、routing-parameter.blade.phpなど、コード表示が必要な複数のコンポーネントから呼び出される。

**主要な操作・処理内容**：
1. コード文字列と言語タイプを受け取る
2. エディタモードの場合は行番号とハイライト行の計算
3. PHPでフォールバックHTMLを生成（JavaScript無効時用）
4. Alpine.jsでJavaScriptハイライト処理（window.highlight関数）
5. x-cloakで非同期レンダリング

**画面遷移**：様々なコンポーネントの子コンポーネントとして表示。ユーザー操作による遷移はない。

**権限による表示制御**：APP_DEBUGがtrueの場合のみ表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | コードの構文ハイライト処理 |

## 画面種別

表示 / コンポーネント

## URL/ルーティング

直接のURLはなし（親コンポーネントから呼び出されるサブコンポーネント）

## 入出力項目

| 項目名 | 属性名 | 型 | 必須 | デフォルト | 説明 |
|--------|--------|-----|------|----------|------|
| code | $code | string | 必須 | - | ハイライト対象のソースコード |
| language | $language | string | 必須 | - | 言語タイプ（php, sql, json等） |
| editor | $editor | bool | 任意 | false | エディタモード（行番号表示）の有無 |
| startingLine | $startingLine | int | 任意 | 1 | 開始行番号 |
| highlightedLine | $highlightedLine | int/null | 任意 | null | ハイライト対象行のインデックス |
| truncate | $truncate | bool | 任意 | false | テキスト省略表示の有無 |

## 表示項目

| 項目名 | 説明 | 表示形式 |
|--------|------|----------|
| ハイライト済みコード | シンタックスハイライトが適用されたコード | pre/code形式 |
| 行番号 | エディタモード時に各行の行番号を表示 | span要素 |
| ハイライト行 | エラー発生行の背景色強調 | rose-200/rose-900の背景色 |

## イベント仕様

本コンポーネントにはユーザーインタラクションイベントはない。Alpine.jsのx-initで自動的にハイライト処理が実行される。

## データベース更新仕様

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | データベース操作なし |

本コンポーネントは表示専用であり、データベースへの更新処理は行わない。

## メッセージ仕様

本コンポーネントにはメッセージ表示はない。

## 例外処理

| 例外状況 | 処理内容 |
|----------|----------|
| JavaScriptが無効 | PHPで生成したフォールバックHTMLを表示 |
| window.highlightが未定義 | フォールバックHTMLが表示される |

## 備考

- Alpine.jsのx-initでwindow.highlight()関数を呼び出し
- Illuminate\Support\Js::from()でPHPからJavaScriptへ値を安全に渡す
- エディタモードでは偶数/奇数行で背景色を交互に変更
- ダークモード対応（dark:bg-white/2, dark:bg-white/4等）
- フォールバックHTMLはPHPで事前に生成

---

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

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

### 推奨読解順序

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

コンポーネントに渡されるプロパティとその役割を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | syntax-highlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/syntax-highlight.blade.php` | @propsで定義されるパラメータの構造（1-8行目） |

**読解のコツ**: 6つのプロパティがあり、それぞれデフォルト値が設定されている。editorモードと通常モードで挙動が異なる。

#### Step 2: フォールバックHTML生成を理解する

JavaScript無効時のフォールバック表示ロジックを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | syntax-highlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/syntax-highlight.blade.php` | @phpブロック内のフォールバックHTML生成ロジック（10-38行目） |

**主要処理フロー**:
1. **11行目**: truncateモードでのpreタグ生成
2. **13-32行目**: editorモードでの行ごとの処理
3. **14行目**: コードを改行で分割
4. **16-25行目**: 各行に行番号とハイライトを適用
5. **34-36行目**: 通常モードでのシンプルなHTML生成
6. **30行目**: htmlspecialchars()でXSS対策

#### Step 3: JavaScript連携を理解する

Alpine.jsとwindow.highlight()関数との連携を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | syntax-highlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/syntax-highlight.blade.php` | x-dataとx-initでのJavaScript呼び出し（42-51行目） |

**主要処理フロー**:
1. **42行目**: `x-data="{ highlightedCode: null }"` で状態を初期化
2. **43-51行目**: `x-init` でwindow.highlight()を呼び出し
3. **45-50行目**: Illuminate\Support\Js::from()でPHPからJavaScriptへ値を渡す
4. **55-58行目**: x-htmlでハイライト済みHTMLを表示
5. **59行目**: x-showでフォールバック/ハイライト表示を切り替え

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

```
frame-code.blade.php          formatted-source.blade.php
        │                              │
        └──────────┬───────────────────┘
                   │
                   ▼
           syntax-highlight.blade.php
                   │
                   ├─ @php (フォールバックHTML生成)
                   │
                   └─ x-init (JavaScript処理)
                          │
                          └─ window.highlight() (外部JS関数)
```

### データフロー図

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

code (string)
language (string)               syntax-highlight.blade.php
editor (bool)           ───▶
startingLine (int)              @php ブロック                ───▶   $fallback (フォールバックHTML)
highlightedLine (int)
truncate (bool)                 x-init                       ───▶   highlightedCode (JavaScript生成HTML)
                                      │
                                      ▼
                               window.highlight(code, language, truncate, editor, startingLine, highlightedLine)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| syntax-highlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/syntax-highlight.blade.php` | テンプレート | シンタックスハイライトのメインコンポーネント |
| frame-code.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/frame-code.blade.php` | テンプレート | 呼び出し元（エディタモード） |
| formatted-source.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/formatted-source.blade.php` | テンプレート | 呼び出し元（truncateモード） |
| query.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/query.blade.php` | テンプレート | 呼び出し元（SQL表示） |
| routing-parameter.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/routing-parameter.blade.php` | テンプレート | 呼び出し元（JSON表示） |
