kaminariでページネーションを実装

今回はコンテンツの一覧表示画面なんかでよく見る

Image from Gyazo

これを実装します。

Googleの検索結果表示画面とかでも(デザインは違うけど)使われてるこれですがページネーションと言います。

一覧ページの表示件数が多くなるとこのページネーションか、TwitterやYouTubeなどで使われている無限スクロールか、 どちらかを使うことになると思いますが今回はページネーションを実装しました。

ページネーションのメリットとしては

  • コンテンツが何ページあるのか、始まりと終わりを知らせることができる
  • 情報量が多くなることによる読み込み速度の低下を避けることができる

などが挙げられると思います。
では実装していきましょう。

gem kaminari

ページネーションの実装のためkaminariを導入します。
kaminariはページネーションを簡単に実装できるrubyのgemです。

インストール

まずGemfileに

gem 'kaminari'

として bundle installします。

設定ファイルの作成

ターミナルで

$ rails g kaminari:config

としてkaminariの設定ファイルを作成します

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

今回は表示件数を20件にしたかったので1ページあたりの表示件数を設定している

# config.default_per_page = 25

を

config.default_per_page = 20

とし、一旦サーバーを立ち上げなおします。

デザインを変更する

bootstrap4を当てたいので

$ rails g kaminari:views bootstrap4

を実行。
app/views/kaminariディレクトリが生成され、ページネーションにbootstrapデザインが適用されます。

表示させる

準備が整ったので実際に表示させるためにcontroller、viewを編集します。
掲示板一覧画面でページネーションさせたいので、boards_controllerで

  def index
    @boards = Board.includes(:user).order(created_at: :desc).page(params[:page])
  end

とします。
pageはkaminariで定義されているメソッドです。

viewファイルのページネーションを表示させたいところに

<%= paginate @boards %>

とします。
これだけでページネーションを実装できました。

最後に

新しいgemを導入すると設定やらなんやらで時間がかかってしまうんですが、kaminariはすんなり導入できました。 ただconfigファイルをほとんど触ってないので、ユーザビリティを考えると色々設定した方が良いと思います。 今回は導入の手順ということで最小限で実装しました。 この記事が参考になれば嬉しいです。
最後まで読んでくださり、ありがとうございました。