# 画面設計書 62-チェックアイコン

## 概要

本ドキュメントは、Laravelフレームワークの例外レンダラーで使用されるチェックアイコンコンポーネントの設計仕様を記述したものである。

### 本画面の処理概要

チェックアイコンは、例外レンダラー画面において操作の成功や完了を示す視覚的インジケーターとして機能するSVGアイコンコンポーネントである。チェックマーク（レ点）を描画し、ユーザーに処理の成功を認識させる役割を持つ。主にクリップボードへのコピー完了時のフィードバックとして使用される。

**業務上の目的・背景**：開発時のデバッグ作業において、例外情報をMarkdown形式でクリップボードにコピーする機能が提供されている。コピー操作の成功をユーザーに明確に伝えるため、チェックアイコンが成功インジケーターとして使用される。視覚的なフィードバックにより、ユーザーは操作が正常に完了したことを即座に認識でき、ユーザーエクスペリエンスが向上する。

**画面へのアクセス方法**：このアイコンは単独で表示されるものではなく、例外レンダラー画面（show.blade.php）内のトップバーコンポーネント（topbar.blade.php）およびリクエストURLコンポーネント（request-url.blade.php）で、コピー成功時に動的に表示される。初期状態ではコピーアイコンが表示され、コピー成功後3秒間チェックアイコンに切り替わる。

**主要な操作・処理内容**：
1. SVGエレメントの描画処理によるチェックマーク表示
2. `$attributes`を通じた動的な属性（class、style等）の適用
3. `currentColor`を使用した親要素の文字色継承による柔軟なカラーリング
4. Alpine.jsの`x-show`ディレクティブによる条件付き表示制御

**画面遷移**：本コンポーネントは独立した画面ではなく、例外レンダラーのコピー機能付きコンポーネント内で部品として使用される。コピーボタンクリック → copied状態がtrueに変更 → チェックアイコン表示（3秒間）→ コピーアイコンに戻る、という流れで動作する。

**権限による表示制御**：本コンポーネント自体に権限制御は存在しない。ただし、親画面である例外レンダラーは通常、開発環境（APP_DEBUG=true）でのみ表示される。本番環境では例外詳細画面自体が非表示となるため、結果的にこのアイコンも表示されない。

## 関連機能

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

## 画面種別

部品（コンポーネント）

## URL/ルーティング

本コンポーネントは単独のルーティングを持たない。例外レンダラーの一部として以下の条件で呼び出される：
- 例外発生時に自動的に表示される例外画面内で使用
- Bladeコンポーネントとして `<x-laravel-exceptions-renderer::icons.check />` の形式で呼び出し

## 入出力項目

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| $attributes | 入力 | Illuminate\View\ComponentAttributeBag | 任意 | SVG要素に適用する追加属性（class、style等） |

## 表示項目

| 項目 | 説明 |
|------|------|
| SVGアイコン | 24x24ピクセルのチェックマーク（レ点）を描画 |

### SVG仕様詳細

| 属性 | 値 | 説明 |
|------|-----|------|
| width | 未指定（親から継承） | アイコンの幅 |
| height | 未指定（親から継承） | アイコンの高さ |
| viewBox | 0 0 24 24 | SVGのビューボックス設定 |
| fill | none | 塗りつぶしなし（ストロークのみ） |
| stroke | currentColor | 親要素の文字色を継承 |
| stroke-width | 2 | 線の太さ |
| stroke-linecap | round | 線端を丸く |
| stroke-linejoin | round | 線の接続部を丸く |

## イベント仕様

### 1-描画イベント

本コンポーネントはBladeテンプレートエンジンによりレンダリングされる。Alpine.jsによる条件付き表示制御と連携する。

**処理フロー**：
1. 親コンポーネント（topbar等）でコピーボタンがクリックされる
2. `copyToClipboard()`関数が実行され、`copied`状態がtrueになる
3. `x-show="copied"`によりチェックアイコンが表示される
4. 3秒後にsetTimeoutにより`copied`がfalseに戻り、アイコンが非表示になる

### 2-表示切替イベント

| トリガー | 条件 | 動作 |
|---------|------|------|
| コピー成功 | copied === true | チェックアイコン表示 |
| タイムアウト（3秒後） | copied === false | チェックアイコン非表示 |

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

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

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

本コンポーネントはUIの描画のみを行い、データベースへのアクセスは行わない。

## メッセージ仕様

本コンポーネントはメッセージを表示しない。視覚的な成功インジケーターとしてのみ機能する。親コンポーネントでは「Copied to clipboard」というテキストメッセージと併せて表示される。

## 例外処理

| 例外状況 | 動作 |
|---------|------|
| 属性の不正値 | Bladeエンジンによりエラーハンドリングされる |
| テンプレートファイル未検出 | ViewNotFoundExceptionが発生 |

