# 画面設計書 15-Semantic UI ページネーション

## 概要

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

### 本画面の処理概要

Semantic UIページネーションは、Semantic UI CSSフレームワークのコンポーネント規約に準拠したページネーションナビゲーションを提供する。Semantic UIの「ui pagination menu」クラス構造を使用し、アイコンベースのシェブロンナビゲーションを実装する。

**業務上の目的・背景**：Semantic UIは、人間にとって読みやすいクラス名（Human-Friendly HTML）を特徴とするCSSフレームワークである。企業向けアプリケーションやダッシュボードで広く使用されており、一貫したデザイン言語を提供する。Semantic UIを採用しているプロジェクトでは、フレームワークのデザインシステムに統一されたページネーションが必要となる。

**画面へのアクセス方法**：`$paginator->links('pagination::semantic-ui')`で明示的に指定する。LaravelにはデフォルトでuseSemantlcUi()メソッドは提供されていないため、サービスプロバイダでカスタム設定が必要。

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

**画面遷移**：各ページリンクまたはシェブロンアイコンをクリックすると、対応するページURLへGETリクエストで遷移する。

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

## 関連機能

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

## 画面種別

コンポーネント（ページネーションメニュー）

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| 項目名 | 表示形式 | Semantic UIクラス | 説明 |
|--------|----------|-------------------|------|
| コンテナ | div | ui pagination menu | ページネーションメニュー全体 |
| 前へアイコン | Chevron | icon item | 前ページへのナビゲーション（左シェブロン） |
| ページ番号 | a | item | 各ページへの直接リンク |
| 現在ページ | a | item active | 現在表示中のページ |
| 省略記号 | a | icon item disabled | 省略されたページ範囲 |
| 次へアイコン | Chevron | icon item | 次ページへのナビゲーション（右シェブロン） |

## イベント仕様

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

ユーザーがページ番号（`.item`）をクリックすると、該当ページのURLへ遷移する。
- 現在ページ（`.active`）もクリック可能だが、同じページへの遷移となる

### 2-シェブロンアイコンクリック

左右のシェブロンアイコン（`.icon.item`）をクリックして前後ページへ移動。
- 無効状態（`.disabled`）の場合もリンク自体は存在するが、視覚的に無効化される

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Semantic UI 2.x系のCSSが必要
- アイコンは`<i class="left chevron icon">`/`<i class="right chevron icon">`形式
- Bootstrap系とは異なり、`<ul>/<li>`構造ではなく`<div>/<a>`構造を使用
- 現在ページにhref属性が設定されている点がBootstrap系と異なる
- Laravelにデフォルトの`useSemantlcUi()`メソッドは存在しない

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | render()でビュー名を指定して呼び出す |
| 1-2 | UrlWindow.php | `src/Illuminate/Pagination/UrlWindow.php` | elements配列の生成ロジック |

**読解のコツ**: Semantic UIビューはLaravelでデフォルト設定メソッドがないため、明示的にビュー名を指定して使用する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | links('pagination::semantic-ui')での呼び出し |

**主要処理フロー**:
1. **88-91行目**: `links()`メソッドでビュー名を渡す
2. **100-106行目**: `render()`で指定ビューを使用
3. ViewFactoryで`pagination::semantic-ui`ビューを生成

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | semantic-ui.blade.php | `src/Illuminate/Pagination/resources/views/semantic-ui.blade.php` | Semantic UI固有のクラス構造（37行） |

**主要処理フロー**:
- **2行目**: `class="ui pagination menu"` - Semantic UIのページネーションコンテナ
- **5行目**: `class="icon item disabled"` - 無効状態の前へボタン
- **7行目**: `class="icon item"` - 有効状態の前へボタン
- **5, 7行目**: `<i class="left chevron icon">` - 左シェブロンアイコン
- **20-21行目**: `class="item active"` - 現在ページのアクティブ状態
- **31-32行目**: `<i class="right chevron icon">` - 右シェブロンアイコン

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

```
$paginator->links('pagination::semantic-ui')
    │
    └─ LengthAwarePaginator::render('pagination::semantic-ui')
           │
           ├─ elements() → UrlWindow::make()
           │
           └─ ViewFactory::make('pagination::semantic-ui')
                  │
                  └─ semantic-ui.blade.php
                         │
                         ├─ 前へアイコン（left chevron）
                         │      └─ 無効/有効状態の分岐
                         │
                         ├─ ページ要素のループ
                         │      ├─ 省略記号（disabled item）
                         │      └─ ページリンク（item / item active）
                         │
                         └─ 次へアイコン（right chevron）
                                └─ 有効/無効状態の分岐
```

### データフロー図

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

LengthAwarePaginator  ──▶ semantic-ui.blade.php      ──▶ HTML出力
  - $paginator              │                             <div class="ui pagination menu">
  - $elements               ├─ icon item の生成             <a class="icon item">
                            │      <i class="chevron">         <i class="left chevron icon">
                            │                                </i>
                            ├─ item の生成                  </a>
                            │      active 判定              <a class="item">1</a>
                            │                              <a class="item active">2</a>
                            └─ disabled 判定              ...
                                                          </div>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| semantic-ui.blade.php | `src/Illuminate/Pagination/resources/views/semantic-ui.blade.php` | テンプレート | Semantic UIページネーション描画 |
| LengthAwarePaginator.php | `src/Illuminate/Pagination/LengthAwarePaginator.php` | ソース | ページネーター本体 |
| AbstractPaginator.php | `src/Illuminate/Pagination/AbstractPaginator.php` | ソース | 基底クラス |
| UrlWindow.php | `src/Illuminate/Pagination/UrlWindow.php` | ソース | ページリンク配列生成 |
| PaginationServiceProvider.php | `src/Illuminate/Pagination/PaginationServiceProvider.php` | ソース | ビュー登録 |
