# 画面設計書 14-Tailwind ページネーション

## 概要

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

### 本画面の処理概要

Tailwindページネーションは、Tailwind CSSフレームワークのユーティリティファーストアプローチに基づいたページネーションナビゲーションを提供する。このビューはLaravelのデフォルトページネーションビューであり、モダンなWebアプリケーション開発に最適化されている。ダークモード対応、レスポンシブデザイン、アクセシビリティを標準でサポートする。

**業務上の目的・背景**：Tailwind CSSは、ユーティリティファーストのCSSフレームワークとして急速に普及している。Laravel 8以降、TailwindがデフォルトのCSSフレームワークとなり、Laravel Breezeやジェットストリームでも採用されている。ダークモード（`dark:`プレフィックス）やレスポンシブブレークポイント（`sm:`プレフィックス）を活用した現代的なデザインを提供する。

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

**主要な操作・処理内容**：
1. モバイル表示（sm未満）- 前へ/次へボタンのみのシンプルなナビゲーション
2. デスクトップ表示（sm以上）- 「Showing X to Y of Z results」情報とフルページネーション
3. SVGアイコン - 前後ナビゲーションにシェブロンアイコンを使用
4. ダークモード対応 - `dark:`プレフィックスによるダークテーマ自動切り替え
5. フォーカスリング - `focus:ring`によるキーボードナビゲーション対応
6. RTL対応 - `rtl:flex-row-reverse`による右から左への言語サポート

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

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

## 関連機能

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

## 画面種別

コンポーネント（レスポンシブ・ダークモード対応ページネーションナビゲーション）

## URL/ルーティング

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

## 入出力項目

| 項目名 | 型 | I/O | 説明 |
|--------|-----|-----|------|
| $paginator | LengthAwarePaginator | 入力 | ページネーション情報を含むPaginatorインスタンス |
| $elements | array | 入力 | ページリンク要素の配列 |

## 表示項目

### モバイル表示（sm:hidden）

| 項目名 | 表示形式 | Tailwindクラス（主要） | 説明 |
|--------|----------|----------------------|------|
| 前へボタン | テキスト | px-4 py-2 text-sm border rounded-md | 前ページへのナビゲーション |
| 次へボタン | テキスト | px-4 py-2 text-sm border rounded-md | 次ページへのナビゲーション |

### デスクトップ表示（hidden sm:flex）

| 項目名 | 表示形式 | Tailwindクラス（主要） | 説明 |
|--------|----------|----------------------|------|
| 表示件数情報 | テキスト | text-sm text-gray-700 | 現在表示中のレコード範囲 |
| 前へアイコン | SVGシェブロン | w-5 h-5 rounded-l-md | 前ページへのナビゲーション |
| ページ番号 | 数字 | px-4 py-2 -ml-px | 各ページへの直接リンク |
| 現在ページ | 数字 | bg-gray-200 dark:bg-gray-700 | 現在表示中のページ |
| 省略記号 | `...` | cursor-default | 省略されたページ範囲 |
| 次へアイコン | SVGシェブロン | w-5 h-5 rounded-r-md | 次ページへのナビゲーション |

## イベント仕様

### 1-ページ番号クリック

ユーザーがページ番号リンクをクリックすると、該当ページのURLへ遷移する。
- ホバー時：`hover:bg-gray-100 dark:hover:bg-gray-900`で視覚的フィードバック
- フォーカス時：`focus:ring ring-gray-300`でアウトラインを表示
- アクティブ時：`active:bg-gray-100`で押下状態を表示

### 2-キーボードナビゲーション

Tabキーでフォーカス移動、Enterキーでリンク実行。
- `focus:outline-none focus:ring`でフォーカス状態を明示
- `focus:border-blue-300 dark:focus:border-blue-700`でボーダー色変更

### 3-前へ/次へアイコンクリック

SVGシェブロンアイコンをクリックして前後ページへ移動。
- 無効状態：`cursor-not-allowed`でクリック不可を視覚化
- 有効状態：`hover:text-gray-400`でホバー効果

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

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

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

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

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

## メッセージ仕様

| 種別 | メッセージキー | 表示内容 | 表示条件 |
|------|---------------|----------|----------|
| ラベル | Pagination Navigation | nav要素のaria-label | 常時 |
| ラベル | pagination.previous | Previous | 前へリンク |
| ラベル | pagination.next | Next | 次へリンク |
| ラベル | Go to page :page | ページ番号のaria-label | ページリンク |
| 情報 | Showing | Showing | 表示件数情報 |
| 情報 | to | to | 表示件数情報 |
| 情報 | of | of | 表示件数情報 |
| 情報 | results | results | 表示件数情報 |

