Railsのページネーションをkaminariで作る方法

## はじめに
Railsでページネーションを作るとき、kaminariというgemを使う人が多いでしょう。
この記事では、kaminariでページネーションを作成する方法を丁寧に解説します。

- kaminariって？
- 実装の方法を忘れちゃった...

という人の参考になれば嬉しいです。

## kaminariでページネーションを作る手順
先に全体像を解説しておきます。

ちなみに、3で最低限の実装は完了になります。
ですので、4以降は必要であれば修正してください。

1. `kaminari`を追加する
1. コントローラーを修正する
1. ビューファイルを修正する
1. ページネーションの文言をわかりやすくする
1. レイアウトを修正する
1. 設定ファイルを変更する

それでは、いきましょう

### １. `kaminari`を追加する
まずは`Gemfile`に以下のように記述して`kaminari`をインストールしましょう。

```ruby: Gemfile
gem 'kaminari'
```

続いて、下記コマンド実行でインストールしてください。
```bash: ターミナル
bundle install
```

これで`kaminari`の追加は完了しました。
ちなみに、ローカルでサーバーを起動している人は再起動してくださいね。

### 2. コントローラーを修正する
次に`kaminari`の記述に対応してコントローラーを修正しましょう。
`index`などページネーションを追加したいアクションを修正します。


```ruby: 修正前
class BooksController < ApplicationController
  def index
    @books = Book.order(:created_at)
  end
...
```

```ruby: 修正後
class BooksController < ApplicationController
  # 数字や定数名は変更してください
  BOOK_COUNT = 5

  def index
    @books = Book.order(:created_at).page(params[:page]).per(BOOK_COUNT)
  end
...
```

解説すると、`page`メソッドと`per`メソッドを追加しました。
- `page`メソッド → 何ページ目か？
- `per`メソッド → 取得するデータの数

という意味です。

数字を入れると下記のようなイメージです↓
```ruby: 例
# 2ページ目のデータを10個取得する
Book.order(:created_at).page(2).per(10)
```

### 3. ビューファイルを修正する
ビューファイルにページネーションを表示しましょう。
下記のコードを追加するだけです↓

```erb: index.html.erb
<%= paginate @books %>
```

