# 画面設計書 191-404エラー画面

## 概要

本ドキュメントは、Medusa Admin Dashboardの404エラー画面の設計仕様を記述したものである。存在しないURLにアクセスした際に表示されるエラーページであり、ユーザーをダッシュボードのホーム画面へ誘導する機能を持つ。

### 本画面の処理概要

この画面は、ユーザーが存在しないページにアクセスした際に表示されるエラー画面であり、適切なエラーメッセージを表示してユーザーを正しいページへ誘導する。

**業務上の目的・背景**：管理画面において、ユーザーが誤ったURLにアクセスした場合や、削除されたリソースのURLにアクセスした場合に、システムがエラー状態であることを明確に伝え、ユーザーが次に取るべきアクションを示すことで、ユーザー体験の低下を防ぐ。ブラウザの標準的な404エラーページではなく、アプリケーションのデザインシステムに沿ったカスタムエラーページを表示することで、ブランドの一貫性を維持する。

**画面へのアクセス方法**：この画面はユーザーが意図的にアクセスする画面ではなく、以下の状況で自動的に表示される：
1. 存在しないURLを直接入力した場合
2. ブックマークが古くなり、該当するページが存在しなくなった場合
3. 外部リンクから無効なURLにアクセスした場合
4. ルーターの `path: "*"` にマッチするすべての未定義パスへのアクセス時

**主要な操作・処理内容**：
1. エラーメッセージの表示（「404 - There is no page at this address」）
2. 説明文の表示（「The page you are looking for does not exist.」）
3. ダッシュボードホームへの遷移ボタンの表示

**画面遷移**：
- この画面への遷移元：存在しないURLへのアクセス（任意の画面から）
- この画面からの遷移先：ダッシュボードホーム画面（`/`）

**権限による表示制御**：この画面は認証状態に関わらず表示される公開画面である。認証済みユーザーも未認証ユーザーも同じ画面が表示される。ただし、ルーティング構成により、認証済みエリア内の無効なパスと公開エリア内の無効なパスの両方でこの画面が使用される可能性がある。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 98 | ダッシュボード | 主機能 | エラーページの表示とホームへのナビゲーション |

## 画面種別

エラー画面（404 Not Found）

## URL/ルーティング

- パスパターン: `*`（すべての未定義パスにマッチ）
- ルート定義場所: `packages/admin/dashboard/src/dashboard-app/routes/get-route.map.tsx` (行1896-1898)
- 遅延読み込み: `lazy: () => import("../../routes/no-match")`

## 入出力項目

この画面は入力項目を持たない静的な表示画面である。

| 項目 | 種別 | 説明 |
|------|------|------|
| なし | - | この画面は入力フォームを持たない |

## 表示項目

| 項目名 | 型 | 説明 | 多言語対応 |
|--------|-----|------|-----------|
| アイコン | コンポーネント | ExclamationCircleアイコン（警告アイコン） | - |
| タイトル | テキスト | 「404 - There is no page at this address」 | i18nキー: errorBoundary.notFoundTitle |
| メッセージ | テキスト | 「The page you are looking for does not exist.」 | i18nキー: errorBoundary.noMatchMessage |
| ボタン | ボタン | 「Back to dashboard」 | i18nキー: errorBoundary.backToDashboard |

## イベント仕様

### 1-「Back to dashboard」ボタンクリック

**トリガー**: ボタンクリック

**処理内容**:
1. React Routerの`<Link>`コンポーネントにより、ルートパス（`/`）へのクライアントサイドナビゲーションを実行
2. ブラウザのURL履歴にホーム画面への遷移が追加される

**遷移先**: ダッシュボードホーム画面（`/`）

**データベース操作**: なし（クライアントサイドのみの処理）

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | この画面はデータベースへのアクセスを行わない |

この画面は完全にクライアントサイドで動作し、APIコールやデータベースへのアクセスは発生しない。

## メッセージ仕様

| メッセージ種別 | i18nキー | デフォルト（英語） | 表示条件 |
|--------------|---------|------------------|---------|
| エラータイトル | errorBoundary.notFoundTitle | 404 - There is no page at this address | 常時表示 |
| エラーメッセージ | errorBoundary.noMatchMessage | The page you are looking for does not exist. | 常時表示 |
| ボタンラベル | errorBoundary.backToDashboard | Back to dashboard | 常時表示 |

## 例外処理

この画面自体がエラー状態を表示するための画面であるため、追加の例外処理は必要ない。

| 例外状況 | 対応 |
|---------|------|
| i18n翻訳の読み込み失敗 | i18nキーが直接表示される（フォールバック） |
| ホームへの遷移失敗 | ブラウザのURL入力欄に `/` を直接入力することで対処可能 |

