# 画面設計書 12-Bootstrap 4 ページネーション

## 概要

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

### 本画面の処理概要

Bootstrap 4ページネーションは、Bootstrap 4 CSSフレームワークのコンポーネント規約に準拠したページネーションナビゲーションを提供する。このビューはBootstrap 4の`pagination`コンポーネントのクラス構造（`page-item`、`page-link`）を使用し、フレームワークのスタイリングと完全に統合される。

**業務上の目的・背景**：Bootstrap 4は広く採用されているCSSフレームワークであり、多くのWebアプリケーションで使用されている。Bootstrap 4のデザインシステムに統一されたページネーションを提供することで、一貫したユーザーインターフェースを実現する。開発者はBootstrap 4のグリッドシステムやユーティリティクラスと組み合わせて、レスポンシブなページネーションを簡単に実装できる。

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

**主要な操作・処理内容**：
1. 前のページへのナビゲーション - `page-item`と`page-link`クラスを適用した前ページリンク
2. ページ番号リンク - Bootstrap 4スタイルの個別ページリンク
3. 省略記号（...）の表示 - 無効状態のpage-itemとして表示
4. 次のページへのナビゲーション - Bootstrap 4スタイルの次ページリンク
5. アクティブ状態の表示 - `active`クラスによる現在ページのハイライト
6. 無効状態の表示 - `disabled`クラスによる無効リンクの視覚化

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

**権限による表示制御**：ページネーションコンポーネント自体には権限制御機能はない。アクセス権限は呼び出し元で制御される。

## 関連機能

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

## 画面種別

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

## URL/ルーティング

このコンポーネント自体はルーティングを持たない。ページネーションリンクのURLは以下の形式で生成される：
- `{base_path}?page={page_number}`

## 入出力項目

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

## 表示項目

| 項目名 | 表示形式 | CSSクラス | 説明 |
|--------|----------|-----------|------|
| 前へリンク | `<` 記号 | page-item, page-link | 前のページへのナビゲーション |
| ページ番号 | 数字 | page-item, page-link | 各ページへの直接リンク |
| 現在ページ | 数字 | page-item active, page-link | 現在表示中のページ |
| 省略記号 | `...` | page-item disabled, page-link | 省略されたページ範囲 |
| 次へリンク | `>` 記号 | page-item, page-link | 次のページへのナビゲーション |

## イベント仕様

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

ユーザーがページ番号リンク（`.page-link`）をクリックすると、該当ページのURLへ遷移する。
- Bootstrap 4のデフォルトスタイルでホバー効果が適用される
- クリック後は新しいページでアクティブ状態が更新される

### 2-前へ/次へリンククリック

無効状態（`disabled`クラス）でない場合のみナビゲーションが機能する。
- 無効状態ではポインターイベントがCSSで無効化される
- aria-disabled="true"でスクリーンリーダーにも状態が伝達される

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

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

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

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

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

## メッセージ仕様

| 種別 | メッセージキー | 表示内容 | 表示条件 |
|------|---------------|----------|----------|
| ラベル | pagination.previous | Previous | 前へリンクのaria-label |
| ラベル | pagination.next | Next | 次へリンクのaria-label |

## 例外処理

| 状態 | 処理内容 |
|------|----------|
| ページ数が1以下 | ページネーション全体が非表示 |
| 無効なページ番号 | Paginatorが有効なページ番号に正規化 |

## 備考

- Bootstrap 4.x系のCSSが必要（CDNまたはnpmパッケージ）
- `pagination`クラスは`<ul>`要素に、`page-item`は`<li>`要素に、`page-link`は`<a>`または`<span>`要素に適用
- `Paginator::useBootstrap()`はBootstrap 4ビューを設定する（`useBootstrapFour()`のエイリアス）
- アクセシビリティ：aria-disabled、aria-current、aria-hidden属性を使用

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | render()でビューに渡されるデータ |
| 1-2 | AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | useBootstrap()メソッド（628-631行目） |

**読解のコツ**: useBootstrap()はuseBootstrapFour()を呼び出すエイリアスメソッドである。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | useBootstrapFour()（649-653行目）でビュー名を設定 |

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | bootstrap-4.blade.php | `src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php` | Bootstrap 4固有のクラス構造 |

**主要処理フロー**:
- **3行目**: `<ul class="pagination">` - Bootstrap 4のpaginationコンポーネント開始
- **6行目**: `class="page-item disabled"` - 無効状態のリスト項目
- **7行目**: `class="page-link"` - リンク要素のスタイル
- **26行目**: `class="page-item active"` - 現在ページのアクティブ状態

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

```
Paginator::useBootstrapFour() / useBootstrap()
    │
    ├─ AbstractPaginator::defaultView('pagination::bootstrap-4')
    │
    └─ AbstractPaginator::defaultSimpleView('pagination::simple-bootstrap-4')

$paginator->links() / render()
    │
    ├─ LengthAwarePaginator::render()
    │      └─ elements() → UrlWindow::make()
    │
    └─ ViewFactory::make('pagination::bootstrap-4')
            └─ bootstrap-4.blade.php
```

### データフロー図

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

LengthAwarePaginator  ──▶ bootstrap-4.blade.php     ──▶ HTML出力
  - $paginator              - page-item/page-link        <nav>
  - $elements               - disabled/active判定         <ul class="pagination">
                                                          <li class="page-item">
                                                            <a class="page-link">
                                                          </li>
                                                          </ul>
                                                          </nav>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| bootstrap-4.blade.php | `src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php` | テンプレート | Bootstrap 4ページネーション描画 |
| LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | ソース | ページネーター本体 |
| AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | ソース | useBootstrap系メソッド定義 |
| UrlWindow.php | `src/Illuminate/Pagination/UrlWindow.php` | ソース | ページリンク配列生成 |
