# 画面設計書 19-デフォルト編集ビュー

## 概要

本ドキュメントは、Payload CMSの管理画面における「デフォルト編集ビュー」の設計仕様を定義するものである。ドキュメント編集のデフォルトビューコンポーネントであり、DocumentViewのフォールバックとして使用される。

### 本画面の処理概要

デフォルト編集ビューは、コレクションドキュメントやグローバルの編集画面において、カスタムビューが指定されていない場合に使用されるフォールバックコンポーネントである。

**業務上の目的・背景**：Payload CMSはカスタマイズ性の高いCMSであり、各コレクションやグローバルに対してカスタム編集ビューを設定できる。しかし、全ての画面にカスタムビューを作成することは非効率である。デフォルト編集ビューは、Payload標準の編集UIを提供し、カスタムビューが不要な場合やフォールバックとして機能する。これにより、開発者は必要な箇所のみをカスタマイズでき、効率的な管理画面構築が可能となる。

**画面へのアクセス方法**：直接アクセスされるのではなく、ドキュメント編集画面（Document View）のレンダリング時に、カスタムコンポーネントが指定されていない場合にフォールバックとして呼び出される。

**主要な操作・処理内容**：
1. フィールドの表示とデータ入力
2. ドキュメントの保存（作成/更新）
3. ドキュメントの削除
4. ドラフト保存（versions有効時）
5. 公開（versions有効時）

**画面遷移**：
このコンポーネント自体は単独で遷移元/遷移先を持たず、Document View内で使用される。

**権限による表示制御**：フィールドレベルの権限に基づき、読み取り専用フィールドや非表示フィールドが制御される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | コレクション管理 | 主機能 | ドキュメント編集のデフォルトビュー表示 |
| 3 | フィールドシステム | 補助機能 | 編集フォームのフィールドレンダリング |
| 30 | Admin UI | 補助機能 | 編集ビューUIコンポーネントの提供 |

## 画面種別

編集（コンポーネント）

## URL/ルーティング

このコンポーネントは直接URLを持たない。親コンポーネント（Document View）のURLに従う。

- コレクション新規作成: `/{adminRoute}/collections/{collectionSlug}/create`
- コレクション編集: `/{adminRoute}/collections/{collectionSlug}/{docId}`
- グローバル編集: `/{adminRoute}/globals/{globalSlug}`

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 必須 | 説明 |
|--------|----------|---------|------|------|
| props | 入力 | DocumentViewClientProps | Yes | Document Viewから渡されるprops |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|---------|------|
| フィールドリスト | Field[] | コレクション/グローバルで定義されたフィールド |

## イベント仕様

### 1-編集ビュー表示

Document Viewからフォールバックとして呼び出され、DefaultEditViewをレンダリングする。

**処理フロー**：
1. Document Viewがカスタムビューコンポーネントを確認
2. カスタムビューがない場合、EditViewをフォールバックとして使用
3. EditViewはpropsをそのままDefaultEditViewに渡す
4. DefaultEditViewがUIをレンダリング

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

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

このコンポーネント自体はデータベース操作を行わない。親コンポーネント（Document View）の仕様に従う。

## メッセージ仕様

このコンポーネント自体はメッセージを表示しない。親コンポーネントの仕様に従う。

## 例外処理

このコンポーネント自体は例外処理を行わない。親コンポーネントの仕様に従う。

## 備考

- EditViewはクライアントコンポーネント（'use client'）
- DefaultEditViewは@payloadcms/uiからインポートされる
- propsはそのまま透過的にDefaultEditViewに渡される
- カスタマイズが必要な場合は、コレクション設定の `admin.components.views.edit.Component` でカスタムコンポーネントを指定する
- このコンポーネントはシンプルなラッパーであり、実際のロジックはDefaultEditViewに委譲される

---

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

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

### 推奨読解順序

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

デフォルト編集ビューで扱うデータ構造の理解が重要である。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types | `packages/payload/src/admin/types.ts` | DocumentViewClientProps型の構造 |
| 1-2 | index.tsx | `packages/next/src/views/Edit/index.tsx` | EditViewの役割 |

**読解のコツ**: EditViewは非常にシンプルなラッパーコンポーネント。実際のロジックはDefaultEditViewにある。

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

デフォルト編集ビューのエントリーポイントとなるファイルを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.tsx | `packages/next/src/views/Edit/index.tsx` | EditViewコンポーネントの構造 |

**主要処理フロー**:
1. **行1**: 'use client' でクライアントコンポーネントとして定義
2. **行3**: DocumentViewClientProps型をインポート
3. **行5**: DefaultEditViewを@payloadcms/uiからインポート
4. **行8-10**: propsをそのままDefaultEditViewに渡して返却

#### Step 3: DefaultEditViewを理解する

実際のロジックを持つDefaultEditViewを確認する（参考）。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | DefaultEditView | `packages/ui/src/views/Edit/Default.tsx` | 実際の編集ビューロジック |

**備考**: DefaultEditViewは@payloadcms/uiパッケージに含まれ、フィールドのレンダリング、フォーム状態管理、保存処理などの実際のロジックを担当する。

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

```
Document View (Document/index.tsx)
    │
    ├─ RenderServerComponent()
    │      │
    │      ├─ Component: collectionConfig.admin.components.views.edit.Component
    │      │      └─ カスタムコンポーネント（設定されている場合）
    │      │
    │      └─ Fallback: EditView
    │             │
    │             └─ EditView (Edit/index.tsx)
    │                    │
    │                    └─ DefaultEditView (@payloadcms/ui)
    │                           │
    │                           ├─ フィールドレンダリング
    │                           ├─ フォーム状態管理
    │                           ├─ 保存処理
    │                           └─ etc.
```

### データフロー図

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

Document View ───▶ RenderServerComponent ───▶ 編集フォーム表示
                         │
                         ├─▶ カスタムコンポーネント確認
                         │      ├─▶ あり → カスタムコンポーネント使用
                         │      └─▶ なし → EditView使用
                         │
                         └─▶ EditView
                                │
                                └─▶ DefaultEditView
                                       │
                                       └─▶ フィールドレンダリング
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/next/src/views/Edit/index.tsx` | ソース | デフォルト編集ビューのラッパー |
| DefaultEditView | `packages/ui/src/views/Edit/Default.tsx` | ソース | 実際の編集ビューロジック |
| Document/index.tsx | `packages/next/src/views/Document/index.tsx` | ソース | EditViewを使用する親コンポーネント |
| RenderServerComponent | `packages/ui/src/elements/RenderServerComponent/index.tsx` | ソース | フォールバック処理を行うユーティリティ |
| DocumentViewClientProps | `packages/payload/src/admin/types.ts` | 型定義 | 編集ビューのprops型 |
