【備忘録】kaminariを使ってページネーションを実装する

はじめに

Railsのgemであるkaminariを用いて、ページネーションを機能を実装した際の手順を、
備忘録としてまとめたいと思います。

実装手順

手順概要

1. kaminariをGemに追加する
2. 設定ファイルを生成&設定を変更する
3. テーマを生成する(任意)
4. コントローラーのデータ取得の処理を修正する
5. 表記を日本語化する

手順詳細

1. kaminariをGemに追加する

以下の通り、Gemfileにkaminariを追加します。

Gemfile

gem 'kaminari'

以下のコマンドを実行して、インストールします。

terminal

bundle install

Docker上で開発している場合は、以下のコマンドを実行します。

terminal

docker-compose build

docker-compose buildを実行してもインストールされない場合は、以下のコマンドを実行します。
(webの部分はdocker-compose.ymlに記載の名前に変更して実行してください)

terminal

docker-compose exec web bundle install

これで、インストールが完了となりますので、次のステップへ進みます。

2. 設定ファイルを生成&設定を変更する

まず、設定ファイルを生成するため、以下のコマンドを実行します。

terminal

rails g kaminari:config

Docker上で開発している場合は、以下のコマンドを実行します。

terminal

docker-compose exec web rails g kaminari:config

実行するとconfig/initializersディレクトリにkaminari_config.rbが生成されるので、ファイルを開きます。
今回は1ページに表示するデータの数を8個にしたかったので、以下のようにコードを追記しました。
(デフォルトの設定は25となっています。)

kaminari_config.rb

Kaminari.configure do |config|
  config.default_per_page = 8
end

3. テーマを生成する(任意)

以下のコマンドを実行して、テーマを生成します。
デフォルトのページネーションのデザインでも良かったのですが、今回はbootstrap4のデザインを採用しました。

terminal

rails g kaminari:views bootstrap4

Docker上で開発している場合は以下のコマンドを実行します。

terminal

docker-compose exec web bunlde exec rails g kaminari:views bootstrap4

bootstrap4以外のテーマもありますので、気になる方はこちらから確認してみてください！

4. コントローラーのデータ取得の処理を修正する

ページネーションしたいデータを取得する際の処理を修正します。
以下参考例です。

products_controller.rb

class ProductsController < ApplicationContorller
  
  def index
-   @products = Product.all
+   @products = Product.page(params[:page])
  end

end

ちなみに以下のようにperを用いることで、ページネーションのデータ数の設定を上書きすることが可能です。

# データ数の上限を4に変更
@products = Product.page(1).per(4)

5. 表記を日本語化する

デフォルトでは日本語化されていないので、日本語で表記されるよう変更します。
config/localesディレクトリ内にあるapplication.rbに以下を追記します。

config/locales/application.rb

require_relative 'boot'

require 'rails/all'

Bundler.require(*Rails.groups)

module Myapp
  class Application < Rails::Application
    
    config.load_defaults 7.0

+   config.i18n.default_locale = :ja
    config.time_zone = 'Tokyo'
  end
end

次にconfig/localesディレクトリにja.ymlを作成し、日本語化するための設定を記載します。
まず、以下のコマンドを実行してja.ymlファイルを作成します。

terminal

touch config/locales/ja.yml

ja.ymlファイルを作成したら、ファイルを開き以下を記載します。

config/locales/ja.yml

ja:
  views:
    pagination:
      first: '最初'
      last: '最後'
      previous: '前'
      next: '次'
      truncate: '...'

画面を開くと設定が反映され、日本語化されて表示されると思います。
以上で、kaminariの設定は終わりです。

最後に

kaminariの設定に関して、ざっくりとまとめてみました。
皆様の参考になりますと幸いです。

参考文献

• 【Rails】kaminariの使い方をざっくりまとめてみた
• kaminari Github
• kaminar_themas Github