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

## 概要

本ドキュメントは、Payload CMSの管理画面における「404エラー画面」の設計仕様を定義するものである。リクエストされたページが見つからない場合に表示されるエラー画面である。

### 本画面の処理概要

404エラー画面は、ユーザーが存在しないページにアクセスした場合に表示されるエラーページである。シンプルなエラーメッセージと、ダッシュボードへ戻るナビゲーションを提供する。

**業務上の目的・背景**：CMS管理画面において、ユーザーが誤ったURLを入力したり、削除されたページにアクセスしたりした場合に、適切なフィードバックを提供することは重要である。この画面は、ユーザーに対して「ページが見つからない」ことを明確に伝え、ダッシュボードに戻る手段を提供することで、ユーザーが迷子にならないようにする。

**画面へのアクセス方法**：存在しないURLにアクセスした場合に自動的に表示される。また、コード内で `notFound()` 関数が呼び出された場合にも表示される。

**主要な操作・処理内容**：
1. エラーメッセージの表示（「ページが見つかりません」）
2. ダッシュボードへ戻るボタン

**画面遷移**：
- 遷移元：任意の存在しないURL、notFound()呼び出し
- 遷移先：ダッシュボード画面

**権限による表示制御**：ログイン済みユーザーにはDefaultTemplate（サイドバー付き）で表示。未ログインまたは管理画面アクセス権がない場合は、テンプレートなしのシンプルな表示。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 30 | Admin UI | 主機能 | ページが見つからない場合のエラー表示 |
| 31 | Next.js統合 | 補助機能 | Next.jsのnotFound処理との統合 |

## 画面種別

エラー

## URL/ルーティング

`/{adminRoute}/not-found` および任意の存在しないURL

パラメータ:
- `{adminRoute}`: 管理画面のベースパス（デフォルト: `/admin`）

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 必須 | 説明 |
|--------|----------|---------|------|------|
| marginTop | 入力 | 'large' | No | 上部マージンのサイズ（props） |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|---------|------|
| タイトル | string | 「何も見つかりませんでした」メッセージ |
| 説明文 | string | 「申し訳ありませんが、お探しのページは見つかりませんでした」 |
| ダッシュボードボタン | Button | ダッシュボードへ戻るボタン |

## イベント仕様

### 1-エラーページ表示

404エラー発生時にエラーメッセージを表示する。

**処理フロー**：
1. Next.jsの `notFound()` が呼び出される、または存在しないURLにアクセス
2. ユーザーのログイン状態と権限を確認
3. ログイン済み + 管理画面アクセス権あり：DefaultTemplate で表示
4. 未ログインまたは権限なし：シンプルなNotFoundClientのみ表示
5. ステップナビゲーションを「Not Found」に設定

### 2-ダッシュボードへ戻る

ダッシュボードボタンをクリックしてダッシュボードに遷移する。

**処理フロー**：
1. 「ダッシュボードへ戻る」ボタンをクリック
2. adminRoute（管理画面のベースパス）に遷移

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

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

この画面はエラー表示のみであり、データベースへのアクセスは発生しない。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| general.notFound | タイトル | Not Found | ページタイトル・ステップナビ |
| general.nothingFound | 見出し | 何も見つかりませんでした | エラー見出し |
| general.sorryNotFound | 説明 | 申し訳ありませんが、お探しのページは見つかりませんでした | エラー説明文 |
| general.backToDashboard | ボタン | ダッシュボードへ戻る | ボタンラベル |

## 例外処理

| 例外状態 | 対応 |
|---------|------|
| 未ログイン | シンプルなエラーページのみ表示 |
| 管理画面アクセス権なし | シンプルなエラーページのみ表示 |

## 備考

- NotFoundPageはサーバーコンポーネント、NotFoundClientはクライアントコンポーネント
- NotFoundViewはAdminViewServerPropsを受け取るView用関数
- generateNotFoundViewMetadataでページメタデータ（タイトル）を生成
- useStepNav() でステップナビゲーションを設定
- Buttonコンポーネントは `el="link"` でリンクとして機能
- marginTop プロップで上部マージンを調整可能（'large' など）

