# 画面設計書 59-タグ一覧画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるタグ一覧画面の設計仕様を記述したものである。

### 本画面の処理概要

本画面は、アカウント内のすべてのタグと、各タグに関連付けられたカードを一覧表示する管理者向け画面である。

**業務上の目的・背景**：Fizzyではカードにタグを付けて分類・管理することができる。本画面では、アカウント全体で使用されているタグを俯瞰し、どのタグがどのカードに使用されているかを確認できる。不要になったタグを削除することで、タグの整理・管理を行うことができる。

**画面へのアクセス方法**：URLパス `/tags` に直接アクセスする。一般的なナビゲーションからのリンクは設定されていない（管理者向け機能）。

**主要な操作・処理内容**：
1. すべてのタグとその関連カードを確認する
2. 不要なタグを削除する

**画面遷移**：直接URLでアクセスする。タグ削除後は同じ画面にリダイレクトされる。

**権限による表示制御**：ログイン済みユーザーであればアクセス可能。ただし、タグの削除は確認ダイアログが表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 41 | タグ一覧表示 | 主機能 | すべてのタグと関連カードを一覧表示 |

## 画面種別

一覧

## URL/ルーティング

| メソッド | パス | アクション |
|---------|------|-----------|
| GET | /tags | index（タグ一覧表示） |
| DELETE | /tags/:id | destroy（タグ削除） |

## 入出力項目

本画面には入力項目はない（表示と削除操作のみ）。

## 表示項目

| 項目名 | 説明 |
|--------|------|
| 見出し | "All tags" |
| タグ名 | 各タグのタイトル |
| 関連カード | タグに関連付けられたカードのタイトル一覧（カンマ区切り） |
| 削除ボタン | removeアイコン - タグを削除 |

## イベント仕様

### 1-削除ボタン押下

タグを削除する。

1. 確認ダイアログ表示（turbo_confirm: "Are you sure?"）
2. 確認後、DELETEリクエストを `/tags/:id` に送信
3. タグが削除され、関連するtaggingsも削除される
4. 画面がリフレッシュされる

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | tags | SELECT | タグ一覧を取得 |
| 画面表示 | cards | SELECT | 関連カードのタイトルを取得 |
| 削除ボタン押下 | tags | DELETE | タグを削除 |
| 削除ボタン押下 | taggings | DELETE | 関連するタグ付けを削除（dependent: :destroy） |

### テーブル別更新項目詳細

#### tags

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | - | Current.account.tags.alphabetically | アルファベット順で取得 |
| DELETE | id | params[:id] | 指定されたタグを削除 |

#### taggings

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | - | タグ削除時に連動 | dependent: :destroyで自動削除 |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|----------|
| 確認 | Are you sure? | 削除ボタン押下時 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 未ログイン | ログイン画面にリダイレクト |
| 存在しないタグID | RecordNotFound例外 |

## 備考

- タグはアルファベット順（alphabetically）で表示
- 関連カードはpluck(:title).to_sentenceで文字列連結
- ページネーションはset_page_and_extract_portion_fromで実装
- タグのtitleは#で始まらないようにバリデーション
- タグはdowncase正規化される

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | tag.rb | `app/models/tag.rb` | タグモデル、関連定義、スコープ |
| 1-2 | tagging.rb | `app/models/tagging.rb` | タグとカードの中間テーブル |

**読解のコツ**: Tagモデルはhas_many :taggings, dependent: :destroyで、タグ削除時にtaggingsも連動削除。alphabeticallyスコープでソート。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | tags_controller.rb | `app/controllers/tags_controller.rb` | indexアクションの実装 |

**主要処理フロー**:
1. **3行目**: indexアクション - set_page_and_extract_portion_fromでページネーション
2. Current.account.tags.alphabeticallyで取得

#### Step 3: ビューテンプレートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.html.erb | `app/views/tags/index.html.erb` | タグ一覧表示、削除ボタン |

**主要処理フロー**:
- **2行目**: 見出し "All tags"
- **4行目**: @tagsをeachでループ
- **5行目**: 各タグの行（リストアイテム）
- **7行目**: タグ名（title）表示
- **11行目**: 関連カードのタイトル（pluck(:title).to_sentence）
- **14-16行目**: 削除ボタン（button_to + turbo_confirm）

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

```
ブラウザ
    │
    ├─ GET /tags
    │      └─ TagsController#index
    │             └─ set_page_and_extract_portion_from
    │                    └─ Current.account.tags.alphabetically
    │                           └─ @tags に代入
    │
    └─ DELETE /tags/:id
           └─ TagsController#destroy（未実装の可能性）
                  または
           └─ Tags関連の別コントローラ
                  └─ Tag.find(params[:id]).destroy
                         └─ taggings連動削除
```

### データフロー図

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

(なし) ──────────────────▶ TagsController#index ─────────▶ index.html.erb
                                 │                              │
                                 ▼                              ├─ タグ名
                          tags                                  ├─ 関連カード
                          (SELECT alphabetically)               └─ 削除ボタン
                                 │
                                 ▼
                          cards (pluck :title)

削除ボタン押下 ──────────▶ タグ削除処理 ────────────────▶ ページリフレッシュ
                                 │
                                 ▼
                          tags DELETE
                                 │
                                 ▼
                          taggings DELETE (dependent)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| tags_controller.rb | `app/controllers/tags_controller.rb` | コントローラ | タグ一覧制御 |
| tag.rb | `app/models/tag.rb` | モデル | タグモデル |
| tagging.rb | `app/models/tagging.rb` | モデル | タグ付け中間テーブル |
| index.html.erb | `app/views/tags/index.html.erb` | ビュー | タグ一覧表示 |
