# 画面設計書 19-シンプルTailwind ページネーション

## 概要

本ドキュメントは、LaravelフレームワークにおけるシンプルTailwind CSSページネーションビューの設計仕様を定義する。

### 本画面の処理概要

シンプルTailwindページネーションは、Tailwind CSSのユーティリティクラスを使用した「前へ」「次へ」のみのシンプルなページネーションを提供する。Laravelのデフォルトシンプルビューであり、ダークモード対応、フォーカスリング、トランジションアニメーションなど、モダンなUI/UXを標準で実装している。

**業務上の目的・背景**：Laravel 8以降のデフォルトスタイリングフレームワークとして採用されているTailwind CSSと統合し、パフォーマンス重視のシンプルなページネーションを提供する。Tailwindのユーティリティクラスにより、カスタマイズ性と一貫したデザインを両立させる。

**画面へのアクセス方法**：`Paginator::useTailwind()`を設定、または何も設定しない場合（デフォルト）、`Paginator`クラス（SimplePaginator）の`links()`を呼び出すとこのビューが使用される。`$paginator->links('pagination::simple-tailwind')`で明示的に指定することも可能。

**主要な操作・処理内容**：
1. 前のページへのナビゲーション - Tailwindスタイルの「Previous」ボタン
2. 次のページへのナビゲーション - Tailwindスタイルの「Next」ボタン
3. 無効状態の表示 - `cursor-not-allowed`と色の変更による視覚的フィードバック
4. ダークモード対応 - `dark:`プレフィックスによる自動テーマ切り替え
5. インタラクション - hover/focus/active状態のスタイリング

**画面遷移**：前へ/次へボタンをクリックすると、対応するページURLへGETリクエストで遷移する。

**権限による表示制御**：ページネーションコンポーネント自体には権限制御機能はない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 50 | ページネーション | 主機能 | Tailwind CSS形式の簡易ページネーション表示 |
| 17 | URL生成 | 補助機能 | 前後ページリンクURL生成処理 |

## 画面種別

コンポーネント（シンプルページネーションナビゲーション）

## URL/ルーティング

このコンポーネント自体はルーティングを持たない。

## 入出力項目

| 項目名 | 型 | I/O | 説明 |
|--------|-----|-----|------|
| $paginator | Paginator | 入力 | シンプルページネーション情報を含むPaginatorインスタンス |

## 表示項目

| 項目名 | 表示形式 | 主要Tailwindクラス | 説明 |
|--------|----------|-------------------|------|
| ナビゲーション | nav | flex gap-2 items-center justify-between | Flexboxコンテナ |
| 前へボタン（有効） | a | px-4 py-2 text-sm border rounded-md hover:bg-gray-100 | 前ページへのリンク |
| 前へボタン（無効） | span | px-4 py-2 text-sm border rounded-md cursor-not-allowed | 無効状態 |
| 次へボタン（有効） | a | px-4 py-2 text-sm border rounded-md hover:bg-gray-100 | 次ページへのリンク |
| 次へボタン（無効） | span | px-4 py-2 text-sm border rounded-md cursor-not-allowed | 無効状態 |

## イベント仕様

### 1-前へボタンクリック

現在のページ番号から1を引いたページへ遷移する。
- 条件：`$paginator->onFirstPage()`がfalseの場合のみリンクが有効
- ホバー時：`hover:bg-gray-100 dark:hover:bg-gray-900`
- フォーカス時：`focus:ring ring-gray-300 focus:border-blue-300`

### 2-次へボタンクリック

次のページへ遷移する。
- 条件：`$paginator->hasMorePages()`がtrueの場合のみリンクが有効
- 無効時：`cursor-not-allowed`と色のグレーアウト

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ページリンククリック | - | SELECT | ビュー自体はDB操作を行わない |

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

ページネーションビューはデータベースの更新を行わない。

## メッセージ仕様

| 種別 | メッセージキー | 表示内容 | 表示条件 |
|------|---------------|----------|----------|
| ラベル | Pagination Navigation | (nav aria-label) | ナビゲーション全体 |
| ラベル | pagination.previous | Previous | 前へボタン |
| ラベル | pagination.next | Next | 次へボタン |

## 例外処理

| 状態 | 処理内容 |
|------|----------|
| ページ数が1以下 | ページネーション全体が非表示 |
| 先頭ページ | 前へボタンが無効状態（span）で表示 |
| 末尾ページ | 次へボタンが無効状態（span）で表示 |

## 備考

- Laravelのデフォルトシンプルビュー（`$defaultSimpleView = 'pagination::simple-tailwind'`）
- Tailwind CSS 2.x/3.x系のクラスを使用
- ダークモード対応：`dark:`プレフィックス
- トランジション：`transition ease-in-out duration-150`
- 有効/無効状態で要素タイプが変わる（`<a>` vs `<span>`）

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Paginator.php | `src/Illuminate/Pagination/Paginator.php` | SimplePaginatorの実装 |
| 1-2 | AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | $defaultSimpleView = 'pagination::simple-tailwind'（137行目） |

**読解のコツ**: simple-tailwindはデフォルトのシンプルビューとして設定されている。

#### Step 2: Bladeテンプレートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | simple-tailwind.blade.php | `src/Illuminate/Pagination/resources/views/simple-tailwind.blade.php` | Tailwindユーティリティの使い方（26行） |

**主要処理フロー**:
- **2行目**: `flex gap-2 items-center justify-between` - Flexboxレイアウト
- **4-7行目**: 前へボタン無効状態（span要素）
- **8-11行目**: 前へボタン有効状態（a要素）
- **5行目**: `cursor-not-allowed` - 無効状態のカーソル
- **9行目**: `transition ease-in-out duration-150` - スムーズなアニメーション

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

```
Paginator::useTailwind()（またはデフォルト）
    │
    ├─ defaultView('pagination::tailwind')
    │
    └─ defaultSimpleView('pagination::simple-tailwind')

SimplePaginator->links()
    │
    └─ Paginator::render()
           │
           └─ ViewFactory::make($defaultSimpleView)
                  │
                  └─ simple-tailwind.blade.php
                         │
                         ├─ 前へボタン
                         │      ├─ onFirstPage() → span（無効）
                         │      └─ !onFirstPage() → a（有効）
                         │
                         └─ 次へボタン
                                ├─ hasMorePages() → a（有効）
                                └─ !hasMorePages() → span（無効）
```

### データフロー図

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

Paginator             ──▶ simple-tailwind.blade.php  ──▶ HTML出力
  - currentPage            │                             <nav class="flex gap-2...">
  - hasMore                ├─ ダークモード対応              <span/a class="inline-flex...
                           │   dark: プレフィックス           text-gray-600/800...">
                           │                                Previous
                           ├─ 状態判定                      </span/a>
                           │   有効 → a要素                 <a/span class="inline-flex...
                           │   無効 → span要素                text-gray-800/600...">
                           │                                Next
                           └─ トランジション               </a/span>
                               transition duration-150    </nav>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| simple-tailwind.blade.php | `src/Illuminate/Pagination/resources/views/simple-tailwind.blade.php` | テンプレート | シンプルTailwindページネーション描画 |
| Paginator.php | `src/Illuminate/Pagination/Paginator.php` | ソース | SimplePaginator本体 |
| AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | ソース | useTailwind()、$defaultSimpleView定義 |
