# 画面設計書 75-下上シェブロンアイコン

## 概要

本ドキュメントは、Laravel フレームワークの例外レンダラーで使用される「下上シェブロンアイコン」コンポーネントの設計書である。このコンポーネントは、SVG形式の下上矢印アイコンを提供し、主に折りたたみ可能なセクションの「折りたたみ」状態を示すUI要素として使用される。

### 本画面の処理概要

下上シェブロンアイコンは、例外レンダラー画面においてユーザーインタラクションを視覚的に補助するためのSVGアイコンコンポーネントである。

**業務上の目的・背景**：開発時のデバッグ効率向上のため、例外発生時に表示される詳細画面において、スタックトレースのフレームやベンダーフレーム一覧などの折りたたみ可能なセクションの状態を直感的に把握できるようにする必要がある。下上シェブロンアイコンは「展開されている状態」を視覚的に表現し、クリックで折りたためることをユーザーに示す。下向きと上向きの矢印が互いに向き合う形で、コンテンツを圧縮（折りたたみ）できることを示唆している。

**画面へのアクセス方法**：このアイコンコンポーネントは単独でアクセスされるものではなく、例外レンダラー画面内のフレームコンポーネント（frame.blade.php）やベンダーフレーム一覧コンポーネント（vendor-frames.blade.php）から呼び出される。開発環境で例外が発生した際に自動的にレンダリングされる。

**主要な操作・処理内容**：
1. SVGアイコンとしてHTMLにインライン展開される
2. 下上方向の二重矢印（シェブロン）の形状を2つのパスで描画
3. currentColor を使用して親要素の色を継承
4. clipPathを使用してSVGの描画領域を制限
5. Bladeコンポーネントの属性をSVG要素にマージ

**画面遷移**：このコンポーネントは画面遷移を持たない静的なアイコン要素である。Alpine.jsのx-showディレクティブと連携し、セクションの展開状態に応じて表示・非表示が切り替わる。

**権限による表示制御**：特に権限による表示制御は行われない。例外レンダラー画面は開発環境（debug mode有効時）でのみ表示されるため、本番環境では表示されない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | 下上矢印アイコンSVGの描画 |

## 画面種別

アイコンコンポーネント（部品）

## URL/ルーティング

このコンポーネントは直接URLを持たない。例外レンダラー画面の一部として描画される。

## 入出力項目

| 項目名 | 型 | 必須 | 説明 |
|--------|-----|------|------|
| $attributes | ComponentAttributeBag | 任意 | Bladeコンポーネントに渡される追加属性（class, style等） |

## 表示項目

| 項目名 | 説明 |
|--------|------|
| SVGアイコン | 8x12ピクセルの下上シェブロン（下上矢印）アイコン |

## イベント仕様

### 1-クリックイベント

このアイコン自体にはイベントハンドラが設定されていない。親コンポーネント（frame.blade.php、vendor-frames.blade.php）のボタン要素内に配置される。Alpine.jsの`x-show`ディレクティブにより、セクションが展開されている場合（`expanded`）にのみ表示される。

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

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

このコンポーネントはデータベース操作を行わない。

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

## メッセージ仕様

このコンポーネントはメッセージを表示しない。

| メッセージID | 種別 | メッセージ内容 |
|-------------|------|---------------|
| - | - | - |

## 例外処理

このコンポーネントは例外処理を行わない。SVGの描画のみを担当する静的コンポーネントである。

## 備考

- SVGはインラインで出力されるため、CSSによるスタイリングが可能
- stroke属性に`currentColor`を使用しているため、親要素のテキストカラーを継承する
- stroke-linecap、stroke-linejoin属性に`round`を指定し、角を丸く描画
- clipPath（`clip0_14550_6168`）を使用してSVGの描画領域を定義
- 2つのパス要素で下向きと上向きの矢印を表現（互いに向き合う形）
- 上下シェブロンアイコン（chevrons-up-down）と対になるアイコンで、状態に応じて切り替わる
- 展開された状態を示し、クリックで折りたためることを示唆する
- サイズが8x12ピクセルで、上下シェブロンアイコン（12x12）とは異なる