---

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

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

### 推奨読解順序

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

404エラー画面はシンプルな構造であるが、2つのコンポーネントの役割を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.tsx | `packages/next/src/views/NotFound/index.tsx` | NotFoundPage, NotFoundViewの役割分担 |
| 1-2 | index.client.tsx | `packages/next/src/views/NotFound/index.client.tsx` | NotFoundClientのprops（行9-11） |

**読解のコツ**: NotFoundPageはページレベルのサーバーコンポーネント、NotFoundViewはView用、NotFoundClientが実際のUI。

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

404エラー画面のエントリーポイントとなるファイルを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.tsx | `packages/next/src/views/NotFound/index.tsx` | NotFoundPage関数の構造 |

**主要処理フロー**:
1. **行14-29**: generateNotFoundViewMetadata() でメタデータ生成
2. **行31-45**: propsの取得（config, params, searchParams）
3. **行46-72**: initReq() でリクエスト初期化
4. **行74-76**: 未ログインまたは権限なしの場合、シンプルなNotFoundClient
5. **行78-94**: ログイン済み＋権限ありの場合、DefaultTemplate内にNotFoundClient

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

実際のUIを表示するクライアントコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.client.tsx | `packages/next/src/views/NotFound/index.client.tsx` | NotFoundClientコンポーネント |

**主要処理フロー**:
- **行14**: useStepNav() でステップナビ設定用フック取得
- **行15**: useTranslation() で翻訳フック取得
- **行17-21**: useConfig() で管理画面ルート取得
- **行23-28**: useEffect でステップナビを設定
- **行30-45**: UIレンダリング（タイトル、説明、ボタン）

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

```
404発生
    │
    ├─ NotFoundPage (ページレベル)
    │      │
    │      ├─ generateNotFoundViewMetadata() - メタデータ生成
    │      │
    │      ├─ initReq() - リクエスト初期化
    │      │
    │      ├─ 権限チェック
    │      │   ├─ !user || !canAccessAdmin → NotFoundClient (シンプル)
    │      │   └─ user && canAccessAdmin → DefaultTemplate + NotFoundClient
    │      │
    │      └─ NotFoundClient
    │             ├─ useStepNav() - ナビ設定
    │             ├─ useTranslation() - 翻訳
    │             └─ Button (to={adminRoute})
    │
    └─ NotFoundView (View用)
           └─ NotFoundClient (marginTop="large")
```

### データフロー図

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

404エラー発生 ───▶ NotFoundPage ───▶ エラー画面表示
  (notFound())           │
                         ├─▶ initReq()
                         │      └─▶ user, permissions
                         │
                         ├─▶ 権限チェック
                         │      ├─▶ 未ログイン → シンプル表示
                         │      └─▶ ログイン済み → DefaultTemplate
                         │
                         └─▶ NotFoundClient
                                ├─▶ useStepNav() → パンくず設定
                                └─▶ UI表示
                                       ├─▶ タイトル
                                       ├─▶ 説明文
                                       └─▶ ダッシュボードボタン
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/next/src/views/NotFound/index.tsx` | ソース | 404画面のサーバーコンポーネント |
| index.client.tsx | `packages/next/src/views/NotFound/index.client.tsx` | ソース | 404画面のクライアントコンポーネント |
| index.scss | `packages/next/src/views/NotFound/index.scss` | スタイル | 404画面のスタイル定義 |
| DefaultTemplate | `packages/next/src/templates/Default/index.tsx` | ソース | 管理画面のデフォルトテンプレート |
| Button | `packages/ui/src/elements/Button/index.tsx` | ソース | ボタンコンポーネント |
| Gutter | `packages/ui/src/elements/Gutter/index.tsx` | ソース | ガターコンポーネント |
| useStepNav | `packages/ui/src/hooks/useStepNav.ts` | ソース | ステップナビゲーションフック |
| useTranslation | `packages/ui/src/hooks/useTranslation.ts` | ソース | 翻訳フック |
