# 機能設計書 24-ビュースタイル切替

## 概要

本ドキュメントは、Decap CMSにおけるエントリ一覧の表示スタイル（リスト/グリッド）を切り替える機能について、UIコンポーネント・Redux状態管理・定数定義を記述した機能設計書である。

### 本機能の処理概要

コレクション画面のエントリ一覧について、リスト表示とグリッド表示の2つのビュースタイルを切り替える機能である。ViewStyleControlコンポーネントがトグルUIを提供し、changeViewStyleアクションを通じてRedux Storeのビュースタイル状態を更新する。

**業務上の目的・背景**：コンテンツの種類によって適切な一覧表示スタイルが異なる。テキスト中心のコンテンツにはリスト表示が、画像を含むコンテンツにはグリッド表示が適しており、ユーザーが好みに応じて切り替えられるようにする。

**機能の利用シーン**：
- コレクション一覧画面のCollectionControlsエリアでリスト/グリッドアイコンをクリック
- エントリの概要を素早く確認したい場合にリスト表示を選択
- 画像サムネイル付きのコンテンツをブラウズしたい場合にグリッド表示を選択

**主要な処理内容**：
1. ViewStyleControlコンポーネントでリスト/グリッドアイコンボタンを描画
2. ボタンクリックでchangeViewStyleアクションを実行
3. Redux StoreのviewStyle状態を更新
4. EntryListingコンポーネントがviewStyleに応じてカードレイアウトを変更

**関連システム・外部連携**：特になし。フロントエンドのみで動作するUI機能。

**権限による制御**：特になし。全ユーザーが利用可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 3 | コレクション一覧画面 | 主画面 | エントリ一覧の表示スタイル（リスト/グリッド）の切り替え。changeViewStyleアクションを実行 |

## 機能種別

表示切替 / UI操作

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| viewStyle | string | Yes | 現在のビュースタイル（VIEW_STYLE_LIST / VIEW_STYLE_GRID） | 定数値であること |

### 入力データソース

- ユーザーのUI操作（リスト/グリッドアイコンボタンのクリック）
- Redux Store: state.entries（selectViewStyleで取得）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| type | string | CHANGE_VIEW_STYLE |
| payload | string | 選択されたビュースタイル（VIEW_STYLE_LIST / VIEW_STYLE_GRID） |

### 出力先

- Redux Store: state.entries.viewStyle
- 画面表示（エントリカードのレイアウト変更）

## 処理フロー

### 処理シーケンス

```
1. ユーザーがリスト/グリッドアイコンボタンをクリック
   └─ ViewStyleControlコンポーネントのonClickイベント
2. onChangeViewStyle(VIEW_STYLE_LIST or VIEW_STYLE_GRID)が呼び出される
   └─ Collection.jsのmergePropsでバインドされたchangeViewStyle
3. changeViewStyleアクションがディスパッチされる
   └─ Redux Storeのentriesリデューサーで処理
4. selectViewStyleでviewStyleを取得しUIに反映
   └─ ViewStyleControlのisActiveプロップでアクティブ状態を表示
5. EntryListingコンポーネントがviewStyleに応じたレイアウトで描画
```

### フローチャート