実際にアクセスしてください。
レコード数によりますが、下記のようなページネーションが作成されてるでしょう。
[![Image from Gyazo](https://i.gyazo.com/68a0d1971a20aa237cff87caf484d845.png)](https://gyazo.com/68a0d1971a20aa237cff87caf484d845)

これで最低限のページネーションは作成できました。
4以降はレイアウトや設定を変更してより`kaminari`を便利にしていきます。

### 4. ページネーションの文言をわかりやすくする
現状のページネーションは英語で、さらに`Truncate`という文字も表示されています。
こちらを日本語にして、`Truncate`は`・・・`になるように修正していきます。

`i18n`という`gem`を使って修正していきます。
`i18n`はデフォルトでインストールされているので、下記設定を追記してください。
```ruby: config/application.rb
module AppName
  class Application < Rails::Application
    ...

    # 下記の1行を追加する
    config.i18n.default_locale = :ja
  end
end
```

そして、`config/lacales/ja.yml`ファイルを作成して下記を追加してください↓
```yaml: config/lacales/ja.yml
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "&hellip;"
```

実際の表示です↓
[![Image from Gyazo](https://i.gyazo.com/b193cd3f4b70c36d05e975992abfcab8.png)](https://gyazo.com/b193cd3f4b70c36d05e975992abfcab8)

ちなみに、`font awesome`を導入しているようなら下記のように設定してもOKです。
```yaml: config/lacales/ja.yml
ja:
  views:
    pagination:
      first: <i class="fas fa-angle-double-left"></i>
      last: <i class="fas fa-angle-double-right"></i>
      previous: <i class="fas fa-angle-left"></i>
      next: <i class="fas fa-angle-right"></i>
      truncate: "&hellip;"
```

実際の表示です↓
[![Image from Gyazo](https://i.gyazo.com/d1644f11d6de07e970ffa329bc47bc25.png)](https://gyazo.com/d1644f11d6de07e970ffa329bc47bc25)

### 5. レイアウトを修正する
現状のままでは、味気ないページネーションなのでレイアウトを修正しましょう。
共通の処理を記述してから、それぞれのCSSフレームワークに合わせて解説します。

#### フレームワークなし`CSS`の場合
下記コマンドを実行してください。
また、`erb`以外のライブラリの場合は下記のようにも書きます。(フレームワークの場合も同様です)
```bash: コマンド
rails g kaminari:views default

# hamlの場合
rails g kaminari:views default -e haml

# slimの場合
rails g kaminari:views default -e slim
```

こちらを実行することで、`/views/kaminari/`フォルダ内にビューファイルが作成されたと思います。
そちらにクラスを追加して、cssを書いていけばOKです。

#### `bootstrap`の場合
次に`bootstrap`フレームワークの場合は、下記コマンドを実行してください。
```bash: コマンド
rails g kaminari:views bootstrap4
```

こちらも同じように`/views/kaminari/`フォルダ内に`bootstrap`対応のビューファイルが作成されたと思います。
基本的にいじらなくてOKだと思います。

イメージはこちらです↓
[![Image from Gyazo](https://i.gyazo.com/7dc7d29c3130165a8696981a84c1bb8e.png)](https://gyazo.com/7dc7d29c3130165a8696981a84c1bb8e)

#### `tailwindcss`の場合
実は`tailwindcss`はまだ`kaminari`のビューファイルにサポートされていません。
なので、手動でファイルを書き換える必要があります。

しかし、下記のプルリクエストの`Files changed`をデフォルトの`/views/kaminari/`フォルダと置き換えることでレイアウトを変更できます↓

https://github.com/amatsuda/kaminari_themes/pull/73

なので、以下の手順を実行してください。
1. `rails g kaminari:views default`を実行する
1. ファイルを1つずつ[Files changed](https://github.com/amatsuda/kaminari_themes/pull/73/files)で置き換える

完成のイメージはこちらです↓
[![Image from Gyazo](https://i.gyazo.com/0a706f8dfba7b705d513860c16499ee7.png)](https://gyazo.com/0a706f8dfba7b705d513860c16499ee7)

---
もし、上記2つのフレームワークでなければ下記のフォルダ名から探してください↓

https://github.com/amatsuda/kaminari_themes

### 6. 設定ファイルを変更する
設定ファイルを変更すれば、デフォルトのデータ取得数(`per`で指定した数字)を設定したりできます。
便利なので、以下にその方法を書いておきます。

下記コマンドを実行して、設定ファイルを作成してください。
```bash: コマンド
rails g kaminari:config
```

`kaminari_config.rb`ファイルが作成されました。
これを編集していきます
```ruby: config/initializers/kaminari_config.rb
Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end
```

全てを取り上げると終わらないので、下記の3つを解説していきます。
#### 1. `default_per_page`
`default_per_page`は、名前から分かる通り、デフォルトの`per`の値になります。
例えば、下記のように設定してみましょう。

```ruby: 例
# デフォルトで取得するレコード数
config.default_per_page = 10
```

そうすれば、`per`メソッドを設定しなかった場合は`default_per_page`の値だけレコードが取得されます。
```ruby: books_controller.rb
class BooksController < ApplicationController
  def index
    # perメソッドを省略してかける(10個のデータが取得される)
    @books = Book.order(:created_at).page(params[:page])
  end
...
```
#### 2. `max_per_page`
`max_per_page`は1ページで取得できるデータ数の上限になります。
```ruby: 例
# 1ページで100個以上のデータは取得しない
config.max_per_page = 100
```

#### 3. `window`
`window`は表示するページのリンク数を指定できます。
```ruby: 例
# 表示するページのリンク数は6になる
config.window = 6
```

[![Image from Gyazo](https://i.gyazo.com/54191e48b0060a36a768dfef573fda3b.png)](https://gyazo.com/54191e48b0060a36a768dfef573fda3b)

## おわりに
`kaminari`はページネーションを手軽に作成できるので、Webアプリには欠かせないですよね。
この記事が実装の参考になれば嬉しいです。

記事がいいなと思ったら、ぜひいいねをしていただけますと嬉しいです。
それでは！