# 画面設計書 53-リクエストURL

## 概要

本ドキュメントは、Laravel例外レンダラーにおけるリクエストURL表示コンポーネントの画面設計書である。開発時のデバッグ画面において、例外発生時のリクエストURL、HTTPステータスコード、HTTPメソッドを統合的に表示し、URLのクリップボードコピー機能を提供するUIコンポーネントを定義する。

### 本画面の処理概要

本コンポーネントは、Laravel例外レンダラーの一部として、例外発生時のHTTPリクエストに関する主要な情報（URL、ステータスコード、メソッド）を一目で確認できるバー形式で表示する役割を担う。

**業務上の目的・背景**：エラーが発生したリクエストのURLは、問題の再現や原因特定において最も基本的な情報である。本コンポーネントは、HTTPステータスコード（エラーバッジ）、HTTPメソッド（GET/POST等）、完全なURLを一行に集約し、開発者が即座にエラーコンテキストを把握できるようにする。さらにURLのコピー機能により、エラー報告やログ調査の効率を向上させる。

**画面へのアクセス方法**：開発環境（APP_DEBUG=true）でアプリケーション実行中に例外が発生すると、自動的に例外詳細画面が表示される。本コンポーネントはヘッダーコンポーネントなど上位コンポーネントから呼び出されて表示される。

**主要な操作・処理内容**：
1. HTTPステータスコードのバッジ表示（エラータイプ：赤色solid）
2. HTTPメソッドの色分けバッジ表示（http-methodコンポーネント使用）
3. リクエストURLの表示（長い場合はtruncate）
4. コピーボタンによるURLのクリップボードコピー（Alpine.js使用）
5. コピー成功時のチェックアイコン表示（3秒間）

**画面遷移**：本コンポーネントは例外表示画面内に埋め込まれて表示される。単独での画面遷移は発生しない。

**権限による表示制御**：本コンポーネントはAPP_DEBUG=trueの開発環境でのみ表示される。本番環境では例外レンダラー自体が無効化されるため、セキュリティ上の問題はない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 53 | HTTPリクエスト | 補助機能 | リクエストURL情報の取得 |
| 36 | ビューファクトリ | 主機能 | リクエストURLの描画処理 |

## 画面種別

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

## URL/ルーティング

本コンポーネントは直接ルーティングされるものではなく、例外発生時に表示される例外詳細画面の一部として描画される。

## 入出力項目

### 入力項目（Props）

| 項目名 | 属性名 | 型 | 必須 | 説明 |
|--------|--------|------|------|------|
| 例外オブジェクト | exception | Exception | 必須 | 例外レンダラーのExceptionオブジェクト |
| リクエストオブジェクト | request | Request | 必須 | LaravelのHTTPリクエストオブジェクト |

### 出力項目

| 項目名 | 説明 |
|--------|------|
| ステータスコードバッジ | HTTPステータスコード（例：500） |
| HTTPメソッドバッジ | GET/POST/PUT/DELETE等 |
| URL | リクエストの完全URL |
| コピーボタン | クリックでURLをクリップボードにコピー |

## 表示項目

| 項目名 | 表示形式 | スタイル |
|--------|----------|----------|
| コンテナ | バー形式 | bg-white rounded-lg h-10 shadow-xs |
| ステータスバッジ | 赤色solid | badge type="error" variant="solid" |
| メソッドバッジ | メソッド別色 | http-methodコンポーネント |
| URL | テキスト | truncate text-sm font-light |
| コピーボタン | アイコン | rounded-md w-6 h-6 |

## イベント仕様

### 1-コピーボタンクリック

コピーボタンをクリックすると、Alpine.jsのcopyToClipboard()メソッドが実行され、URLがクリップボードにコピーされる。

**処理フロー**：
1. ユーザーがコピーボタンをクリック
2. window.copyToClipboard()でURLをクリップボードにコピー
3. copiedフラグをtrueに設定
4. コピーアイコンがチェックアイコン（緑色）に切り替わる
5. 3秒後にcopiedフラグがfalseに戻り、コピーアイコンに戻る

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

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

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

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

## メッセージ仕様

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

## 例外処理

| 状態 | 処理内容 |
|------|----------|
| コピー失敗時 | console.errorでエラーログ出力 |

## 備考

- Alpine.jsを使用した状態管理とイベントハンドリング
- Tailwind CSSを使用したスタイリング
- ダークモード完全対応（dark:プレフィックスによる切り替え）
- x-cloakディレクティブでAlpine初期化前のフラッシュを防止
- Tippy.jsによるURLのツールチップ表示

---

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

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

### 推奨読解順序

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

まず、プログラム間で受け渡されるデータ構造を理解することが重要。このコンポーネントはExceptionオブジェクトとRequestオブジェクトを受け取る。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Exception.php | `src/Illuminate/Foundation/Exceptions/Renderer/Exception.php` | httpStatusCode()メソッド（行104-107）、request()メソッド（行191-194） |

**読解のコツ**: httpStatusCode()はSymfonyのFlattenExceptionからステータスコードを取得。request()はIlluminateのRequestオブジェクトを返す。

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

処理の起点となるファイル・関数を特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | request-url.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/request-url.blade.php` | @propsでexceptionとrequestを受け取る |

**主要処理フロー**:
1. **行1**: @props(['exception', 'request'])でプロパティ定義
2. **行3-15**: x-dataでAlpine.jsコンポーネント定義、copyToClipboard()メソッド定義
3. **行19-22**: badgeコンポーネントでステータスコード表示
4. **行23**: http-methodコンポーネントでメソッド表示
5. **行24-27**: URL表示
6. **行29-39**: コピーボタンとアイコン切り替え

#### Step 3: 依存コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | badge.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/badge.blade.php` | typeとvariantに応じたスタイル適用 |
| 3-2 | http-method.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/http-method.blade.php` | メソッド別の色分け |
| 3-3 | icons/alert.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/alert.blade.php` | アラートアイコンSVG |
| 3-4 | icons/copy.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/copy.blade.php` | コピーアイコンSVG |
| 3-5 | icons/check.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/check.blade.php` | チェックアイコンSVG |

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

```
request-url.blade.php
    │
    ├─ Exception::httpStatusCode()
    │
    ├─ Request::method()
    │
    ├─ Request::fullUrl()
    │
    ├─ badge.blade.php（ステータスコード）
    │      └─ icons/alert.blade.php
    │
    ├─ http-method.blade.php
    │      ├─ badge.blade.php
    │      └─ icons/globe.blade.php
    │
    ├─ icons/copy.blade.php
    │
    └─ icons/check.blade.php
```

### データフロー図

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

Exception ───────────▶ httpStatusCode() ────────────▶ ステータスバッジ
                              │
Request ─────────────▶ method() ────────────────────▶ メソッドバッジ
                              │
Request ─────────────▶ fullUrl() ───────────────────▶ URL表示
                              │
                       [Alpine.js]
                              │
ユーザークリック ─────▶ copyToClipboard() ──────────▶ クリップボード
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| request-url.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/request-url.blade.php` | テンプレート | URL表示UI |
| Exception.php | `src/Illuminate/Foundation/Exceptions/Renderer/Exception.php` | ソース | ステータスコード取得 |
| 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` | テンプレート | メソッド表示 |
| alert.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/alert.blade.php` | テンプレート | アラートアイコン |
| copy.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/copy.blade.php` | テンプレート | コピーアイコン |
| check.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/check.blade.php` | テンプレート | チェックアイコン |
