# 通知設計書 20-YAMLエクスポート失敗

## 概要

本ドキュメントは、YAMLスキーマの生成処理が失敗した際に表示されるUI通知（トースト）の設計書である。

### 本通知の処理概要

ERD（Entity-Relationship Diagram）ビューアーのエクスポート機能で「Copy YAML」を選択し、スキーマからYAML形式への変換処理（yamlSchemaDeparser）が失敗した場合にエラー通知をトースト形式で表示する機能である。

**業務上の目的・背景**：データベース設計者や開発者がYAMLをエクスポートしようとした際に、スキーマデータの不整合やパーサーの内部エラーなどの理由でYAML生成が失敗することがある。この通知は、ユーザーにエクスポート操作が失敗したことを即座に伝え、問題の原因を把握して対処を促すために必要である。クリップボードコピー失敗とは異なり、YAML生成自体が失敗した場合に表示される。

**通知の送信タイミング**：ExportDropdownコンポーネントで「Copy YAML」メニューアイテムをクリックし、yamlSchemaDeparser関数がエラー（Result.Err）を返した時点で即座にトースト通知が表示される。

**通知の受信者**：エクスポート操作を実行したユーザー。操作を実行しているブラウザセッション上にのみ表示される。

**通知内容の概要**：タイトル「Export failed」とステータス「error」で赤色のトースト通知が表示される。説明文には「Failed to generate YAML: {エラーメッセージ}」が表示される。

**期待されるアクション**：ユーザーは通知を確認後、スキーマデータの状態を確認するか、再度エクスポートを試みるか、システム管理者に連絡することが期待される。

## 通知種別

UI通知（トースト）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（クライアントサイド即時表示） |
| 優先度 | 高（エラー通知） |
| リトライ | なし（UI通知のため再送は不要） |

### 送信先決定ロジック

操作を実行したユーザーのブラウザセッションに対して即座に表示される。ToastContextを通じて管理されるグローバルなトースト表示機能により、現在アクティブなウィンドウに通知が表示される。

## 通知テンプレート

### UI通知の場合

| 項目 | 内容 |
|-----|------|
| タイトル | Export failed |
| 説明 | Failed to generate YAML: {error.message} |
| ステータス | error |
| 表示位置 | header（画面上部） |

### 本文テンプレート

```
タイトル: Export failed
説明: Failed to generate YAML: {error.message}
ステータス: error
```

### 添付ファイル

該当なし（UI通知のため添付ファイルは存在しない）

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| error.message | YAML生成エラーの詳細メッセージ | yamlSchemaDeparser関数のエラーオブジェクト | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | ExportDropdownの「Copy YAML」クリック | yamlSchemaDeparser()がResult.Errを返した場合 | YAML生成処理の失敗時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| YAML生成成功時 | yamlResult.isOk()の場合は本通知は表示されない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[Copy YAMLメニュークリック] --> B{Clipboard API利用可能?}
    B -->|No| C[Clipboard unavailable通知]
    B -->|Yes| D[yamlSchemaDeparser実行]
    D --> E{yamlResult.isErr()?}
    E -->|Yes| F[console.error実行]
    F --> G[toast関数呼び出し]
    G --> H[Export failedトースト表示]
    H --> I[処理終了]
    E -->|No| J[クリップボードへ書き込み]
    J --> K[成功/失敗通知]