## 備考

- アイコンは`currentColor`を使用しているため、親要素の`color`プロパティを継承する
- ストロークベースのシンプルなチェックマークデザイン
- 実際の使用時は通常、`class="w-3 h-3 text-emerald-500"`のようなTailwindクラスと共に使用される
- Alpine.jsの`x-show`と`x-cloak`ディレクティブと組み合わせて使用される

---

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

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

### 推奨読解順序

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

チェックアイコンはシンプルなSVGコンポーネントであり、Bladeコンポーネントの属性バッグ（`$attributes`）がデータ構造の中心となる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ComponentAttributeBag.php | `src/Illuminate/View/ComponentAttributeBag.php` | Bladeコンポーネントで使用される属性バッグの仕組みを理解する |

**読解のコツ**: Bladeコンポーネントでは`{{ $attributes }}`構文により、親から渡された全ての属性をHTMLタグに展開できる。

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

アイコンが使用される起点となる例外レンダラーの構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | 例外レンダラーのメインテンプレート。topbarとrequest-urlコンポーネントの配置を確認 |
| 2-2 | layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | レイアウトコンポーネント。CSS/JSの読み込みとスロット構造を理解 |

**主要処理フロー**:
1. **3行目**: topbar.blade.phpコンポーネントの呼び出し
2. **9行目**: header.blade.php内でrequest-url.blade.phpが呼び出される

#### Step 3: アイコンを使用するコンポーネントを理解する

チェックアイコンが実際に使用されている箇所を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | topbar.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/topbar.blade.php` | **43行目**でチェックアイコンを使用。Markdownコピー成功時に表示 |
| 3-2 | request-url.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/request-url.blade.php` | **38行目**でチェックアイコンを使用。URLコピー成功時に表示 |

**主要処理フロー**:
- **topbar.blade.php 9-19行目**: Alpine.jsの`x-data`でcopied状態とcopyToClipboard関数を定義
- **topbar.blade.php 43行目**: `<x-laravel-exceptions-renderer::icons.check class="w-3 h-3 text-emerald-500" x-show="copied" />`
- **request-url.blade.php 4-14行目**: Alpine.jsの`x-data`でcopied状態とcopyToClipboard関数を定義
- **request-url.blade.php 38行目**: `<x-laravel-exceptions-renderer::icons.check class="w-3 h-3 text-emerald-500" x-show="copied" />`

#### Step 4: アイコンコンポーネント本体を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | check.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/check.blade.php` | アイコンの実装本体。SVGパス定義とattributes展開を確認 |

**主要処理フロー**:
- **1行目**: SVG要素の開始。fill="none"、stroke="currentColor"、viewBox定義と`{{ $attributes }}`による属性展開
- **2行目**: チェックマーク本体のパス定義。`d="M5 13l4 4L19 7"`で左下から右上へのチェックマーク

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

```
例外発生
    │
    ├─ Renderer::render()
    │      │
    │      └─ show.blade.php
    │             │
    │             ├─ layout.blade.php（レイアウト）
    │             │
    │             ├─ topbar.blade.php
    │             │      ├─ icons/copy.blade.php（初期表示）
    │             │      └─ icons/check.blade.php ★（コピー成功時）
    │             │
    │             └─ header.blade.php
    │                    └─ request-url.blade.php
    │                           ├─ icons/copy.blade.php（初期表示）
    │                           └─ icons/check.blade.php ★（コピー成功時）
```

### データフロー図

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

ユーザー操作              Alpine.js状態管理              ブラウザ表示
  │                          │                            │
  ├─ コピーボタン ──────────▶│                            │
  │   クリック               │                            │
  │                          │                            │
  │                    copyToClipboard()                  │
  │                          │                            │
  │                    copied = true ──────────────────▶│── チェックアイコン
  │                          │                            │   表示（emerald-500）
  │                          │                            │
  │                    setTimeout(3000)                   │
  │                          │                            │
  │                    copied = false ─────────────────▶│── コピーアイコン
  │                          │                            │   表示に戻る
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| check.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/check.blade.php` | テンプレート | チェックアイコンSVGの定義 |
| copy.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/copy.blade.php` | テンプレート | コピーアイコンSVGの定義（ペアで使用） |
| show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | テンプレート | 例外レンダラーのメインビュー |
| topbar.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/topbar.blade.php` | テンプレート | トップバー表示（チェックアイコン使用） |
| request-url.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/request-url.blade.php` | テンプレート | リクエストURL表示（チェックアイコン使用） |
| layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | テンプレート | 例外レンダラーの共通レイアウト |
| Renderer.php | `src/Illuminate/Foundation/Exceptions/Renderer/Renderer.php` | ソース | 例外レンダラーのメインクラス |
