# 画面設計書 38-404 Not Found

## 概要

本ドキュメントはInvenTreeシステムにおける404 Not Found画面（NotFound）の設計仕様を記載したものである。本画面はユーザーが存在しないURLにアクセスした場合に表示されるエラーページである。

### 本画面の処理概要

本画面はReact Routerで定義されていないパス（存在しないURL）にアクセスした場合に表示される画面である。ユーザーに「ページが見つからない」ことを明確に伝え、ホーム画面への復帰手段を提供する。

**業務上の目的・背景**：ユーザーがブックマークした古いURL、誤ったURL入力、削除されたリソースへのアクセスなど、存在しないページへのアクセスは日常的に発生する。本画面は、このような場合にユーザーに適切なフィードバックを提供し、システムの正常なページへナビゲートする手段を提供することで、ユーザー体験の悪化を防ぐ。

**画面へのアクセス方法**：本画面はユーザーが意図的にアクセスするものではなく、React Routerのワイルドカードルート（`*`）として設定されており、定義されていないパスにアクセスした場合に自動的に表示される。

**主要な操作・処理内容**：
1. 「Page Not Found」タイトルと「This page does not exist」メッセージを確認する
2. 「Return to the index page」ボタンでホーム画面へ戻る

**画面遷移**：
- 遷移元：存在しないURLへのアクセス
- 遷移先：ホーム画面（`/`）

**権限による表示制御**：本画面は認証状態に関係なく表示される。404ページは誰でもアクセス可能である必要があるため、権限チェックは行わない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | グローバル設定管理 | 主機能 | ページ未検出エラーの表示 |

## 画面種別

エラー表示画面（404 Not Found）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `*` | すべての未定義パスにマッチ |

router.tsxでの定義：
```typescript
<Route path='*' element={<NotFound />} errorElement={<ErrorPage />} />
```

## 入出力項目

本画面は表示専用であり、ユーザー入力項目はない。

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| title | string | "Page Not Found"（固定） |
| message | string | "This page does not exist"（固定） |
| エラーアイコン | - | 赤色の警告アイコン（IconExclamationCircle） |
| 戻るボタン | - | "Return to the index page"ボタン（緑色アウトライン） |

## イベント仕様

### 1-ページ読み込み

**トリガー**：存在しないURLへのアクセス時

**処理内容**：
1. React Routerがワイルドカードルートにマッチ
2. NotFoundコンポーネントがレンダリング
3. GenericErrorPageコンポーネントで404画面を表示

### 2-戻るボタンクリック

**トリガー**：「Return to the index page」ボタンをクリック

**処理内容**：
- navigate('/')でホーム画面へ遷移

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

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

本画面はデータベース操作を行わない。

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

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|-----------|----------|
| エラー | Page Not Found | 常に表示（タイトル） |
| エラー | This page does not exist | 常に表示（メッセージ） |

## 例外処理

本画面自体が例外ハンドリング画面であるため、この画面内でのエラー発生時には、さらにErrorPageが表示される（errorElement設定による）。

| 例外状況 | 表示内容 | 対応処理 |
|---------|---------|---------|
| NotFoundコンポーネント内エラー | ErrorPage | errorElementへフォールバック |

## 備考

- 本画面はGenericErrorPageコンポーネントを再利用して実装されている
- ErrorPage（37番）との違いは、こちらは404専用で固定メッセージを表示する点
- LanguageContextでラップされているため多言語対応（翻訳キー使用）
- React Routerのルート定義で最初に記述されており、他のルートにマッチしない場合にフォールバックする

---

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

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

### 推奨読解順序

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

処理の起点となるページコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | NotFound.tsx | `src/frontend/src/components/errors/NotFound.tsx` | メインコンポーネント全体（5-11行目） |

**主要処理フロー**:
1. **5行目**: NotFound関数コンポーネント定義
2. **6-10行目**: GenericErrorPageに固定のtitleとmessageを渡して表示

**読解のコツ**: NotFoundは非常にシンプルで、GenericErrorPageのラッパーとして機能している

#### Step 2: 共通エラーページコンポーネントを理解する

GenericErrorPageの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | GenericErrorPage.tsx | `src/frontend/src/components/errors/GenericErrorPage.tsx` | 共通エラーページUI（18-73行目） |

**主要処理フロー**:
- **29行目**: useNavigate()でナビゲーション関数取得
- **31-71行目**: LanguageContextでラップしたカード形式のエラーUI
- **36-43行目**: タイトルセクション（アイコン + タイトルテキスト）
- **45-53行目**: メッセージセクション（メッセージ + オプションのステータスコード）
- **55-67行目**: アクションセクション（ホームへ戻るボタン）

#### Step 3: ルーティング設定を理解する

NotFoundがどこで使用されているかを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | router.tsx | `src/frontend/src/router.tsx` | ワイルドカードルート設定（151行目） |

**主要処理フロー**:
- **151行目**: `<Route path='*' element={<NotFound />} errorElement={<ErrorPage />} />`
- ワイルドカード（*）は他のすべてのルートにマッチしなかった場合にフォールバック

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

```
[存在しないURLアクセス]
    │
    ▼
React Router
    │
    ├─ 定義済みルートとマッチング
    │      └─ マッチなし
    │
    └─ ワイルドカードルート (*) にマッチ
           │
           ▼
       NotFound
           │
           └─ GenericErrorPage
                  │
                  ├─ title: "Page Not Found"
                  │
                  ├─ message: "This page does not exist"
                  │
                  ├─ LanguageContext ─── 多言語対応
                  │
                  ├─ Card ─── エラー情報表示
                  │      ├─ IconExclamationCircle
                  │      ├─ title
                  │      └─ message
                  │
                  └─ Button ─── ホームへ戻る
                         └─ navigate('/')
```

### データフロー図

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

未定義URL        ───▶ React Router            ───▶ ワイルドカードルート
/nonexistent/          ルートマッチング
                           │
                           ▼
                     NotFound
                           │
                           ├─ title (固定)         ───▶ "Page Not Found"
                           │
                           └─ message (固定)       ───▶ "This page does not exist"
                                  │
                                  ▼
                           GenericErrorPage
                                  │
                                  └─ カード形式表示   ───▶ 404画面UI

Button onClick   ───▶ navigate('/')           ───▶ ホーム遷移
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| NotFound.tsx | `src/frontend/src/components/errors/NotFound.tsx` | ソース | 404 Not Foundコンポーネント |
| GenericErrorPage.tsx | `src/frontend/src/components/errors/GenericErrorPage.tsx` | ソース | 共通エラーページUIコンポーネント |
| router.tsx | `src/frontend/src/router.tsx` | ソース | ルーティング定義（ワイルドカードルート） |
| LanguageContext.tsx | `src/frontend/src/contexts/LanguageContext.tsx` | ソース | 多言語対応コンテキスト |

### ErrorPage (37番) との比較

| 項目 | NotFound (38番) | ErrorPage (37番) |
|------|----------------|------------------|
| 用途 | 存在しないURL | ルーティング中のエラー |
| タイトル | 固定 "Page Not Found" | 動的 "Error" or "Error: {statusText}" |
| メッセージ | 固定 "This page does not exist" | 固定 "An unexpected error has occurred" |
| エラー情報取得 | なし | useRouteError() |
| 設定場所 | element属性 | errorElement属性 |
| 使用コンポーネント | GenericErrorPage | GenericErrorPage |
