はじめに
Railsでページネーションを作るとき、kaminariというgemを使う人が多いでしょう。
この記事では、kaminariでページネーションを作成する方法を丁寧に解説します。
- kaminariって？
- 実装の方法を忘れちゃった...
という人の参考になれば嬉しいです。
kaminariでページネーションを作る手順
先に全体像を解説しておきます。
ちなみに、3で最低限の実装は完了になります。
ですので、4以降は必要であれば修正してください。
-
kaminariを追加する - コントローラーを修正する
- ビューファイルを修正する
- ページネーションの文言をわかりやすくする
- レイアウトを修正する
- 設定ファイルを変更する
それでは、いきましょう
１. kaminariを追加する
まずはGemfileに以下のように記述してkaminariをインストールしましょう。
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. ビューファイルを修正する
ビューファイルにページネーションを表示しましょう。
下記のコードを追加するだけです↓
<%= paginate @books %>
実際にアクセスしてください。
レコード数によりますが、下記のようなページネーションが作成されてるでしょう。
これで最低限のページネーションは作成できました。
4以降はレイアウトや設定を変更してよりkaminariを便利にしていきます。
4. ページネーションの文言をわかりやすくする
現状のページネーションは英語で、さらにTruncateという文字も表示されています。
こちらを日本語にして、Truncateは・・・になるように修正していきます。
i18nというgemを使って修正していきます。
i18nはデフォルトでインストールされているので、下記設定を追記してください。
module AppName
class Application < Rails::Application
...
# 下記の1行を追加する
config.i18n.default_locale = :ja
end
end
そして、config/lacales/ja.ymlファイルを作成して下記を追加してください↓
ja:
views:
pagination:
first: "« 最初"
last: "最後 »"
previous: "‹ 前"
next: "次 ›"
truncate: "…"
実際の表示です↓
ちなみに、font awesomeを導入しているようなら下記のように設定してもOKです。
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: "…"
実際の表示です↓
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ファイルが作成されました。
これを編集していきます
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の値だけレコードが取得されます。
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アプリには欠かせないですよね。
この記事が実装の参考になれば嬉しいです。
記事がいいなと思ったら、ぜひいいねをしていただけますと嬉しいです。
それでは！