# 画面設計書 71-右シェブロンアイコン

## 概要

本ドキュメントは、Laravel フレームワークの例外レンダラーで使用される「右シェブロンアイコン」コンポーネントの設計書である。このコンポーネントは、SVG形式の右矢印アイコンを提供し、主にページネーションやナビゲーションのUI要素として使用される。

### 本画面の処理概要

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

**業務上の目的・背景**：開発時のデバッグ効率向上のため、例外発生時に表示される詳細画面において、クエリ一覧のページネーション操作を直感的に行えるようにする必要がある。右シェブロンアイコンは「次へ進む」という操作を視覚的に表現し、ユーザーが複数ページにわたるデバッグ情報（SQLクエリ等）を効率的に閲覧できるようにする。

**画面へのアクセス方法**：このアイコンコンポーネントは単独でアクセスされるものではなく、例外レンダラー画面（show.blade.php）内のクエリコンポーネント（query.blade.php）から呼び出される。開発環境で例外が発生した際に自動的にレンダリングされ、クエリ一覧のページネーションコントロール内に表示される。

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

**画面遷移**：このコンポーネントは画面遷移を持たない静的なアイコン要素である。クエリコンポーネント内のページネーションで使用され、クリックすると次のページが表示される（Alpine.jsによるクライアントサイド処理）。

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

## 関連機能

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

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| 項目名 | 説明 |
|--------|------|
| SVGアイコン | 6x10ピクセルの右向きシェブロン（矢印）アイコン |

## イベント仕様

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

このアイコン自体にはイベントハンドラが設定されていない。親コンポーネント（query.blade.php）のボタン要素内に配置され、親のクリックイベント（`@click="next()"`）によってページネーションの次ページへの遷移が行われる。

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

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

## 備考

- SVGはインラインで出力されるため、CSSによるスタイリングが可能
- stroke属性に`currentColor`を使用しているため、親要素のテキストカラーを継承する
- stroke-linecap、stroke-linejoin属性に`round`を指定し、角を丸く描画
- このアイコンはクエリコンポーネントのページネーションで使用され、「次のページへ」ボタンに表示される

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | chevron-right.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/chevron-right.blade.php` | SVG要素の構造と属性のマージ方法を理解 |

**読解のコツ**: `{{ $attributes }}` はBladeコンポーネントの属性マージ機能で、呼び出し側で指定されたclass等の属性をSVG要素に追加する。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | query.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/query.blade.php` | ページネーションコントロール内でのアイコン使用方法 |

**主要処理フロー**:
1. **169行目**: `<x-laravel-exceptions-renderer::icons.chevron-right class="w-3 h-3" />` でアイコンコンポーネントを呼び出し
2. **163-170行目**: ボタン要素内にアイコンを配置し、`@click="next()"` でページネーション処理を実行

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | 例外レンダラーのメイン画面構成 |
| 3-2 | layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | レイアウトの基本構造とCSS/JS読み込み |

**主要処理フロー**:
- **17行目（show.blade.php）**: `<x-laravel-exceptions-renderer::query :queries="$exception->applicationQueries()" />` でクエリコンポーネントを呼び出し

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

```
show.blade.php（メイン画面）
    │
    └─ query.blade.php（クエリ一覧コンポーネント）
           │
           ├─ chevron-left.blade.php（前ページボタン用アイコン）
           │
           ├─ chevron-right.blade.php（次ページボタン用アイコン）★本コンポーネント
           │
           ├─ chevrons-left.blade.php（最初のページボタン用アイコン）
           │
           └─ chevrons-right.blade.php（最後のページボタン用アイコン）
```

### データフロー図

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

$attributes ───▶ chevron-right.blade.php ───▶ SVGインラインHTML
(class等)         (属性マージ・描画)           (<svg>要素)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| chevron-right.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/chevron-right.blade.php` | テンプレート | 右シェブロンアイコンSVGの定義 |
| query.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/query.blade.php` | テンプレート | クエリ一覧表示（アイコンの使用元） |
| show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | テンプレート | 例外レンダラーメイン画面 |
| layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | テンプレート | 例外レンダラーのレイアウト |
