LoginSignup
4
1
@yocchan_qiita

Railsのページネーションをkaminariで作る方法

Last updated at Posted at 2023-10-27

はじめに

Railsでページネーションを作るとき、kaminariというgemを使う人が多いでしょう。
この記事では、kaminariでページネーションを作成する方法を丁寧に解説します。

  • kaminariって？
  • 実装の方法を忘れちゃった...

という人の参考になれば嬉しいです。

kaminariでページネーションを作る手順

先に全体像を解説しておきます。

ちなみに、3で最低限の実装は完了になります。
ですので、4以降は必要であれば修正してください。

  1. kaminariを追加する
  2. コントローラーを修正する
  3. ビューファイルを修正する
  4. ページネーションの文言をわかりやすくする
  5. レイアウトを修正する
  6. 設定ファイルを変更する

それでは、いきましょう

１. kaminariを追加する

まずはGemfileに以下のように記述してkaminariをインストールしましょう。

Gemfile
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. ビューファイルを修正する

ビューファイルにページネーションを表示しましょう。
下記のコードを追加するだけです↓

index.html.erb
<%= paginate @books %>

実際にアクセスしてください。
レコード数によりますが、下記のようなページネーションが作成されてるでしょう。
Image from Gyazo

これで最低限のページネーションは作成できました。
4以降はレイアウトや設定を変更してよりkaminariを便利にしていきます。

4. ページネーションの文言をわかりやすくする

現状のページネーションは英語で、さらにTruncateという文字も表示されています。
こちらを日本語にして、Truncateは・・・になるように修正していきます。

i18nというgemを使って修正していきます。
i18nはデフォルトでインストールされているので、下記設定を追記してください。

config/application.rb
module AppName
  class Application < Rails::Application
    ...

    # 下記の1行を追加する
    config.i18n.default_locale = :ja
  end
end

そして、config/lacales/ja.ymlファイルを作成して下記を追加してください↓

config/lacales/ja.yml
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "&hellip;"

実際の表示です↓
Image from Gyazo

ちなみに、font awesomeを導入しているようなら下記のように設定してもOKです。

config/lacales/ja.yml
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: "&hellip;"

実際の表示です↓
Image from Gyazo

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だと思います。

イメージはこちらです↓
Image from Gyazo

tailwindcssの場合

実はtailwindcssはまだkaminariのビューファイルにサポートされていません。
なので、手動でファイルを書き換える必要があります。

しかし、下記のプルリクエストのFiles changedをデフォルトの/views/kaminari/フォルダと置き換えることでレイアウトを変更できます↓

なので、以下の手順を実行してください。

  1. rails g kaminari:views defaultを実行する
  2. ファイルを1つずつFiles changedで置き換える

完成のイメージはこちらです↓
Image from Gyazo

もし、上記2つのフレームワークでなければ下記のフォルダ名から探してください↓

6. 設定ファイルを変更する

設定ファイルを変更すれば、デフォルトのデータ取得数(perで指定した数字)を設定したりできます。
便利なので、以下にその方法を書いておきます。

下記コマンドを実行して、設定ファイルを作成してください。

コマンド
rails g kaminari:config

kaminari_config.rbファイルが作成されました。
これを編集していきます

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

全てを取り上げると終わらないので、下記の3つを解説していきます。

1. default_per_page

default_per_pageは、名前から分かる通り、デフォルトのperの値になります。
例えば、下記のように設定してみましょう。

例
# デフォルトで取得するレコード数
config.default_per_page = 10

そうすれば、perメソッドを設定しなかった場合はdefault_per_pageの値だけレコードが取得されます。

books_controller.rb
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

Image from Gyazo

おわりに

kaminariはページネーションを手軽に作成できるので、Webアプリには欠かせないですよね。
この記事が実装の参考になれば嬉しいです。

記事がいいなと思ったら、ぜひいいねをしていただけますと嬉しいです。
それでは！

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
1