# 画面設計書 13-Bootstrap 5 ページネーション

## 概要

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

### 本画面の処理概要

Bootstrap 5ページネーションは、Bootstrap 5 CSSフレームワークのコンポーネント規約に準拠したページネーションナビゲーションを提供する。Bootstrap 4からの移行に対応し、Bootstrap 5の新しいユーティリティクラス（`d-flex`、`justify-content-between`等）を活用したレスポンシブデザインを実現する。

**業務上の目的・背景**：Bootstrap 5はjQuery依存を廃止した最新のBootstrapバージョンであり、モダンなWebアプリケーション開発で広く採用されている。Bootstrap 5のデザインシステムに統一されたページネーションを提供し、レスポンシブなユーザーインターフェースを実現する。モバイルとデスクトップで異なる表示形式を採用し、デバイスに最適化された体験を提供する。

**画面へのアクセス方法**：`Paginator::useBootstrapFive()`をサービスプロバイダで呼び出すことで、デフォルトビューとして設定される。または、`$paginator->links('pagination::bootstrap-5')`で明示的に指定する。

**主要な操作・処理内容**：
1. モバイル表示（sm未満）- 前へ/次へボタンのみのシンプルなナビゲーション
2. デスクトップ表示（sm以上）- 「Showing X to Y of Z results」情報とフルページネーション
3. ページ番号リンク - Bootstrap 5スタイルの個別ページリンク
4. 省略記号（...）の表示 - 中間ページの省略表示
5. レスポンシブ切り替え - `d-sm-none`/`d-none d-sm-flex`クラスによる表示切り替え

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

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

## 関連機能

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

## 画面種別

コンポーネント（レスポンシブページネーションナビゲーション）

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

### モバイル表示（d-sm-none）

| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| 前へボタン | テキスト「Previous」 | 前ページへのナビゲーション |
| 次へボタン | テキスト「Next」 | 次ページへのナビゲーション |

### デスクトップ表示（d-none d-sm-flex）

| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| 表示件数情報 | 「Showing X to Y of Z results」 | 現在表示中のレコード範囲 |
| 前へリンク | `<` 記号 | 前ページへのナビゲーション |
| ページ番号 | 数字 | 各ページへの直接リンク |
| 省略記号 | `...` | 省略されたページ範囲 |
| 次へリンク | `>` 記号 | 次ページへのナビゲーション |

## イベント仕様

### 1-モバイル版前へ/次へクリック

モバイル表示時のシンプルなナビゲーション。
- 前へ：`previousPageUrl()`で生成されたURLへ遷移
- 次へ：`nextPageUrl()`で生成されたURLへ遷移

### 2-デスクトップ版ページ番号クリック

フルページネーション表示時のページ直接ジャンプ。
- 対象ページのURLへGETリクエストで遷移

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

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

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

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

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

## メッセージ仕様

| 種別 | メッセージキー | 表示内容 | 表示条件 |
|------|---------------|----------|----------|
| ラベル | pagination.previous | Previous | 前へリンク/ボタン |
| ラベル | pagination.next | Next | 次へリンク/ボタン |
| 情報 | Showing | Showing | 表示件数情報の接頭辞 |
| 情報 | to | to | 表示件数情報の区切り |
| 情報 | of | of | 表示件数情報の区切り |
| 情報 | results | results | 表示件数情報の接尾辞 |

## 例外処理

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

## 備考

- Bootstrap 5.x系のCSSが必要
- Bootstrap 5のFlexboxユーティリティ（d-flex、justify-content-between等）を活用
- Bootstrap 4との主な差異：表示件数情報の追加、レスポンシブ表示の強化、fw-semiboldクラスの使用
- 翻訳対応：`__()`ヘルパーを使用した多言語対応

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | firstItem()、lastItem()、total()メソッド |
| 1-2 | AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | count()メソッド（700-704行目） |

**読解のコツ**: Bootstrap 5ビューは表示件数情報を追加で表示するため、firstItem/lastItem/totalの理解が重要。

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

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

**主要処理フロー**:
1. **655行目**: `useBootstrapFive()`メソッド定義
2. **662行目**: `defaultView('pagination::bootstrap-5')` - フルページネーション用
3. **663行目**: `defaultSimpleView('pagination::simple-bootstrap-5')` - シンプル版

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | bootstrap-5.blade.php | `src/Illuminate/Pagination/resources/views/bootstrap-5.blade.php` | レスポンシブ構造の理解 |

**主要処理フロー**:
- **2行目**: `<nav class="d-flex justify-items-center justify-content-between">` - Flexboxレイアウト
- **3行目**: `class="d-flex justify-content-between flex-fill d-sm-none"` - モバイル専用表示
- **29行目**: `class="d-none flex-sm-fill d-sm-flex..."` - デスクトップ専用表示
- **31-39行目**: 表示件数情報（Showing X to Y of Z results）
- **33行目**: `firstItem()`による開始位置取得

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

```
Paginator::useBootstrapFive()
    │
    ├─ AbstractPaginator::defaultView('pagination::bootstrap-5')
    │
    └─ AbstractPaginator::defaultSimpleView('pagination::simple-bootstrap-5')

$paginator->links() / render()
    │
    ├─ LengthAwarePaginator::render()
    │      │
    │      ├─ elements() → UrlWindow::make()
    │      │
    │      ├─ firstItem() / lastItem() / total()
    │      │      （表示件数情報用）
    │      │
    │      └─ ViewFactory::make('pagination::bootstrap-5')
    │
    └─ bootstrap-5.blade.php
           ├─ モバイル表示（d-sm-none）
           │      └─ 前へ/次へボタンのみ
           │
           └─ デスクトップ表示（d-none d-sm-flex）
                  ├─ 表示件数情報
                  └─ フルページネーション
```

### データフロー図

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

LengthAwarePaginator  ──▶ bootstrap-5.blade.php     ──▶ HTML出力
  - firstItem()             │                             <nav class="d-flex...">
  - lastItem()              ├─ モバイル判定               │
  - total()                 │    d-sm-none               ├─ モバイル版
  - elements                │                            │   <ul class="pagination">
  - currentPage()           └─ デスクトップ判定          │     Previous/Next
                                d-none d-sm-flex         │   </ul>
                                                         │
                                                         └─ デスクトップ版
                                                             <div>
                                                               Showing X to Y of Z
                                                             </div>
                                                             <ul class="pagination">
                                                               全ページリンク
                                                             </ul>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| bootstrap-5.blade.php | `src/Illuminate/Pagination/resources/views/bootstrap-5.blade.php` | テンプレート | Bootstrap 5ページネーション描画 |
| simple-bootstrap-5.blade.php | `src/Illuminate/Pagination/resources/views/simple-bootstrap-5.blade.php` | テンプレート | シンプル版Bootstrap 5ページネーション |
| LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | ソース | ページネーター本体 |
| AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | ソース | useBootstrapFive()定義 |
