# 画面設計書 58-バッジコンポーネント

## 概要

本ドキュメントは、Laravel例外レンダラーにおけるバッジコンポーネントの画面設計書である。ステータス表示、HTTPメソッド、エラーコード等をラベル形式で表示する汎用的なUIコンポーネントを定義する。

### 本画面の処理概要

本コンポーネントは、Laravel例外レンダラーの一部として、各種ステータスや分類を視覚的に表現するバッジを描画する役割を担う。

**業務上の目的・背景**：例外詳細画面では、HTTPステータスコード、リクエストメソッド、エラータイプなど、様々なカテゴリ情報を素早く識別できることが重要である。本コンポーネントは、type（default/success/primary/error/alert/white）とvariant（soft/solid）の組み合わせにより、6種類のタイプと2種類のバリアントで合計12パターンのスタイルを提供する。これにより、情報の重要度や種類を色で直感的に伝えることができる。

**画面へのアクセス方法**：開発環境（APP_DEBUG=true）でアプリケーション実行中に例外が発生すると、自動的に例外詳細画面が表示される。本コンポーネントは各所で使用される。

**主要な操作・処理内容**：
1. typeとvariantプロパティに基づくスタイルの決定
2. 基本クラスと条件付きクラスの組み合わせ
3. $slotによるコンテンツ（テキスト、アイコン等）の挿入
4. ダークモード対応のスタイリング

**画面遷移**：本コンポーネントは純粋な表示要素であり、画面遷移には関与しない。

**権限による表示制御**：本コンポーネントはAPP_DEBUG=trueの開発環境でのみ表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | ステータスバッジの描画 |

## 画面種別

部品（UIコンポーネント）

## URL/ルーティング

本コンポーネントは直接ルーティングされるものではなく、他のコンポーネントから呼び出されて表示される。

## 入出力項目

### 入力項目（Props）

| 項目名 | 属性名 | 型 | 必須 | デフォルト値 | 説明 |
|--------|--------|------|------|-------------|------|
| タイプ | type | string | 任意 | 'default' | バッジの色タイプ |
| バリアント | variant | string | 任意 | 'soft' | スタイルバリアント |
| 子コンテンツ | $slot | Blade slot | 任意 | - | バッジ内に表示するコンテンツ |

### タイプ別スタイル

| type | 意味 | soft（ライト） | solid |
|------|------|----------------|-------|
| default | 標準 | グレー背景 | 濃いグレー |
| success | 成功 | 緑背景 | 濃い緑 |
| primary | プライマリ | 青背景 | 濃い青 |
| error | エラー | 赤背景 | 濃い赤 |
| alert | 警告 | 黄背景 | 濃い黄 |
| white | 白 | 白背景 | 黒背景白文字 |

## 表示項目

| 項目名 | 表示形式 | スタイル |
|--------|----------|----------|
| バッジコンテナ | div要素 | inline-flex h-6 min-w-5 rounded-md px-1.5 |
| テキスト | $slot | font-mono uppercase text-xs/none |
| アイコン | SVG | [&_svg]:size-2.5 |

## イベント仕様

本コンポーネントは表示専用であり、ユーザーイベントは発生しない。

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

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

本コンポーネントはデータベース操作を行わない（表示専用コンポーネント）。

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

## メッセージ仕様

本コンポーネントは固定メッセージを使用しない。$slotで渡されたコンテンツがそのまま表示される。

## 例外処理

| 状態 | 処理内容 |
|------|----------|
| 未知のtype | defaultタイプのスタイルが適用される |
| 未知のvariant | softバリアントのスタイルが適用される |

## 備考

- Tailwind CSSを使用したスタイリング
- ダークモード完全対応（各タイプにdark:プレフィックスのスタイル定義）
- PHPの配列でスタイルマッピングを定義し、柔軟な拡張が可能
- [&_svg]:size-2.5で子SVGアイコンのサイズを自動調整

---

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

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

### 推奨読解順序

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

まず、スタイル定義の配列構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | badge.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/badge.blade.php` | $types配列と$variants配列 |

**読解のコツ**:
- $types配列（行6-31）: 6種類のtype × 2種類のvariant = 12パターンのスタイル定義
- $variants配列（行33-36）: solidバリアント用の追加スタイル
- 最終的なクラスは$baseClasses + $typeClasses + $variantClassesの結合

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | badge.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/badge.blade.php` | 全48行のスタイル計算ロジック |

**主要処理フロー**:
- **行1**: @props(['type' => 'default', 'variant' => 'soft'])でプロパティ定義
- **行3-4**: $baseClassesで共通スタイル定義
- **行6-31**: $types配列でtype別×variant別のスタイル定義
- **行33-36**: $variants配列でvariant別の追加スタイル
- **行38-39**: 指定されたtype/variantに対応するクラスを取得
- **行41**: implode()でクラスを結合
- **行45-47**: div要素に$attributes->merge()でクラス適用

**スタイル計算の流れ**:
```php
$classes = implode(' ', [
    $baseClasses,      // 共通スタイル（高さ、パディング等）
    $typeClasses,      // type × variantのスタイル（背景色等）
    $variantClasses    // variantの追加スタイル（solidの場合の文字色等）
]);
```

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

```
badge.blade.php
    │
    ├─ @props（type, variant取得）
    │
    ├─ @php（スタイル計算）
    │      ├─ $types[$type][$variant] → $typeClasses
    │      └─ $variants[$variant] → $variantClasses
    │
    └─ {{ $slot }}（コンテンツ挿入）
```

### データフロー図

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

type ─────────────▶ $types[$type][$variant] ─────▶ $typeClasses
                            │
variant ───────────▶ $variants[$variant] ────────▶ $variantClasses
                            │
$baseClasses ──────────────────────────────────────▶ 結合
                            │
$slot ─────────────────────────────────────────────▶ コンテンツ挿入
```

### 使用例

```blade
{{-- エラーバッジ（solid） --}}
<x-laravel-exceptions-renderer::badge type="error" variant="solid">
    <x-laravel-exceptions-renderer::icons.alert class="w-2.5 h-2.5" />
    500
</x-laravel-exceptions-renderer::badge>

{{-- HTTPメソッドバッジ（soft） --}}
<x-laravel-exceptions-renderer::badge type="success">
    POST
</x-laravel-exceptions-renderer::badge>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| badge.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/badge.blade.php` | テンプレート | バッジコンポーネント |
| http-method.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/http-method.blade.php` | テンプレート | 使用元（メソッドバッジ） |
| request-url.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/request-url.blade.php` | テンプレート | 使用元（ステータスバッジ） |
