# 画面設計書 26-メールテーブル

## 概要

本ドキュメントは、LaravelフレームワークのHTMLメールテンプレートにおけるテーブルコンポーネント（table.blade.php）の設計仕様を定義するものである。

### 本画面の処理概要

本コンポーネントは、HTMLメール内で表形式のデータを表示するための部品である。Markdown形式で記述されたテーブルをHTMLテーブルに変換して表示する。

**業務上の目的・背景**：請求明細、商品リスト、スケジュール表など、構造化されたデータをメール内で分かりやすく表示するためにテーブルコンポーネントは不可欠である。Markdownのテーブル構文を使用することで、開発者は直感的にテーブルを記述でき、コンポーネントが自動的に適切なHTML構造とスタイリングを適用する。

**画面へのアクセス方法**：本コンポーネントは直接アクセスするものではなく、Markdownメール内で`@component('mail::table')`として使用される。または、Bladeコンポーネント構文で`<x-mail::table>`として呼び出す。

**主要な操作・処理内容**：
1. div要素でテーブル領域を定義（tableクラス適用）
2. $slotの内容をMarkdown::parse()でパースしてHTMLテーブルに変換
3. Markdownのテーブル構文がHTMLの<table>タグに変換される
4. 変換されたHTMLをdiv内に出力

**画面遷移**：テーブルコンポーネント自体には遷移機能はない。テーブル内にリンクが含まれる場合、それらをクリックすると該当ページに遷移する。

**権限による表示制御**：テーブルコンポーネント自体には権限制御はない。表示内容はスロットとして渡されるコンテンツによって決定される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 28 | メール管理 | 主機能 | HTMLメールの表形式データ表示 |

## 画面種別

コンポーネント（メールテンプレート部品）

## URL/ルーティング

該当なし（Bladeコンポーネントとして使用）

コンポーネント名: `mail::table`

## 入出力項目

| 項目名 | 型 | 必須 | 説明 |
|--------|------|------|------|
| $slot | string | Yes | テーブルコンテンツ（Markdownテーブル形式） |

## 表示項目

| 要素 | 表示内容 | 備考 |
|------|---------|------|
| テーブル | $slotの内容（Markdownパース済み） | HTMLテーブルとして出力 |

## イベント仕様

### 1-テーブル内リンククリック

テーブルセル内にリンクが含まれている場合、クリックすると該当URLに遷移する。

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

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

該当なし（表示専用コンポーネント）

## メッセージ仕様

該当なし

## 例外処理

| 状態 | 処理内容 |
|------|---------|
| $slot未指定 | 空のdiv要素として出力 |
| 不正なMarkdownテーブル構文 | そのままテキストとして出力 |

## 備考

- div要素でラップすることで、テーブルにカスタムスタイルを適用可能
- Markdown::parse()はTableExtensionを使用してテーブル構文を解析
- CSSクラス`table`はテーマファイルで定義
- Markdownテーブル構文例:
  ```markdown
  | Header 1 | Header 2 |
  |----------|----------|
  | Cell 1   | Cell 2   |
  ```

---

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

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

### 推奨読解順序

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

まず、MarkdownテーブルがどのようにHTMLに変換されるかを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Markdown.php | `src/Illuminate/Mail/Markdown.php` | parse()メソッドとTableExtension（行142-172, 188-189） |

**読解のコツ**: `Markdown::converter()`メソッドでTableExtensionが追加されており（行189）、Markdownのテーブル構文をサポートしている。

#### Step 2: テンプレート構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | table.blade.php | `src/Illuminate/Mail/resources/views/html/table.blade.php` | シンプルな構造（行1-3） |

**主要処理フロー**:
- **行1**: `<div class="table">`でテーブルコンテナ開始
- **行2**: `{{ Illuminate\Mail\Markdown::parse($slot) }}`でMarkdownパース・出力
- **行3**: `</div>`でコンテナ終了

#### Step 3: テキストメール版との比較

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | text/table.blade.php | `src/Illuminate/Mail/resources/views/text/table.blade.php` | テキスト版の実装（行1） |

**読解のコツ**: テキスト版は`{{ $slot }}`のみの単純な出力。テキストメールではMarkdownテーブルをそのまま表示。

#### Step 4: TableExtensionの理解

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Markdown.php | `src/Illuminate/Mail/Markdown.php` | converter()メソッド（行182-192） |

**主要処理フロー**:
- **行188**: CommonMarkCoreExtensionを追加
- **行189**: TableExtensionを追加（テーブル構文サポート）
- **行191**: MarkdownConverterを返却

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

```
Markdownメールテンプレート
    │
    └─ @component('mail::table') または <x-mail::table>
           │
           └─ table.blade.php
                  │
                  └─ <div class="table">
                         │
                         └─ Markdown::parse($slot)
                                │
                                └─ MarkdownConverter
                                       │
                                       ├─ CommonMarkCoreExtension
                                       │
                                       └─ TableExtension
                                              │
                                              └─ <table>...</table>
```

### データフロー図

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

Markdownテーブル ──▶ Markdown::parse() ──────▶ HTMLテーブル
                           │
                           │
| Col1 | Col2 |     MarkdownConverter      <table>
|------|------|            │                 <thead>
| A    | B    |     TableExtension             <tr>
                           │                     <th>Col1</th>
                           │                     <th>Col2</th>
                           ▼                   </tr>
                    <div class="table">      </thead>
                      <table>...</table>     <tbody>
                    </div>                     ...
                                             </tbody>
                                           </table>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| table.blade.php | `src/Illuminate/Mail/resources/views/html/table.blade.php` | テンプレート | テーブル部品本体（HTML版） |
| text/table.blade.php | `src/Illuminate/Mail/resources/views/text/table.blade.php` | テンプレート | テーブル部品本体（テキスト版） |
| Markdown.php | `src/Illuminate/Mail/Markdown.php` | ソース | Markdownパース処理（TableExtension含む） |
| Mailable.php | `src/Illuminate/Mail/Mailable.php` | ソース | メール送信の基底クラス |
