Kaminariを使ってページネーション機能を実装してみた

導入

Kaminariは、railsでページネーション機能を実装する際によく使われる定番のgemの一つ。

gem ‘kaminari’をgemfileに記載し、いつものようにbundle installをするだけ。

これにより、以下のようなメソッドが使用可能になる。

User.page(1).limit_value       #1ページ目の項目数
User.page(1).total_pages       #全ページ数
User.page(1).current_page      #現在のページ番号
User.page(1).next_page         #次のページ番号
User.page(2).prev_page         #前のページ番号
etc

詳しくは公式ページ参照。実際にコンソールで動かしてみると実感できると思う。

使い方

Kaminariの使用方法は至ってシンプル。 Indexアクションを変更し、ビューファイルで<%= paginate @boards %>といった感じで定義するだけ。

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

Board.all => Board.page(params[:page])に変更。

#boards/index.html.erb
<!-- 掲示板一覧 -->
  <div class="row">
    <div class="col-12">
      <div class="row">
        <% if @boards.present?%>
          <%= render @boards %>
        <% else %>
          <p><%= t('.no_result') %></p>
        <% end %>
      </div>
      <%= paginate @boards %>  <= ここを追加
    </div>
  </div>

ページネーションのバーを挿入したい箇所に、<%= paginate @boards%>と記載するだけ。

デフォルト設定の変更

Kaminariでは、1ページあたりの項目数や全ページ数などがデフォルトで設定されている。 rails g kaminari:configコマンドによりその設定ファイルを閲覧し、また変更する事ができる。

#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

デフォルトでは上のような数値になっており、コメントアウトされている。 変更する際は、コメントアウトを外し、値を変更すれば良い。

Kaminari.configure do |config|
  config.default_per_page = 20
  # 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

bootstrap4をkaminariに適用する

上のままでは少しデザインが貧弱なので、kaminariにbootstrap4を適用してみよう。方法は至ってシンプルで、以下のコマンドをターミナルに入力するだけ。

$ rails g kaminari:views bootstrap4

これでviewsの中にkaminariというディレクトリが自動的に追加され、bootstrap4が適用される。

kaminariをi18nで日本語化する

デフォルトでは英語だが、もちろんkaminariも日本語化する事ができる。 config/localesフォルダに、新しいkaminari_ja.ymlファイルを作成し以下のコードを記述する。

ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: “…”