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

## 概要

本ドキュメントは、OpenCodeエンタープライズアプリケーション（enterprise）における404エラーページの設計を定義する。存在しないURLにアクセスした際、または無効な共有IDを指定した場合に表示されるエラーページである。

### 本画面の処理概要

この画面は、エンタープライズアプリケーションにおいて、存在しないURLにアクセスした場合に表示されるキャッチオールエラーページである。コンソール版と比較してシンプルな実装となっており、基本的なナビゲーション機能を提供する。

**業務上の目的・背景**：エンタープライズ向けセッション共有機能において、無効な共有IDや存在しないURLにアクセスした場合に、ユーザーに適切なエラーメッセージを表示する必要がある。また、シェア詳細画面でセッションデータが見つからない場合にもこの画面が表示される。

**画面へのアクセス方法**：
1. 存在しないURL（例：`/nonexistent-path`）に直接アクセス
2. 無効な共有ID（`/share/invalid-id`）にアクセス時、シェア詳細画面からリダイレクト

**主要な操作・処理内容**：
1. 「Not Found」タイトルの表示
2. ホームページへのリンク提供
3. About Pageへのリンク提供（デフォルトテンプレートのまま）
4. SolidJSの外部リンク提供

**画面遷移**：
- この画面から遷移可能：ホームページ（`/`）、About Page（`/about`）、SolidJS公式サイト（外部リンク）
- この画面に遷移してくる：存在しないすべてのURL、無効な共有ID

**権限による表示制御**：なし。すべてのユーザーがアクセス可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 56 | 国際化 | 主機能 | エンタープライズ向けエラーメッセージの多言語表示（現在は英語のみ） |

## 画面種別

エラーページ

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| 項目名 | 表示内容 | 説明 |
|--------|----------|------|
| タイトル | "Not Found" | 大きなヘッダーテキスト |
| 説明文 | "Visit solidjs.com to learn..." | SolidJS公式サイトへの案内 |
| ホームリンク | "Home" | ホームページへのリンク |
| Aboutリンク | "About Page" | Aboutページへのリンク |

## イベント仕様

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

ホームページ（`/`）へSPA遷移。SolidJSの`A`コンポーネントを使用。

### 2-Aboutリンククリック

Aboutページ（`/about`）へSPA遷移。

### 3-SolidJSリンククリック

SolidJS公式サイト（`https://solidjs.com`）を新しいタブで開く。

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

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

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

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|----------|---------------|
| - | 情報 | 常時 | "Not Found" |
| - | 情報 | 常時 | "Visit solidjs.com to learn how to build Solid apps." |

## 例外処理

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

## 備考

- シンプルなデフォルトテンプレートに近い実装
- コンソール版404ページと比較して機能が限定的（国際化、ダークモード対応なし）
- SolidJSの`A`コンポーネントによるSPA内ナビゲーション
- Tailwind CSSのユーティリティクラスを使用したスタイリング
- シェア詳細画面からSessionDataMissingError発生時にも表示される

---

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

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

### 推奨読解順序

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

この画面は静的表示のため、特別なデータ構造は存在しない。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | [...404].tsx | `packages/enterprise/src/routes/[...404].tsx` | シンプルなReactライクJSX構造 |

**読解のコツ**: SolidJSの`A`コンポーネントはReact Routerの`Link`に相当するSPA遷移コンポーネント。

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

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

**主要処理フロー**:
1. **1行目**: `A`コンポーネントのインポート（@solidjs/routerより）
2. **3行目**: デフォルトエクスポートされた関数コンポーネント定義
3. **5行目**: mainタグとTailwindクラスによるレイアウト
4. **6行目**: h1タグによる大きなタイトル表示
5. **8-12行目**: 外部リンク（solidjs.com）
6. **14-20行目**: 内部ナビゲーションリンク

#### Step 3: 呼び出し元を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | [shareID].tsx | `packages/enterprise/src/routes/share/[shareID].tsx` | SessionDataMissingError時のNotFound表示 |

**主要処理フロー**:
- **21行目**: `import NotFound from "../[...404]"`
- **166-168行目**: エラーバウンダリでSessionDataMissingError時にNotFoundを表示

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

```
[...404].tsx (NotFound)
    │
    ├─ <A> コンポーネント
    │      └─ @solidjs/router → SPA内ナビゲーション
    │
    └─ <a> タグ
           └─ 外部リンク（solidjs.com）

呼び出し元:
    │
    └─ [shareID].tsx
           │
           └─ ErrorBoundary
                  └─ SessionDataMissingError判定
                         └─ <NotFound /> レンダリング
```

### データフロー図

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

(URLアクセス)
    │
    ▼
ルーティング判定
    │
    ├─ 存在するルート → 該当ページ表示
    │
    └─ 存在しないルート → [...404].tsx判定 → 404ページ表示

(シェア詳細からの遷移)
    │
    ▼
[shareID].tsx
    │
    └─ SessionDataMissingError
           │
           ▼
       ErrorBoundary
           │
           ▼
       <NotFound /> レンダリング → 404ページ表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| [...404].tsx | `packages/enterprise/src/routes/[...404].tsx` | ソース | 404ページコンポーネント |
| [shareID].tsx | `packages/enterprise/src/routes/share/[shareID].tsx` | ソース | NotFoundを呼び出すシェア詳細画面 |
| @solidjs/router | 外部パッケージ | 依存 | Aコンポーネント提供 |
