【Rails】kaminariを使用してページネーション機能を実装

ページネーションとは

投稿一覧ページなどを複数のページに分割して表示させること。
トップページで全ての投稿を表示させると、データの読み込みに時間がかかるので、ページネーションを使う。

kaminariとは

ページネーションを簡単に実装するためのgem。
kaminari

Gemfileに以下のように記述して、bundle installを実行すると準備完了。

Gemfile

gem 'kaminari'

$ bundle install

設定ファイルをカスタマイズする

kaminariの設定ファイルを作成

$ rails g kaminari:config
    create  config/initializers/kaminari_config.rb

上記コマンドにより、config/initializers ディレクトリ直下に、以下の設定ファイルが生成される。

config/initializers/kaminari_config.rb

# frozen_string_literal: true

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

設定ファイルの説明

• default_per_page
• 1ページあたりの表示件数(デフォルトは25レコード）
• max_per_page
• 1ページあたりの最大表示件数(デフォルトはnil。つまり無限）
• max_pages
• 最大ページ数(デフォルトはnil）
• window
• 現在のページから、左右何ページ分のリンクを表示させるか(デフォルトは4件)
  • 上の例では現在は9ページ目で、左右4ページずつ表示させている。
• outer_window
• 最初(First)と最後(Last)のページから、左右何ページ分のリンクを表示させるか(デフォルトは0件)
• left
• 最初(First)のページから、何ページ分のリンクを表示させるか(デフォルトは0件)
  • 上の例では2ページ表示させている(1、2ページ目)。
• right
• 最終(Last)ページから、何ページ分のリンクを表示させるか(デフォルトは0件)
  • 上の例では１ページ表示させている(17ページ目)。
• page_method_name
• モデルに追加されるページ番号を指定するスコープの名前:page by default
• param_name
• ページ番号を渡すために使用するパラメータ名(デフォルトは:page)
  • Board.page(params[:page]) のようにparamsメソッドで取得できる。
• params_on_first_page
• false by default

上記の例のようにカスタマイズしたコードは、以下の通り。
(※設定ファイルはinitializers配下に存在するファイルのため、rails sを実行してカスタマイズ内容を読み込む必要があることに注意！）

config/initializers/kaminari_config.rb

# frozen_string_literal: true

Kaminari.configure do |config|
  config.default_per_page = 20
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  config.left = 2
  config.right = 1
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end

ページネーションのデザインを変更する

ちなみにさっきの例で使ったページネーションのデザインは、ターミナルでrails g kaminari:views bootstrap4と実行することで、Bootstrap4のデザインに変更していた。

rails g kaminari:views 〇〇(ダウンロードしたいviewテンプレート)

rails g kaminari:views bootstrap4
...
Running via Spring preloader in process 72502
      downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_first_page.html.erb
      downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
      create  app/views/kaminari/_gap.html.erb
      downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_last_page.html.erb
      downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_next_page.html.erb
      downloading app/views/kaminari/_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_page.html.erb
      downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
      create  app/views/kaminari/_paginator.html.erb
      downloading app/views/kaminari/_prev_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_prev_page.html.erb

ウィンドウの文字をi18nで日本語化

localesファイルに記述し、rails sを実行したら反映されている。

config/locales/views/paginate.ja.yml

ja:
  views:
    pagination:
      first: "最初"
      last: "最後"
      previous: "« 前"
      next: "次 »"
      truncate: "..."

おわり

以上です。rai
正直README読んでたら簡単に実装できる内容ですね。