はじめに

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

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

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

kaminariでページネーションを作る手順

先に全体像を解説しておきます。

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

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

それでは、いきましょう

１. `kaminari`を追加する

まずはGemfileに以下のように記述してkaminariをインストールしましょう。

Gemfile

gem 'kaminari'

続いて、下記コマンド実行でインストールしてください。

ターミナル

bundle install

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

2. コントローラーを修正する

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

修正前

class BooksController < ApplicationController
  def index
    @books = Book.order(:created_at)
  end
...

修正後

class BooksController < ApplicationController
  # 数字や定数名は変更してください
  BOOK_COUNT = 5

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

解説すると、pageメソッドとperメソッドを追加しました。

pageメソッド → 何ページ目か？
perメソッド → 取得するデータの数

という意味です。

数字を入れると下記のようなイメージです↓

例

# 2ページ目のデータを10個取得する
Book.order(:created_at).page(2).per(10)

3. ビューファイルを修正する

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

index.html.erb

<%= paginate @books %>

実際にアクセスしてください。
レコード数によりますが、下記のようなページネーションが作成されてるでしょう。

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

4. ページネーションの文言をわかりやすくする

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

i18nというgemを使って修正していきます。
i18nはデフォルトでインストールされているので、下記設定を追記してください。

config/application.rb

module AppName
  class Application < Rails::Application
    ...

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

そして、config/lacales/ja.ymlファイルを作成して下記を追加してください↓

config/lacales/ja.yml

ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "&hellip;"

実際の表示です↓

ちなみに、font awesomeを導入しているようなら下記のように設定してもOKです。

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;"

実際の表示です↓

5. レイアウトを修正する

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

フレームワークなし`CSS`の場合

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

コマンド

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フレームワークの場合は、下記コマンドを実行してください。

コマンド

rails g kaminari:views bootstrap4

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

イメージはこちらです↓

`tailwindcss`の場合

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

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

なので、以下の手順を実行してください。

rails g kaminari:views defaultを実行する
ファイルを1つずつFiles changedで置き換える

完成のイメージはこちらです↓

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

6. 設定ファイルを変更する

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

下記コマンドを実行して、設定ファイルを作成してください。

コマンド

rails g kaminari:config

kaminari_config.rbファイルが作成されました。
これを編集していきます

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の値になります。
例えば、下記のように設定してみましょう。

例

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

そうすれば、perメソッドを設定しなかった場合はdefault_per_pageの値だけレコードが取得されます。

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ページで取得できるデータ数の上限になります。

例

# 1ページで100個以上のデータは取得しない
config.max_per_page = 100

3. `window`

windowは表示するページのリンク数を指定できます。

例

# 表示するページのリンク数は6になる
config.window = 6

おわりに

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

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