## 例外処理

| 状態 | 処理内容 |
|------|----------|
| ページ数が1以下 | ページネーション全体が非表示 |
| firstItem()がnull | `$paginator->count()`にフォールバック |

## 備考

- Laravelのデフォルトページネーションビュー（`$defaultView = 'pagination::tailwind'`）
- Tailwind CSS 2.x/3.x系のクラスを使用
- ダークモード対応：`dark:`プレフィックスで自動切り替え
- RTL（右から左）言語対応：`rtl:flex-row-reverse`
- シャドウ：`shadow-sm`でボタングループに影を適用
- トランジション：`transition ease-in-out duration-150`でスムーズなアニメーション

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | $defaultView = 'pagination::tailwind'（130行目） |
| 1-2 | LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | render()、elements()メソッド |

**読解のコツ**: Tailwindがデフォルトビューとして設定されていることを確認。useTailwind()は単にデフォルト値を再設定する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | useTailwind()（617-621行目） |

**主要処理フロー**:
1. **617行目**: `useTailwind()`メソッド定義
2. **619行目**: `defaultView('pagination::tailwind')`
3. **620行目**: `defaultSimpleView('pagination::simple-tailwind')`

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | tailwind.blade.php | `src/Illuminate/Pagination/resources/views/tailwind.blade.php` | Tailwindユーティリティクラスの構造（112行） |

**主要処理フロー**:
- **2行目**: `<nav role="navigation" aria-label="...">` - アクセシビリティ対応
- **4行目**: `class="flex gap-2 items-center justify-between sm:hidden"` - モバイル表示
- **28行目**: `class="hidden sm:flex-1 sm:flex sm:gap-2..."` - デスクトップ表示
- **47行目**: `rtl:flex-row-reverse` - RTL対応
- **53-56行目**: SVGシェブロンアイコン（前へ）
- **83行目**: aria-label for Go to page - ページ番号のアクセシビリティ

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

```
Paginator::useTailwind()（または何も設定しない）
    │
    ├─ AbstractPaginator::defaultView('pagination::tailwind')
    │
    └─ AbstractPaginator::defaultSimpleView('pagination::simple-tailwind')

$paginator->links() / render()
    │
    ├─ LengthAwarePaginator::render()
    │      │
    │      ├─ elements() → UrlWindow::make()
    │      │
    │      └─ ViewFactory::make('pagination::tailwind')
    │
    └─ tailwind.blade.php
           │
           ├─ モバイル表示（sm:hidden）
           │      ├─ 前へボタン（テキスト）
           │      └─ 次へボタン（テキスト）
           │
           └─ デスクトップ表示（hidden sm:flex）
                  ├─ 表示件数情報
                  ├─ 前へアイコン（SVG）
                  ├─ ページ番号リンク群
                  │      ├─ 省略記号（...）
                  │      ├─ ページリンク
                  │      └─ 現在ページ（active）
                  └─ 次へアイコン（SVG）
```

### データフロー図

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

LengthAwarePaginator  ──▶ tailwind.blade.php         ──▶ HTML出力
  - firstItem()             │                             <nav role="navigation">
  - lastItem()              ├─ レスポンシブ判定            │
  - total()                 │   sm:hidden / hidden sm:flex├─ モバイル版
  - elements                │                            │   <div class="flex gap-2">
  - currentPage()           ├─ ダークモード判定           │     Previous/Next
                            │   dark: プレフィックス      │   </div>
                            │                            │
                            └─ RTL判定                   └─ デスクトップ版
                                rtl:flex-row-reverse         <div class="hidden sm:flex">
                                                               表示件数 + ページリンク
                                                             </div>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| tailwind.blade.php | `src/Illuminate/Pagination/resources/views/tailwind.blade.php` | テンプレート | Tailwindページネーション描画 |
| simple-tailwind.blade.php | `src/Illuminate/Pagination/resources/views/simple-tailwind.blade.php` | テンプレート | シンプル版Tailwindページネーション |
| LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | ソース | ページネーター本体 |
| AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | ソース | useTailwind()、デフォルトビュー設定 |
| UrlWindow.php | `src/Illuminate/Pagination/UrlWindow.php` | ソース | ページリンク配列生成 |
