# 画面設計書 21-404エラーページ

## 概要

本ドキュメントは、OpenCodeコンソールアプリケーション（console）における404エラーページの設計を定義する。存在しないURLにアクセスした際に表示されるエラーページであり、ユーザーを正常なページへ誘導する機能を提供する。

### 本画面の処理概要

この画面は、ユーザーが存在しないURLにアクセスした場合に表示されるキャッチオールエラーページである。ユーザーに「ページが見つからない」ことを明確に伝え、適切なナビゲーション先を提供する。

**業務上の目的・背景**：Webアプリケーションにおいて、ユーザーが誤ったURLを入力した場合や、削除されたページにアクセスした場合に、適切なエラーメッセージを表示することは重要なユーザー体験の一部である。単にエラーを表示するだけでなく、ユーザーを有用なページへ誘導することで、離脱を防ぎ、サービス継続利用を促進する。

**画面へのアクセス方法**：存在しないURL（例：`/nonexistent-path`）にアクセスすることで自動的に表示される。SolidStartのキャッチオールルート（`[...404].tsx`）により、未定義のすべてのルートがこの画面にマッピングされる。

**主要な操作・処理内容**：
1. OpenCodeロゴの表示（ライト/ダークモード対応）
2. 「Page Not Found」というタイトルの表示（国際化対応）
3. 以下のナビゲーションリンクの提供：
   - ホームページへのリンク
   - ドキュメントページへのリンク
   - GitHubリポジトリへのリンク
   - Discordサーバーへのリンク
4. HTTPステータスコード404の返却

**画面遷移**：
- この画面から遷移可能：ホームページ（`/`）、ドキュメント（`/docs`）、GitHub（外部リンク）、Discord（`/discord`）
- この画面に遷移してくる：存在しないすべてのURL

**権限による表示制御**：なし。すべてのユーザー（未認証を含む）がアクセス可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 56 | 国際化 | 主機能 | エラーメッセージの多言語表示（notFound.title, notFound.heading, notFound.home, notFound.docs, notFound.github, notFound.discord） |

## 画面種別

エラーページ

## URL/ルーティング

- パス: `/*` (キャッチオールルート)
- ファイル: `packages/console/app/src/routes/[...404].tsx`
- HTTPステータス: 404

## 入出力項目

入力項目なし（静的表示のみ）

## 表示項目

| 項目名 | 表示内容 | 説明 |
|--------|----------|------|
| ロゴ | OpenCodeロゴ画像 | ライト/ダークモードで切り替え |
| タイトル | "Page Not Found" | i18n.t("notFound.heading")により取得 |
| ホームリンク | "Home" | ホームページへのリンク |
| ドキュメントリンク | "Docs" | ドキュメントページへのリンク |
| GitHubリンク | "GitHub" | GitHubリポジトリへの外部リンク |
| Discordリンク | "Discord" | Discordサーバーへのリンク |

## イベント仕様

### 1-ホームリンククリック

ホームページ（`/`）へ遷移する。言語設定に応じたルートが`language.route("/")`により生成される。

### 2-ドキュメントリンククリック

ドキュメントページ（`/docs`）へ遷移する。

### 3-GitHubリンククリック

GitHubリポジトリ（`https://github.com/anomalyco/opencode`）を新しいタブで開く。

### 4-Discordリンククリック

Discordサーバー（`/discord`）へ遷移する。

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

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

データベース操作なし（静的表示のみ）

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|----------|---------------|
| notFound.title | 情報 | 常時（ページタイトル） | ブラウザタブに表示されるタイトル |
| notFound.heading | 情報 | 常時（画面表示） | "Page Not Found"（英語の場合） |
| notFound.home | 情報 | 常時 | "Home" |
| notFound.docs | 情報 | 常時 | "Docs" |
| notFound.github | 情報 | 常時 | "GitHub" |
| notFound.discord | 情報 | 常時 | "Discord" |

## 例外処理

特別な例外処理なし。この画面自体がエラーハンドリングの結果として表示される。

## 備考

- SolidStartの`HttpStatusCode`コンポーネントを使用してHTTPステータスコード404を正しく返却している
- CSS変数を使用したダークモード対応が実装されている（`prefers-color-scheme: dark`メディアクエリ）
- レスポンシブデザイン対応（ブレークポイント: 30rem, 40rem）

---

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

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

### 推奨読解順序

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

この画面は静的表示のため、複雑なデータ構造は存在しない。主に国際化（i18n）のキー構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | i18n.tsx | `packages/console/app/src/context/i18n.tsx` | 国際化コンテキストの提供方法、`t()`関数の実装 |

**読解のコツ**: SolidJSの`createMemo`を使った翻訳辞書のキャッシュ処理に注目。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | [...404].tsx | `packages/console/app/src/routes/[...404].tsx` | 404ページのルートコンポーネント |

**主要処理フロー**:
1. **9行目**: `useI18n()`で国際化コンテキストを取得
2. **10行目**: `useLanguage()`で言語設定を取得
3. **13行目**: `HttpStatusCode`で404ステータスを設定
4. **18-21行目**: ライト/ダークモード対応のロゴ表示
5. **25-37行目**: ナビゲーションリンクの生成

#### Step 3: スタイル定義を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | [...404].css | `packages/console/app/src/routes/[...404].css` | CSSカスタムプロパティとレスポンシブ対応 |

**主要処理フロー**:
- **1-18行目**: カラーテーマ定義（ライト/ダーク）
- **21-31行目**: レスポンシブ変数定義
- **74-81行目**: ダークモード時のロゴ切り替え

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

```
[...404].tsx (NotFound)
    │
    ├─ useI18n()
    │      └─ i18n.tsx → i18n辞書から翻訳文字列取得
    │
    ├─ useLanguage()
    │      └─ language.tsx → 現在の言語設定取得
    │
    ├─ <Title>
    │      └─ @solidjs/meta → ドキュメントタイトル設定
    │
    └─ <HttpStatusCode>
           └─ @solidjs/start → HTTPステータスコード設定
```

### データフロー図

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

(URLアクセス)
    │
    ▼
ルーティング ──▶ [...404].tsx判定 ──▶ 404ページ表示
                      │
                      ▼
              言語設定取得 ──▶ 翻訳文字列取得 ──▶ テキスト表示
                      │
                      ▼
              HTTPステータス設定 ──▶ 404レスポンス返却
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| [...404].tsx | `packages/console/app/src/routes/[...404].tsx` | ソース | 404ページコンポーネント |
| [...404].css | `packages/console/app/src/routes/[...404].css` | スタイル | 404ページのスタイル定義 |
| i18n.tsx | `packages/console/app/src/context/i18n.tsx` | ソース | 国際化コンテキスト |
| language.tsx | `packages/console/app/src/context/language.tsx` | ソース | 言語設定コンテキスト |
| logo-ornate-light.svg | `packages/console/app/src/asset/logo-ornate-light.svg` | アセット | ライトモード用ロゴ |
| logo-ornate-dark.svg | `packages/console/app/src/asset/logo-ornate-dark.svg` | アセット | ダークモード用ロゴ |
