# 画面設計書 59-空状態コンポーネント

## 概要

本ドキュメントは、Laravel例外レンダラーにおける空状態（Empty State）コンポーネントの画面設計書である。データが存在しない場合にプレースホルダーメッセージを表示するUIコンポーネントを定義する。

### 本画面の処理概要

本コンポーネントは、Laravel例外レンダラーの一部として、データが空または存在しない場合に「データがない」ことを視覚的に伝えるプレースホルダーを表示する役割を担う。

**業務上の目的・背景**：例外詳細画面では、リクエストボディ、クエリ情報、ルートパラメータなど、状況によって存在しないデータがある。これらが空の場合に何も表示しないと、ユーザーは「データがない」のか「読み込み中」なのか「表示エラー」なのか判断できない。本コンポーネントは、コメント形式（// メッセージ）でデータが空であることを明示し、ユーザーの混乱を防ぐ。

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

**主要な操作・処理内容**：
1. messageプロパティで表示メッセージを受け取り
2. コメント形式（// プレフィックス）でメッセージを表示
3. 枠線付きパネル内に中央揃えで表示

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | データなし状態の描画 |

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

### 入力項目（Props）

| 項目名 | 属性名 | 型 | 必須 | 説明 |
|--------|--------|------|------|------|
| メッセージ | message | string | 必須 | 表示するプレースホルダーメッセージ |

### 出力項目

| 項目名 | 説明 |
|--------|------|
| 空状態表示 | コメント形式のメッセージ（例：// NO REQUEST BODY） |

## 表示項目

| 項目名 | 表示形式 | スタイル |
|--------|----------|----------|
| コンテナ | div要素 | bg-white/[2%] border rounded-md w-full p-5 |
| コメントプレフィックス | "// " | text-neutral-400（薄い色） |
| メッセージ | 大文字テキスト | uppercase text-sm text-center font-mono |

## イベント仕様

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

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

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

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

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

## メッセージ仕様

| 使用箇所 | メッセージ例 |
|----------|-------------|
| リクエストボディ | No request body |
| SQLクエリ | No queries |
| ルートパラメータ | No route parameters |

## 例外処理

本コンポーネントに例外処理は不要（純粋な表示コンポーネント）。

## 備考

- Tailwind CSSを使用したスタイリング
- ダークモード完全対応
- コードコメント形式（//）はプログラマーにとって親しみやすい表現
- uppercaseで視認性を向上
- shadow-xsで微細な影を追加し立体感を表現

---

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

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

### 推奨読解順序

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

このコンポーネントは5行のみの非常にシンプルなBladeテンプレートである。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | empty-state.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/empty-state.blade.php` | messageプロパティとコメント形式表示 |

**主要処理フロー**:
- **行1**: @props(['message'])でプロパティ定義
- **行3**: divコンテナのスタイル定義
- **行4**: コメントプレフィックス（// ）を薄い色で表示
- **行4**: {{ $message }}でメッセージを挿入

**スタイル解説**:
```
div.empty-state
├── bg-white/[2%]     : 半透明白背景
├── border            : 枠線
├── border-neutral-200: ライトモードの枠線色
├── dark:border-neutral-800: ダークモードの枠線色
├── rounded-md        : 角丸
├── w-full            : 幅100%
├── p-5               : パディング
├── uppercase         : 大文字変換
├── text-sm           : 小さめのテキスト
├── text-center       : 中央揃え
├── font-mono         : 等幅フォント
└── shadow-xs         : 微細な影
```

#### Step 2: 使用箇所を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | request-body.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/request-body.blade.php` | 空リクエストボディ時の使用 |

**request-body.blade.phpでの使用例**:
```blade
@if($body)
    <x-laravel-exceptions-renderer::syntax-highlight :code="$body" language="json" />
@else
    <x-laravel-exceptions-renderer::empty-state message="No request body" />
@endif
```

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

```
request-body.blade.php
    │
    └─ @if($body)
           │
           ├─ true  → syntax-highlight.blade.php
           │
           └─ false → empty-state.blade.php
                          │
                          └─ message="No request body"
```

### データフロー図

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

message ─────────────▶ empty-state.blade.php ─────▶ // {MESSAGE}
"No request body"              │
                        uppercase変換
                        コメント形式
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| empty-state.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/empty-state.blade.php` | テンプレート | 空状態表示 |
| request-body.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/request-body.blade.php` | テンプレート | 使用元 |
