# 画面設計書 44-ベンダーフレーム一覧

## 概要

本ドキュメントは、Laravelフレームワークの例外レンダラーにおけるベンダーフレーム一覧コンポーネント（vendor-frames.blade.php）の画面設計書である。スタックトレースにおけるベンダーディレクトリ（vendor/）のフレームをグループ化し、折りたたみ可能な形式で表示するBladeコンポーネントについて定義する。

### 本画面の処理概要

**業務上の目的・背景**：例外のスタックトレースには多数のフレームが含まれることがあり、特にフレームワークやライブラリの呼び出し（ベンダーフレーム）は非常に長くなる場合がある。このコンポーネントは、ベンダーフレームをグループ化して折りたたみ可能にすることで、開発者がアプリケーションコードに集中できるようにする。グループ化により、「X vendor frames」という形式で件数を表示し、必要に応じて展開して詳細を確認できる。

**画面へのアクセス方法**：trace.blade.phpコンポーネントからframeGroups()で取得したis_vendor=trueのグループに対して呼び出される。直接アクセスするものではなく、例外表示画面の一部として自動的にレンダリングされる。

**主要な操作・処理内容**：
1. ベンダーフレームの件数を表示（"X vendor frames"）
2. クリックで展開/折りたたみを切り替え
3. 展開時は各ベンダーフレームをvendor-frameコンポーネントで表示
4. フォルダアイコンで展開状態を視覚化

**画面遷移**：trace.blade.phpの子コンポーネントとして表示。展開時はvendor-frameコンポーネントを子として表示。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | 折りたたみ可能なベンダーフレーム一覧描画 |

## 画面種別

一覧 / コンポーネント

## URL/ルーティング

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

## 入出力項目

| 項目名 | 属性名 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| frames | $frames | array | 必須 | ベンダーフレームの配列 |

## 表示項目

| 項目名 | 説明 | 表示形式 |
|--------|------|----------|
| フォルダアイコン | 折りたたみ状態を示すアイコン | SVGアイコン（folder/folder-open） |
| フレーム件数 | "X vendor frame(s)" の形式 | モノスペーステキスト |
| 展開/折りたたみボタン | 上下矢印アイコンボタン | SVGアイコン |
| ベンダーフレーム一覧 | 展開時に表示される個別フレーム | vendor-frameコンポーネントのリスト |

## イベント仕様

### 1-ヘッダークリック（展開/折りたたみ）

グループのヘッダー部分をクリックすると、Alpine.jsで管理されたexpanded状態が切り替わり、ベンダーフレーム一覧の表示/非表示が切り替わる。

```javascript
@click="expanded = !expanded"
```

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

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

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

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

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|----------|
| ラベル | {N} vendor frame / {N} vendor frames | 常時表示（Str::plural()で単数/複数形を切り替え） |

## 例外処理

| 例外状況 | 処理内容 |
|----------|----------|
| framesが空配列 | コンポーネント自体が呼び出されない（親で制御） |

## 備考

- Alpine.jsのx-dataでexpanded状態を管理
- Illuminate\Support\Str::plural()で単数/複数形を自動切り替え
- 初期状態では折りたたまれている（expanded: false）
- ダークモード対応のスタイリング
- 点線ボーダーで折りたたみ状態を視覚的に表現

---

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

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

### 推奨読解順序

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

framesパラメータの構造と、フレームのグループ化ロジックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Exception.php | `src/Illuminate/Foundation/Exceptions/Renderer/Exception.php` | frameGroups()メソッド（166-184行目）でベンダー/非ベンダーのグループ化を理解 |
| 1-2 | Frame.php | `src/Illuminate/Foundation/Exceptions/Renderer/Frame.php` | isFromVendor()メソッド（212-216行目）でベンダー判定ロジックを理解 |

**読解のコツ**: frameGroups()は連続するベンダー/非ベンダーフレームをグループ化する。is_vendorがtrueのグループがvendor-framesコンポーネントに渡される。

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

ベンダーフレーム一覧コンポーネントのテンプレート構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | vendor-frames.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/vendor-frames.blade.php` | x-dataの初期化、展開ロジック、ループ処理を理解 |

**主要処理フロー**:
1. **1行目**: @props(['frames'])でフレーム配列を受け取る
2. **3行目**: @use('Illuminate\Support\Str')でStr::plural()を使用可能に
3. **6行目**: Alpine.jsのx-dataで`expanded: false`を初期化
4. **14-16行目**: クリックイベントで展開状態を切り替え
5. **17-18行目**: フォルダアイコンを展開状態に応じて切り替え
6. **20-22行目**: フレーム件数をStr::plural()で単数/複数形に
7. **38-44行目**: 展開時に各フレームをvendor-frameコンポーネントで表示

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | vendor-frame.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/vendor-frame.blade.php` | 個別ベンダーフレームの表示 |

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

```
trace.blade.php
    │
    └─ vendor-frames.blade.php (ベンダーフレームグループ)
           │
           ├─ icons/folder.blade.php (折りたたみ時)
           ├─ icons/folder-open.blade.php (展開時)
           ├─ icons/chevrons-down-up.blade.php
           ├─ icons/chevrons-up-down.blade.php
           │
           └─ vendor-frame.blade.php (各フレーム、展開時のみ)
                  ├─ formatted-source.blade.php
                  └─ file-with-line.blade.php
```

### データフロー図

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

Frame[]                   vendor-frames.blade.php       HTML出力
(ベンダーフレーム配列) ───▶ (グループ表示描画)
    │
    └─ count($frames) ───▶ "X vendor frame(s)" 表示
    │
    └─ @foreach       ───▶ vendor-frame コンポーネント呼び出し
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| vendor-frames.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/vendor-frames.blade.php` | テンプレート | ベンダーフレームグループの表示 |
| vendor-frame.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/vendor-frame.blade.php` | テンプレート | 個別ベンダーフレームの表示 |
| Exception.php | `src/Illuminate/Foundation/Exceptions/Renderer/Exception.php` | ソース | フレームグループ化ロジック |
| Frame.php | `src/Illuminate/Foundation/Exceptions/Renderer/Frame.php` | ソース | フレームデータ、ベンダー判定 |
| folder.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/folder.blade.php` | テンプレート | 折りたたみ時のフォルダアイコン |
| folder-open.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/folder-open.blade.php` | テンプレート | 展開時のフォルダアイコン |
| chevrons-down-up.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/chevrons-down-up.blade.php` | テンプレート | 折りたたみアイコン |
| chevrons-up-down.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/chevrons-up-down.blade.php` | テンプレート | 展開アイコン |