```mermaid
flowchart TD
    A[ユーザーがアイコンクリック] --> B{リスト or グリッド?}
    B -->|リスト| C[changeViewStyle VIEW_STYLE_LIST]
    B -->|グリッド| D[changeViewStyle VIEW_STYLE_GRID]
    C --> E[Redux Store更新]
    D --> E
    E --> F[ViewStyleControl再描画 isActive更新]
    E --> G[EntryListing再描画 レイアウト変更]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-24-01 | 2種類のスタイル | VIEW_STYLE_LIST（リスト表示）とVIEW_STYLE_GRID（グリッド表示）の2種類のみ | 常時 |
| BR-24-02 | アクティブ状態の表示 | 現在選択されているスタイルのボタンがアクティブカラーで表示される | ViewStyleControlコンポーネント |
| BR-24-03 | グローバル設定 | ビュースタイルはコレクションごとではなくグローバルに適用される | selectViewStyle(state.entries) |

### 計算ロジック

特になし。

## データベース操作仕様

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

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| スタイル変更 | Redux Store: state.entries.viewStyle | UPDATE | ビュースタイルの変更 |

### テーブル別操作詳細

#### Redux Store: state.entries

| 操作 | 項目（キー） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | viewStyle | VIEW_STYLE_LIST or VIEW_STYLE_GRID | CHANGE_VIEW_STYLE アクション |

## エラー処理

### エラーケース一覧

特になし。単純なUI状態変更のため、エラーは発生しない。

### リトライ仕様

該当なし。

## トランザクション仕様

該当なし。単一のRedux Store更新で完結する。

## パフォーマンス要件

即座のUI応答が期待される（フロントエンドのみの処理）。

## セキュリティ考慮事項

特になし。

## 備考

- ビュースタイルの状態はブラウザのリロードで初期値にリセットされる（永続化されない）
- VIEW_STYLE_LISTとVIEW_STYLE_GRIDは`constants/collectionViews.js`で定義
- アクティブ状態のカラーはcolors.active（decap-cms-ui-default）を使用

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | collectionViews.js | `packages/decap-cms-core/src/constants/collectionViews.js` | **1-2行目**: VIEW_STYLE_LIST, VIEW_STYLE_GRID定数の定義 |

**読解のコツ**: 非常にシンプルな定数定義ファイル。2つの文字列定数のみ。

#### Step 2: UIコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ViewStyleControl.js | `packages/decap-cms-core/src/components/Collection/ViewStyleControl.js` | **31-48行目**: ViewStyleControl関数コンポーネント。リスト/グリッドのIconボタンを描画。isActiveプロップでアクティブカラーを制御 |

**主要処理フロー**:
1. **35行目**: VIEW_STYLE_LISTとの比較でリストボタンのアクティブ状態を判定
2. **36行目**: `onChangeViewStyle(VIEW_STYLE_LIST)`でリスト表示に切替
3. **41行目**: VIEW_STYLE_GRIDとの比較でグリッドボタンのアクティブ状態を判定
4. **42行目**: `onChangeViewStyle(VIEW_STYLE_GRID)`でグリッド表示に切替

#### Step 3: 統合コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | CollectionControls.js | `packages/decap-cms-core/src/components/Collection/CollectionControls.js` | **39行目**: ViewStyleControlをCollectionControls内に配置 |
| 3-2 | Collection.js | `packages/decap-cms-core/src/components/Collection/Collection.js` | **169行目**: selectViewStyle(state.entries)でviewStyleを取得。**204行目**: mergePropsでonChangeViewStyleをバインド |

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

```
Collection.js (mergeProps: onChangeViewStyle)
    |
    +-- CollectionControls.js
        |
        +-- ViewStyleControl.js
            |
            +-- ViewControlsButton (LIST) onClick -> onChangeViewStyle(VIEW_STYLE_LIST)
            +-- ViewControlsButton (GRID) onClick -> onChangeViewStyle(VIEW_STYLE_GRID)
```

### データフロー図

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

ユーザークリック       onChangeViewStyle                  Redux Store更新
(リスト/グリッド)         |                               (viewStyle)
        |                 v
        +---------> changeViewStyle dispatch              UI再描画
                         |                               (カードレイアウト変更)
                         v
                    entries reducer
                         |
                         v
                    selectViewStyle -> コンポーネント
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ViewStyleControl.js | `packages/decap-cms-core/src/components/Collection/ViewStyleControl.js` | ソース | リスト/グリッド切替UIコンポーネント |
| CollectionControls.js | `packages/decap-cms-core/src/components/Collection/CollectionControls.js` | ソース | ViewStyleControlを含む制御UIの統合 |
| Collection.js | `packages/decap-cms-core/src/components/Collection/Collection.js` | ソース | changeViewStyleアクションのバインディング |
| collectionViews.js | `packages/decap-cms-core/src/constants/collectionViews.js` | ソース | VIEW_STYLE_LIST, VIEW_STYLE_GRID定数 |
| entries.ts | `packages/decap-cms-core/src/actions/entries.ts` | ソース | changeViewStyleアクションクリエーター |
| entries.ts | `packages/decap-cms-core/src/reducers/entries.ts` | ソース | selectViewStyle関数、viewStyleリデューサー処理 |
