# 画面設計書 10-エラー画面（設定エラー）

## 概要

本ドキュメントは、Decap CMS のエラー画面（設定エラー）の画面設計書である。CMSの設定ファイル（config.yml）にエラーがある場合に表示されるエラーメッセージ画面の仕様を定義する。

### 本画面の処理概要

**業務上の目的・背景**：Decap CMSの動作にはconfig.ymlの正しい設定が不可欠であり、設定にエラーがある場合はCMSの操作を続行できない。この画面はconfig.ymlのパース/バリデーションに失敗した場合にエラー内容を明確に表示し、管理者に修正を促すためのものである。エラー原因の特定を容易にするため、具体的なエラーメッセージと設定ファイルの確認を促すガイダンスを提供する。

**画面へのアクセス方法**：CMSのURLにアクセスした際、設定ファイルの読み込みでエラーが発生した場合に自動的に表示される。App.jsのrenderメソッド（行165-166）で`config.error`が存在する場合に`configError`メソッドが呼び出される。

**主要な操作・処理内容**：
1. エラーメッセージの表示（設定ファイルのエラー内容）
2. 設定ファイルの確認を促すガイダンスの表示

**画面遷移**：
- 遷移元：ローディング画面（設定読み込みエラー発生時）
- 遷移先：なし（設定を修正してCMSをリロードする必要がある）

**権限による表示制御**：認証前の状態で表示されるため、権限による表示制御はない。設定エラーは全ユーザーに同じ内容が表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 2 | 設定管理 | 主機能 | config.ymlの読み込みエラー検出と表示。configErrorメソッドによるエラーメッセージとチェック方法の描画 |
| 1 | アプリケーション初期化 | 補助機能 | アプリケーション初期化時の設定ファイル読み込み失敗をトリガーとしたエラー画面表示 |

## 画面種別

エラー表示

## URL/ルーティング

URLの変更を伴わない。CMSのルートURLにアクセスした際に、App.jsのrenderメソッド内の条件分岐で表示される。

## 入出力項目

### 入力項目

なし（表示専用画面）

## 表示項目

| 項目名 | 表示条件 | 説明 |
|--------|---------|------|
| エラーヘッダー | 常時 | 「Error loading the CMS configuration」等のヘッダーテキスト |
| エラー種別ラベル | 常時 | 「Configuration Errors:」の強調テキスト |
| エラーメッセージ | 常時 | config.errorに含まれる具体的なエラー内容をpreタグで表示 |
| 確認ガイダンス | 常時 | 「Check your config.yml file.」のガイダンステキスト |

## イベント仕様

操作イベントなし。表示専用画面である。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | 表示専用画面のためデータ更新なし |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|---------|
| app.app.errorHeader | エラー | エラーヘッダーテキスト | config.error存在時 |
| app.app.configErrors | エラー | 「Configuration Errors」ラベル | config.error存在時 |
| app.app.checkConfigYml | 情報 | 設定ファイル確認ガイダンス | config.error存在時 |

## 例外処理

| 例外条件 | 処理内容 | 画面表示 |
|---------|---------|---------|
| config.errorが存在 | configErrorメソッドが呼ばれる | エラー画面が表示される |
| config === null | renderがnullを返す | 何も表示されない |

## 備考

- この画面はAppコンポーネント内の`configError`メソッド（App.js 行94-106）で描画される。独立したコンポーネントファイルは存在しない。
- エラーメッセージは`<pre>`タグ（ErrorCodeBlockスタイル）でフォーマットされて表示される。font-size: 15px, line-height: 1.5。
- ErrorContainerのmarginは20px（App.js 行41-42）。
- 設定エラーの場合、認証画面やメイン画面には一切遷移できない。設定を修正してCMSをリロードする必要がある。
- config.ymlの読み込みとバリデーションはアプリケーション初期化時に実行される。

---

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

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

### 推奨読解順序

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

config stateの構造とerrorプロパティを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | App.js | `packages/decap-cms-core/src/components/App/App.js` | mapStateToProps（行261-278）のconfig取得。config.errorの存在判定 |

**読解のコツ**: configオブジェクトはRedux stateに格納されており、`config.error`が存在する場合はエラー状態、`config.isFetching`がtrueの場合は読み込み中状態を表す。

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

App.jsのrenderメソッドの条件分岐を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | App.js | `packages/decap-cms-core/src/components/App/App.js` | renderメソッド（行147-258）の条件分岐順序。config.error判定が最も早い段階で行われる |

**主要処理フロー**:
1. **行161**: `config === null`の場合、nullを返す
2. **行165-166**: `config.error`が存在する場合、`this.configError(config)`を返す
3. **行169-171**: `config.isFetching`がtrueの場合、ローディング画面を返す
4. **行173-174**: `user == null`の場合、認証画面を返す

#### Step 3: エラー画面の描画を理解する

configErrorメソッドの具体的な描画内容を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | App.js | `packages/decap-cms-core/src/components/App/App.js` | configErrorメソッド（行94-106）のJSX構造 |

**主要処理フロー**:
- **行94-95**: propsからt関数を取得
- **行97**: ErrorContainerで全体をラップ
- **行98**: `t('app.app.errorHeader')`で見出し表示
- **行100**: `t('app.app.configErrors')`で「Configuration Errors:」ラベル
- **行101**: `<ErrorCodeBlock>{config.error}</ErrorCodeBlock>`でエラー内容をpreタグ表示
- **行102**: `t('app.app.checkConfigYml')`で確認ガイダンス

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

```
App.js (render)
    |
    +-- config === null -> return null
    |
    +-- config.error -> configError(config) [行94-106]
    |       |
    |       +-- ErrorContainer
    |               +-- <h1> errorHeader
    |               +-- <strong> configErrors
    |               +-- <ErrorCodeBlock> config.error
    |               +-- <span> checkConfigYml
    |
    +-- config.isFetching -> Loader (ローディング画面)
    |
    +-- user == null -> authenticating() (認証画面)
    |
    +-- メイン画面
```

### データフロー図

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

config.yml          ──▶  設定ファイル読み込み                ──▶  Redux State (config)
                         |                                       |
                         +-- パース成功 -> config = {...}         +-- config.error = null
                         +-- パース失敗 -> config.error = "..."  +-- config.error = "エラー内容"

Redux State         ──▶  App.render                          ──▶  画面表示
(config.error)           |
                         +-- config.error判定
                         +-- configError(config)
                              |
                              +-- ErrorContainer
                                   +-- エラーヘッダー
                                   +-- エラーメッセージ
                                   +-- 確認ガイダンス
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| App.js | `packages/decap-cms-core/src/components/App/App.js` | ソース | エラー画面の描画ロジック（configErrorメソッド） |
