# 画面設計書 45-フレームコード表示

## 概要

本ドキュメントは、Laravelフレームワークの例外レンダラーにおけるフレームコード表示コンポーネント（frame-code.blade.php）の画面設計書である。スタックトレースの各フレームを展開した際に、エラー発生箇所周辺のソースコードをシンタックスハイライト付きで表示するBladeコンポーネントについて定義する。

### 本画面の処理概要

**業務上の目的・背景**：例外発生時のデバッグにおいて、エラーが発生したソースコードを直接確認できることは非常に重要である。このコンポーネントは、スタックトレースの各フレームに対応するソースコードのスニペット（約17行）を表示し、エラー発生行をハイライトする。これにより、開発者はエラー発生箇所のコンテキストを素早く把握し、問題の原因を特定できる。

**画面へのアクセス方法**：frame.blade.phpコンポーネントにおいて、フレームを展開した際に表示される。フレームにソースコードスニペット（snippet()）が存在する場合のみ表示される。

**主要な操作・処理内容**：
1. ソースコードスニペットを受け取る
2. ハイライト対象の行番号を計算
3. syntax-highlightコンポーネントでシンタックスハイライト付きで表示
4. エラー発生行を視覚的に強調表示

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | エラー発生箇所のソースコード描画 |

## 画面種別

詳細 / コンポーネント

## URL/ルーティング

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

## 入出力項目

| 項目名 | 属性名 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| code | $code | string | 必須 | ソースコードスニペット |
| highlightedLine | $highlightedLine | int | 必須 | ハイライト対象の行番号（元ファイルの行番号） |

## 表示項目

| 項目名 | 説明 | 表示形式 |
|--------|------|----------|
| ソースコード | シンタックスハイライト付きのPHPコード | pre/code形式、行番号付き |
| ハイライト行 | エラー発生行の背景色強調 | rose-200/rose-900の背景色 |

## イベント仕様

本コンポーネントにはユーザーインタラクションイベントはない。表示専用のコンポーネントである。

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

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

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

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

## メッセージ仕様

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

## 例外処理

| 例外状況 | 処理内容 |
|----------|----------|
| codeが空文字 | コンポーネント自体が呼び出されない（親で制御） |
| highlightedLineが範囲外 | syntax-highlightコンポーネントで適切に処理 |

## 備考

- syntax-highlightコンポーネントを内部で使用
- エラー行の前後5行を表示（starting-line計算: highlightedLine - 5）
- ハイライト行のインデックスはmin(5, highlightedLine - 1)で計算
- ダークモード対応（bg-rose-900）
- 横スクロール対応（overflow-x-auto）

---

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

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

### 推奨読解順序

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

フレームからソースコードスニペットを取得するロジックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Frame.php | `src/Illuminate/Foundation/Exceptions/Renderer/Frame.php` | snippet()メソッド（192-205行目）を理解 |

**読解のコツ**: snippet()メソッドはエラー行の前後合計17行（line - 6 から 17行分）を取得する。

#### Step 2: テンプレートを理解する

フレームコード表示コンポーネントのテンプレート構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | frame-code.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/frame-code.blade.php` | @propsの定義、syntax-highlightへのパラメータ渡しを理解 |

**主要処理フロー**:
1. **1行目**: @props(['code', 'highlightedLine'])でパラメータを受け取る
2. **7-14行目**: syntax-highlightコンポーネントを呼び出し
3. **9行目**: `language="php"` でPHPとしてハイライト
4. **10行目**: `editor` 属性でエディタモード有効化（行番号表示）
5. **11行目**: `starting-line` で開始行番号を計算（max(1, highlightedLine - 5)）
6. **12行目**: `highlighted-line` でハイライト行インデックスを計算（min(5, highlightedLine - 1)）

#### Step 3: 子コンポーネントを理解する

syntax-highlightコンポーネントの役割を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | syntax-highlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/syntax-highlight.blade.php` | editorモードでの行番号表示、ハイライト行の処理 |

**主要処理フロー**:
- **10-38行目**: PHPでフォールバックHTML生成（JavaScript無効時用）
- **42-51行目**: Alpine.jsでJavaScriptハイライト処理（window.highlight関数）
- **55-58行目**: x-cloakでJavaScriptレンダリング後に表示

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

```
frame.blade.php
    │
    └─ frame-code.blade.php
           │
           └─ syntax-highlight.blade.php
                  │
                  └─ window.highlight() (JavaScript)
```

### データフロー図

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

code (string)                   frame-code.blade.php               HTML出力
highlightedLine (int)   ───▶   (パラメータ計算)
    │                                  │
    │                                  ▼
    │                          syntax-highlight.blade.php
    │                                  │
    ├─ starting-line        ◀──  max(1, highlightedLine - 5)
    └─ highlighted-line     ◀──  min(5, highlightedLine - 1)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| frame-code.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/frame-code.blade.php` | テンプレート | フレームコード表示のラッパー |
| frame.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/frame.blade.php` | テンプレート | 親コンポーネント |
| syntax-highlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/syntax-highlight.blade.php` | テンプレート | シンタックスハイライト処理 |
| Frame.php | `src/Illuminate/Foundation/Exceptions/Renderer/Frame.php` | ソース | フレームデータ、snippet()メソッド |
