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

## 概要

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

### 本画面の処理概要

シンプルBootstrap 5ページネーションは、Bootstrap 5のスタイリングを適用した「前へ」「次へ」のみのシンプルなページネーションを提供する。Bootstrap 5の最新クラス構造に対応し、`role="navigation"`とaria-label属性による強化されたアクセシビリティを実装している。

**業務上の目的・背景**：Bootstrap 5を採用したモダンなWebアプリケーションにおいて、パフォーマンスを重視しつつ統一されたデザインを維持する。jQuery非依存のBootstrap 5環境で、シンプルなページ送りナビゲーションを提供する。

**画面へのアクセス方法**：`Paginator::useBootstrapFive()`を設定後、`Paginator`クラス（SimplePaginator）の`links()`を呼び出す。または`$paginator->links('pagination::simple-bootstrap-5')`で明示的に指定する。

**主要な操作・処理内容**：
1. 前のページへのナビゲーション - Bootstrap 5スタイルの「Previous」リンク
2. 次のページへのナビゲーション - Bootstrap 5スタイルの「Next」リンク
3. 無効状態の表示 - `disabled`クラスによる視覚的フィードバック
4. アクセシビリティ - `role="navigation"`とaria-label属性

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

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

## 関連機能

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

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| 項目名 | 表示形式 | CSSクラス | 説明 |
|--------|----------|-----------|------|
| ナビゲーション | nav | role="navigation" | アクセシブルなナビゲーションコンテナ |
| 前へリンク | テキスト「Previous」 | page-item, page-link, disabled（無効時） | 前ページへのナビゲーション |
| 次へリンク | テキスト「Next」 | page-item, page-link, disabled（無効時） | 次ページへのナビゲーション |

## イベント仕様

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

現在のページ番号から1を引いたページへ遷移する。
- 条件：`$paginator->onFirstPage()`がfalseの場合のみリンクが有効
- 無効時：`.page-item.disabled`と`aria-disabled="true"`でスタイリング

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

次のページへ遷移する。
- 条件：`$paginator->hasMorePages()`がtrueの場合のみリンクが有効
- 無効時：`.page-item.disabled`と`aria-disabled="true"`でスタイリング

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Bootstrap 5.x系のCSSが必要
- Bootstrap 4との主な差異：role="navigation"属性の追加、aria-label属性の強化
- `{!! !!}`構文で翻訳出力（HTMLエスケープなし）
- `useBootstrapFive()`設定時、SimplePaginatorはこのビューを自動選択

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Paginator.php | `src/Illuminate/Pagination/Paginator.php` | SimplePaginatorの実装 |
| 1-2 | AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | useBootstrapFive()でのsimple view設定（663行目） |

**読解のコツ**: useBootstrapFive()は`defaultSimpleView('pagination::simple-bootstrap-5')`も設定する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | simple-bootstrap-5.blade.php | `src/Illuminate/Pagination/resources/views/simple-bootstrap-5.blade.php` | Bootstrap 5のアクセシビリティ強化（30行） |

**主要処理フロー**:
- **2行目**: `role="navigation" aria-label="..."` - 強化されたアクセシビリティ
- **6行目**: `page-item disabled` - 無効状態
- **7行目**: `{!! __('pagination.previous') !!}` - 翻訳出力
- **11-13行目**: 有効な前へリンク

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

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

SimplePaginator->links()
    │
    └─ Paginator::render()
           │
           └─ ViewFactory::make($defaultSimpleView)
                  │
                  └─ simple-bootstrap-5.blade.php
                         ├─ role="navigation" 設定
                         ├─ onFirstPage() → 前へ状態
                         └─ hasMorePages() → 次へ状態
```

### データフロー図

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

Paginator             ──▶ simple-bootstrap-5.blade.php ──▶ HTML出力
  - currentPage            │                             <nav role="navigation"
  - hasMore                ├─ アクセシビリティ強化           aria-label="...">
                           │   role="navigation"           <ul class="pagination">
                           │   aria-label                    <li class="page-item">
                           │                                   <span class="page-link">
                           ├─ 前へ判定                           Previous
                           │                                   </span>
                           └─ 次へ判定                        </li>
                                                              ...
                                                              </ul>
                                                              </nav>
```

### 関連ファイル一覧

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