---

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

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

### 推奨読解順序

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

このコンポーネントは単純なSVGを出力するため、複雑なデータ構造は存在しない。Bladeコンポーネントの属性バッグ（`$attributes`）のみが受け渡される。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | chevrons-down-up.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/chevrons-down-up.blade.php` | SVG要素の構造、clipPathの使用方法、下上矢印の描画方法を理解 |

**読解のコツ**: `<defs>`内に定義された`<clipPath>`がSVGの描画範囲を制限している。2つの`<path>`要素で下向き（Y座標11.00→8.25）と上向き（Y座標1.50→4.25）の矢印を表現。矢印が互いに向き合う形で「折りたたみ」を示唆。

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

アイコンコンポーネントの呼び出し元を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | frame.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/frame.blade.php` | 個別スタックフレームの展開/折りたたみ制御 |
| 2-2 | vendor-frames.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/vendor-frames.blade.php` | ベンダーフレーム一覧の展開/折りたたみ制御 |

**主要処理フロー（frame.blade.php）**:
1. **46行目**: `<x-laravel-exceptions-renderer::icons.chevrons-down-up x-show="expanded" />` で展開時にアイコンを表示
2. **47行目**: `<x-laravel-exceptions-renderer::icons.chevrons-up-down x-show="!expanded" />` で折りたたみ時は別アイコンを表示
3. **5行目**: `expanded: {{ $frame->isMain() ? 'true' : 'false' }}` でメインフレームは初期展開

**主要処理フロー（vendor-frames.blade.php）**:
1. **33行目**: `<x-laravel-exceptions-renderer::icons.chevrons-down-up x-show="expanded" />` で展開時にアイコンを表示
2. **34行目**: `<x-laravel-exceptions-renderer::icons.chevrons-up-down x-show="!expanded" />` で折りたたみ時は別アイコンを表示
3. **6行目**: `expanded: false` でベンダーフレームは初期折りたたみ

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

例外レンダラー全体の構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | trace.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/trace.blade.php` | トレースコンポーネントからのフレーム呼び出し |
| 3-2 | show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | 例外レンダラーのメイン画面構成 |

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

```
show.blade.php（メイン画面）
    │
    └─ trace.blade.php（スタックトレース）
           │
           ├─ frame.blade.php（個別フレーム）
           │      │
           │      ├─ chevrons-down-up.blade.php（展開時）★本コンポーネント
           │      └─ chevrons-up-down.blade.php（折りたたみ時）
           │
           └─ vendor-frames.blade.php（ベンダーフレーム一覧）
                  │
                  ├─ chevrons-down-up.blade.php（展開時）★本コンポーネント
                  └─ chevrons-up-down.blade.php（折りたたみ時）
```

### データフロー図

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

$attributes ───▶ chevrons-down-up.blade.php ───▶ SVGインラインHTML
(class等)         (属性マージ・描画)              (<svg>要素、clipPath付き)
      │
      │           [状態連携]
      └──────▶ Alpine.js x-show ───▶ 表示/非表示切替
                  (expanded)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| chevrons-down-up.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/chevrons-down-up.blade.php` | テンプレート | 下上シェブロンアイコンSVGの定義 |
| chevrons-up-down.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/chevrons-up-down.blade.php` | テンプレート | 上下シェブロンアイコン（対になるアイコン） |
| frame.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/frame.blade.php` | テンプレート | 個別スタックフレーム表示（アイコンの使用元） |
| vendor-frames.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/vendor-frames.blade.php` | テンプレート | ベンダーフレーム一覧表示（アイコンの使用元） |
| trace.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/trace.blade.php` | テンプレート | スタックトレース表示 |
| show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | テンプレート | 例外レンダラーメイン画面 |
