# 画面設計書 56-セクションコンテナ

## 概要

本ドキュメントは、Laravel例外レンダラーにおけるセクションコンテナコンポーネントの画面設計書である。例外詳細画面の各セクションをラップし、一貫したレイアウトとスタイリングを提供するUIコンポーネントを定義する。

### 本画面の処理概要

本コンポーネントは、Laravel例外レンダラーの一部として、画面内の各コンテンツセクションを統一的なスタイルでラップする役割を担う。

**業務上の目的・背景**：例外詳細画面は複数のセクション（トップバー、ヘッダー、トレース、リクエスト情報等）で構成されている。これらのセクションに一貫したレイアウト（最大幅、中央揃え、パディング、破線ボーダー）を適用することで、視覚的な統一感を保ち、情報の区切りを明確にする。本コンポーネントにより、各セクションのスタイリングを個別に記述する必要がなくなり、メンテナンス性が向上する。

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

**主要な操作・処理内容**：
1. section要素としてコンテンツをラップ
2. 最大幅制限（max-w-7xl）と中央揃え（mx-auto）
3. レスポンシブパディング（p-4 sm:p-14）
4. 破線ボーダー（border-dashed）による視覚的区切り
5. $slotによる子コンテンツの挿入

**画面遷移**：本コンポーネントは例外表示画面内のレイアウト要素であり、画面遷移には関与しない。

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

## 関連機能

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

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

### 入力項目（Props）

| 項目名 | 属性名 | 型 | 必須 | 説明 |
|--------|--------|------|------|------|
| 追加クラス | class | string | 任意 | $attributes->merge()経由で追加可能 |
| 子コンテンツ | $slot | Blade slot | 任意 | コンテナ内に表示するコンテンツ |

### 出力項目

本コンポーネントは入力された子コンテンツをラップして出力する。

## 表示項目

| 項目名 | 表示形式 | スタイル |
|--------|----------|----------|
| コンテナ | section要素 | w-full max-w-7xl mx-auto p-4 sm:p-14 |
| 境界線 | 破線ボーダー | border-x border-dashed border-neutral-300 |
| 子コンテンツ | $slot | 挿入されたコンテンツ |

## イベント仕様

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

本コンポーネントに例外処理は不要（純粋なレイアウトコンポーネント）。

## 備考

- Tailwind CSSを使用したスタイリング
- ダークモード完全対応（dark:border-white/[9%]）
- $attributes->merge()でclass属性の追加・上書きが可能
- semantic HTMLのsection要素を使用

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | section-container.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/section-container.blade.php` | section要素とスタイル定義 |

**主要処理フロー**:
- **行1**: section要素の開始
- **行2**: $attributes->merge()でデフォルトクラスと追加クラスをマージ
- **行3**: `w-full max-w-7xl mx-auto p-4 sm:p-14` - 幅制限と中央揃え、パディング
- **行3**: `border-x border-dashed` - 左右に破線ボーダー
- **行4**: {{ $slot }}で子コンテンツを挿入
- **行5**: section要素の終了

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

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

**show.blade.phpでの使用例**:
- 行2-4: トップバーをラップ
- 行8-10: ヘッダーをラップ
- 行14-18: トレースとクエリをラップ
- 行22-30: リクエスト情報をラップ
- 行35-37: ASCII Spotlightをラップ

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

```
show.blade.php
    │
    ├─ section-container.blade.php（トップバー用）
    │      └─ topbar.blade.php
    │
    ├─ section-container.blade.php（ヘッダー用）
    │      └─ header.blade.php
    │
    ├─ section-container.blade.php（トレース用）
    │      ├─ trace.blade.php
    │      └─ query.blade.php
    │
    ├─ section-container.blade.php（リクエスト情報用）
    │      ├─ request-header.blade.php
    │      ├─ request-body.blade.php
    │      ├─ routing.blade.php
    │      └─ routing-parameter.blade.php
    │
    └─ section-container.blade.php（フッター用）
           └─ laravel-ascii-spotlight.blade.php
```

### データフロー図

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

子コンテンツ ────────▶ section-container ────────▶ ラップされたHTML
（$slot）                    │
                    $attributes->merge()
                    （クラス追加）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| section-container.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/section-container.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` | テンプレート | 親レイアウト |
