# 画面設計書 37-例外レンダラーレイアウト

## 概要

本ドキュメントは、Laravelフレームワークの例外レンダラーレイアウト（layout.blade.php）の画面設計書である。例外表示画面の基本構造を定義するコンポーネントテンプレートについて記述する。

### 本画面の処理概要

例外レンダラーレイアウトは、例外表示画面全体のHTML構造を定義する共通レイアウトコンポーネントである。HTML5のドキュメント構造、メタタグ、CSS/JavaScriptの読み込み、およびコンテンツ領域を提供する。

**業務上の目的・背景**：例外表示画面は複数のコンポーネントで構成されており、これらを統一的なHTML構造の中に配置する必要がある。本レイアウトは、ダークモード対応、レスポンシブデザイン、Laravelファビコン、CSS/JavaScript読み込みなど、例外表示画面に必要な基盤を提供する。

**画面へのアクセス方法**：この部品は直接アクセスされるものではなく、show.blade.phpから`<x-laravel-exceptions-renderer::layout>`コンポーネントとして呼び出される。

**主要な操作・処理内容**：
1. HTML5ドキュメント構造の提供
2. メタタグ（charset, viewport）の設定
3. ページタイトルの設定（config('app.name')を使用）
4. LaravelファビコンのインラインSVG埋め込み
5. Renderer::css()によるスタイルシート読み込み
6. Renderer::js()によるJavaScript読み込み
7. `$slot`コンテンツの配置

**画面遷移**：本部品は画面遷移の概念を持たない。例外表示画面のコンテナとして機能する。

**権限による表示制御**：特になし。例外表示画面で使用される共通レイアウトである。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | 例外表示画面の基本構造描画 |

## 画面種別

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

## URL/ルーティング

N/A（コンポーネントのため、URLルーティングは存在しない）

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| $slot | 入力 | string | Yes | レイアウト内に配置するコンテンツ |

## 表示項目

| 項目名 | 説明 | 表示形式 |
|--------|------|----------|
| ページタイトル | アプリケーション名 | HTMLタイトル |
| ファビコン | LaravelロゴSVG | data URI形式のSVGアイコン |
| メインコンテンツ | $slotの内容 | HTML |

## イベント仕様

### 1-レンダリング処理

Bladeコンポーネントとしてレンダリングされる際、以下の処理が行われる。

**処理フロー**:
1. Renderer::css()でCSSを`<style>`タグとして出力
2. `$slot`コンテンツをbody内に配置
3. Renderer::js()でJavaScriptを`<script>`タグとして出力
4. Viteホットリロードスクリプトを条件付きで出力

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

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

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

## メッセージ仕様

本部品はメッセージを出力しない。

## 例外処理

| 例外 | 条件 | 対応 |
|------|------|------|
| CSS/JSファイル未発見 | distディレクトリが存在しない場合 | ファイル読み込みエラー |

## 備考

- `@use`ディレクティブでRendererクラスをインポート
- ダークモード対応（`scheme-light-dark`クラス使用）
- レスポンシブデザイン対応（viewport設定）
- Tailwind CSSのユーティリティクラスを使用
- Viteホットリロード対応（開発時のみ）

---

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

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

### 推奨読解順序

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

レイアウトコンポーネントの入出力を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | HTML5構造、$slot配置位置（19行目） |

**読解のコツ**: `@use`ディレクティブはPHPの`use`文と同様にクラスをインポートする。Rendererクラスの静的メソッドでCSS/JSを出力している。

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

CSS/JSファイルの読み込み処理を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Renderer.php | `src/Illuminate/Foundation/Exceptions/Renderer/Renderer.php` | `css()`メソッド（108-111行目）と`js()`メソッド（118-131行目） |

**主要処理フロー**:
1. **108-111行目**: `css()`メソッドでdist/styles.cssを`<style>`タグとして出力
2. **118-131行目**: `js()`メソッドでdist/scripts.jsを`<script>`タグとして出力
3. **124-126行目**: Viteホットファイルが存在する場合、Viteスクリプトを追加

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

レイアウトコンポーネントがどこで使用されているかを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | 1行目で`<x-laravel-exceptions-renderer::layout>`として使用 |

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

```
show.blade.php
    │
    └─ <x-laravel-exceptions-renderer::layout>
           │
           └─ layout.blade.php
                  │
                  ├─ @use('Illuminate\Foundation\Exceptions\Renderer\Renderer')
                  │
                  ├─ <head>
                  │      ├─ <meta charset="utf-8" />
                  │      ├─ <meta name="viewport" />
                  │      ├─ <title>{{ config('app.name') }}</title>
                  │      ├─ <link rel="icon" /> (inline SVG)
                  │      └─ {!! Renderer::css() !!}
                  │
                  └─ <body>
                         ├─ {{ $slot }}
                         └─ {!! Renderer::js() !!}
```

### データフロー図

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

$slot コンテンツ ───▶ layout.blade.php ───▶ 完全なHTML文書
                          │
                          ├─ Renderer::css() ───▶ <style>タグ
                          │
                          └─ Renderer::js() ───▶ <script>タグ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | テンプレート | 例外表示共通レイアウト |
| Renderer.php | `src/Illuminate/Foundation/Exceptions/Renderer/Renderer.php` | ソース | CSS/JS出力メソッド提供 |
| show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | テンプレート | レイアウト使用元 |
| styles.css | `src/Illuminate/Foundation/resources/exceptions/renderer/dist/styles.css` | スタイルシート | コンパイル済みCSS |
| scripts.js | `src/Illuminate/Foundation/resources/exceptions/renderer/dist/scripts.js` | スクリプト | コンパイル済みJS |