```

## データベース参照・更新仕様

### 参照テーブル一覧

本通知はクライアントサイドのみで動作するため、直接のデータベース参照は行わない。

### 更新テーブル一覧

本通知はデータベース更新を行わない。

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| YAML生成エラー | yamlSchemaDeparserがResult.Errを返した場合 | エラーメッセージを表示し、コンソールにエラーログを出力、処理を中断 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0回（ユーザーによる手動再試行が必要） |
| リトライ間隔 | なし |
| リトライ対象エラー | なし |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

24時間対応（UI通知のため時間帯制限なし）

## セキュリティ考慮事項

- エラーメッセージにはYAML生成エラーの内容が含まれる（通常は技術的なエラー情報のみ）
- スキーマデータの内部構造に関するエラーが表示される可能性がある
- ユーザーの操作によってのみ処理が実行される

## 備考

- 本通知はRadix UI Toastコンポーネントを使用して実装されている
- トーストは一定時間後に自動的に非表示となる
- yamlSchemaDeparserはneverthrowのResult型を返し、エラーハンドリングが型安全に行われる
- コンソールにもエラーログが出力される
- YAML生成失敗後、クリップボードへの書き込み処理は実行されない（早期リターン）
- erd-coreパッケージとappパッケージの両方に同様の実装が存在する

---

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

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

### 推奨読解順序

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

トースト通知のオプション型定義を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型（title, description, status）の定義を確認 |

**読解のコツ**: ToastOptionsのstatusフィールドが'error'の場合にエラースタイルが適用される。

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

ExportDropdownコンポーネントからYAML生成処理と通知が発火する流れを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExportDropdown.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/ExportDropdown/ExportDropdown.tsx` | handleCopyYaml関数でのYAML生成エラーハンドリング（行69-78） |

**主要処理フロー**:
1. **行57-102**: handleCopyYaml関数の定義
2. **行67**: yamlSchemaDeparserでYAML生成を試行
3. **行69**: yamlResult.isErr()でエラーチェック
4. **行70**: エラーオブジェクトの取得
5. **行71**: console.errorでエラーログ出力
6. **行72-76**: toast関数でエラー通知を生成
7. **行77**: return文で処理を中断（クリップボードへの書き込みはスキップ）

#### Step 3: YAML生成処理を理解する

YAMLスキーマを生成するパーサーの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | yamlSchemaDeparser.ts | `frontend/packages/schema/src/deparser/yamlSchemaDeparser.ts` | スキーマからYAML文字列を生成するロジックとエラーケース |

**主要処理フロー**:
- スキーマオブジェクトを受け取りYAML形式の文字列をResult型で返す
- 生成に失敗した場合はResult.Err(Error)を返す

#### Step 4: トースト表示機構を理解する

トースト通知の表示ロジックを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ToastProvider、error状態のスタイル適用（行32） |
| 4-2 | useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | useToastフックの実装 |

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

```
ExportDropdown (handleCopyYaml)
    |
    +-- navigator.clipboard チェック
    |
    +-- yamlSchemaDeparser(schema.current)
            |
            +-- isErr():
                    |
                    +-- console.error()
                    |
                    +-- toast({ title: 'Export failed', status: 'error' })
                    |       |
                    |       +-- ToastContext.createHeaderToastItem()
                    |               |
                    |               +-- Toast (Radix UI Toast)
                    |
                    +-- return (処理中断)
```

### データフロー図

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

schema.current    yamlSchemaDeparser         Result<string, Error>
(スキーマ     --->       (YAML生成)       --->      |
オブジェクト)                                       |
                                              [isErr()の場合]
                                                    |
                                              Result.Err(error)
                                                    |
                                              +-----+-----+
                                              |           |
                                       console.error()  toast()
                                                           |
                                                           v
                                               [トースト通知表示]
                                               title: "Export failed"
                                               description: "Failed to generate YAML: {error.message}"
                                               status: "error"
                                                           |
                                                           v
                                                   [処理中断・return]
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ExportDropdown.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/ExportDropdown/ExportDropdown.tsx` | ソース | ERDビューアーのエクスポートドロップダウン |
| ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | ソース | アプリ側のエクスポートドロップダウン（同様の実装） |
| yamlSchemaDeparser.ts | `frontend/packages/schema/src/deparser/yamlSchemaDeparser.ts` | ソース | YAML生成（Result型を返す） |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト通知コンポーネント |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トースト表示フック |
| Toast.module.css | `frontend/packages/ui/src/components/Toast/Toast.module.css` | スタイル | トースト通知のスタイル定義 |