## 備考

- **デザインシステム**: この画面は`@medusajs/ui`のデザインシステムコンポーネント（`Button`, `Text`）と`@medusajs/icons`のアイコン（`ExclamationCircle`）を使用している
- **レスポンシブ対応**: Flexboxを使用した中央配置レイアウトにより、すべての画面サイズで適切に表示される
- **関連画面**: `ErrorBoundary`コンポーネント（APIエラー用）と類似のデザインを共有しているが、表示されるコンテキストが異なる
- **TODOコメント**: コード内に「TODO: Add 404 page」というコメントがあり、将来的な拡張が予定されている可能性がある
- **国際化**: すべてのテキストはreact-i18nextを通じて多言語化されており、サポートされているすべての言語で適切に表示される

---

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

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

### 推奨読解順序

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

この画面は外部からのデータを扱わないため、データ構造は最小限である。i18nの翻訳キーが主要なデータ構造となる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | en.json | `packages/admin/dashboard/src/i18n/translations/en.json` | errorBoundaryセクション（行353-363）の翻訳キーとデフォルト値を確認 |

**読解のコツ**: 翻訳ファイルのerrorBoundaryオブジェクト内に定義されている3つのキー（notFoundTitle, noMatchMessage, backToDashboard）が、この画面で使用される。

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

ルーティング設定からコンポーネントがどのように読み込まれるかを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | get-route.map.tsx | `packages/admin/dashboard/src/dashboard-app/routes/get-route.map.tsx` | 行1896-1898: path: "*" でのルート定義を確認 |
| 2-2 | index.ts | `packages/admin/dashboard/src/routes/no-match/index.ts` | NoMatchコンポーネントのエクスポートを確認 |

**主要処理フロー**:
1. **行1896**: `path: "*"` - すべての未定義パスにマッチ
2. **行1897**: `lazy: () => import("../../routes/no-match")` - 遅延読み込みによるコンポーネントインポート

#### Step 3: メインコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | no-match.tsx | `packages/admin/dashboard/src/routes/no-match/no-match.tsx` | NoMatchコンポーネントの実装全体 |

**主要処理フロー**:
- **行8**: `const { t } = useTranslation()` - i18n翻訳関数の取得
- **行10-11**: 翻訳キーを使用してタイトルとメッセージを取得
- **行14-35**: JSXによるUI構造の定義
- **行30-32**: `<Link to="/">`によるホームへのナビゲーション

#### Step 4: 関連コンポーネントを理解する

類似のエラー表示を行うErrorBoundaryコンポーネントとの比較。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | error-boundary.tsx | `packages/admin/dashboard/src/components/utilities/error-boundary/error-boundary.tsx` | APIエラーハンドリングとの違いを確認 |

**主要処理フロー**:
- **行9**: `useRouteError()` - ルートエラーの取得（NoMatchでは使用しない）
- **行15-21**: 401エラー時のログイン画面へのリダイレクト
- **行36-53**: HTTPステータスコードに基づくメッセージ切り替え

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

```
React Router
    │
    └─ get-route.map.tsx (path: "*")
           │
           └─ lazy(() => import("../../routes/no-match"))
                  │
                  └─ index.ts
                         │
                         └─ no-match.tsx (NoMatch Component)
                                │
                                ├─ useTranslation() (react-i18next)
                                │      └─ en.json (errorBoundary translations)
                                │
                                ├─ ExclamationCircle (@medusajs/icons)
                                │
                                ├─ Button, Text (@medusajs/ui)
                                │
                                └─ Link (react-router-dom)
                                       └─ to="/" (Home Navigation)
```

### データフロー図

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

URL (無効なパス) ───▶ React Router          ───▶ NoMatch Component
                      (path: "*" マッチ)
                             │
                             ▼
                      useTranslation()      ───▶ 翻訳済みテキスト
                             │
                             ▼
                      JSX Rendering         ───▶ 画面表示
                             │
                             ▼
                      User Click            ───▶ Navigation to "/"
                      ("Back to dashboard")
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| no-match.tsx | `packages/admin/dashboard/src/routes/no-match/no-match.tsx` | ソース | メインコンポーネント |
| index.ts | `packages/admin/dashboard/src/routes/no-match/index.ts` | ソース | コンポーネントエクスポート |
| get-route.map.tsx | `packages/admin/dashboard/src/dashboard-app/routes/get-route.map.tsx` | ソース | ルーティング設定 |
| en.json | `packages/admin/dashboard/src/i18n/translations/en.json` | 設定 | 英語翻訳ファイル |
| error-boundary.tsx | `packages/admin/dashboard/src/components/utilities/error-boundary/error-boundary.tsx` | ソース | 関連エラーハンドリングコンポーネント |
