# 画面設計書 57-セパレータ

## 概要

本ドキュメントは、Laravel例外レンダラーにおけるセパレータ（区切り線）コンポーネントの画面設計書である。例外詳細画面の各セクション間に視覚的な区切りを提供する水平破線を表示するUIコンポーネントを定義する。

### 本画面の処理概要

本コンポーネントは、Laravel例外レンダラーの一部として、画面内のセクション間に視覚的な区切り線を描画する役割を担う。

**業務上の目的・背景**：例外詳細画面は多くの情報（ヘッダー、トレース、リクエスト情報等）を含んでおり、これらを明確に区切ることで可読性が向上する。破線スタイルのセパレータは、完全な分離ではなく緩やかなセクション区切りを表現し、ページ全体の一体感を保ちながら情報を整理する。高さゼロの要素に絶対配置のボーダーを使用することで、レイアウトに影響を与えずに区切り線を表現している。

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

**主要な操作・処理内容**：
1. 高さゼロの親要素の作成
2. 絶対配置による破線ボーダーの描画
3. 負のtop値（-1px）による微調整

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | セクション間区切り線の描画 |

## 画面種別

部品（装飾コンポーネント）

## URL/ルーティング

本コンポーネントは直接ルーティングされるものではなく、例外詳細画面の装飾要素として使用される。

## 入出力項目

### 入力項目（Props）

| 項目名 | 属性名 | 型 | 必須 | 説明 |
|--------|--------|------|------|------|
| 追加クラス | class | string | 任意 | $attributes->merge()経由で追加可能 |

### 出力項目

本コンポーネントは水平の破線を出力する。

## 表示項目

| 項目名 | 表示形式 | スタイル |
|--------|----------|----------|
| 外部コンテナ | div要素 | h-0 w-full relative |
| 内部ボーダー | div要素 | absolute top-[-1px] left-0 right-0 border-t border-dashed |
| ボーダー色 | 破線 | border-neutral-300（ライト）、dark:border-white/[9%]（ダーク） |

## イベント仕様

本コンポーネントは純粋な装飾要素であり、ユーザーイベントは発生しない。

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

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

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

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

## メッセージ仕様

本コンポーネントは固定メッセージを使用しない。

## 例外処理

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

## 備考

- Tailwind CSSを使用したスタイリング
- ダークモード完全対応（dark:border-white/[9%]）
- 高さゼロ（h-0）と絶対配置（absolute）の組み合わせでレイアウトに影響を与えない
- top: -1pxで隣接要素との間隔を微調整
- $attributes->merge()でclass属性の追加が可能（例：-mt-5 -z-10）

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | separator.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/separator.blade.php` | 高さゼロの親と絶対配置のボーダー |

**主要処理フロー**:
- **行1**: 外部div要素、h-0 w-full relativeで高さゼロの相対位置コンテナ
- **行2**: 内部div要素、absoluteで絶対配置、top-[-1px]で微調整
- **行2**: border-t border-dashedで上部に破線ボーダー

**CSSテクニック解説**:
```
外部div (h-0 w-full relative)
├── 高さ: 0px（レイアウトスペースを消費しない）
├── 幅: 100%（親要素いっぱい）
└── position: relative（内部要素の基準点）

内部div (absolute top-[-1px] left-0 right-0)
├── position: absolute（親から独立した配置）
├── top: -1px（1px上にずらす）
├── left: 0, right: 0（左右いっぱいに広がる）
└── border-t border-dashed（上部に破線）
```

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | separatorの使用例 |

**show.blade.phpでの使用例**:
- 行6: トップバーとヘッダーの間
- 行12: ヘッダーとトレースの間（class="-mt-5 -z-10"で重なり調整）
- 行20: トレースとリクエスト情報の間
- 行32: リクエスト情報とフッターの間

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

```
show.blade.php
    │
    ├─ section-container（トップバー）
    │
    ├─ separator.blade.php ◀──────────
    │
    ├─ section-container（ヘッダー）
    │
    ├─ separator.blade.php（-mt-5 -z-10）◀──
    │
    ├─ section-container（トレース）
    │
    ├─ separator.blade.php ◀──────────
    │
    ├─ section-container（リクエスト）
    │
    └─ separator.blade.php ◀──────────
```

### データフロー図

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

なし ────────────────▶ separator.blade.php ────────▶ 破線区切り
                              │
                    $attributes->merge()
                    （オプション: -mt-5等）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| separator.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/separator.blade.php` | テンプレート | セパレータ |
| show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | テンプレート | 使用元 |
| section-container.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/section-container.blade.php` | テンプレート | 隣接コンポーネント |
