More than 3 years have passed since last update.

【Ruby on Rails】ページング機能導入

Posted at 2020-10-09

目標

ページング機能を作成し、
一覧表示時の画像読み込み速度低下を防ぐ

ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

※　▶◯◯　を選択すると、説明等が出てきますので、
　　よくわからない場合の参考にしていただければと思います。

今回はgem 'kaminari'を導入し、ページング機能実装します。

Gemfile

gem 'kaminari','~> 1.2.1'

ターミナル

$ bundle install
$ rails g kaminari:config
$ rails g kaminari:views default

これで導入は完成です。

個人的によく使うものを紹介します。
https://github.com/kaminari/kaminari
こちらに詳しい使い方が記載されておりますので、
興味のある方はこちらをみてください。
ただし、全て英語です。

ページングしたい場所に以下を設置。
この場所に1ページ目や2ページ、次へリンクも出てきます。

app/views/homes/index.html.erb

<%= paginate @posts %>

コントローラーをこのように記述することでページングが実装できます。

app/controllers/homes_controller.rb

@posts = posts.page(params[:page])

補足【page(params[:page])】

page(params[:page])　≒　all　と思って頂いて大丈夫です。

コントローラーの記述に書きを追加することで逆の順番にすることが可能。

app/controllers/homes_controller.rb

@posts = posts.page(params[:page]).reverse_order

config/initializers/kaminari_config.rb

  Kaminari.configure do |config|
    config.default_per_page = 5 # この数字でkaminariを使用したすべてのページの1ページあたりの表示上限件数を指定
  end

個別で表示1ページあたりの表示件数を指定する場合

app/controllers/homes_controller.rb

@posts = posts.page(params[:page]).per(10)

補足【表示の優先順位】

優先順位はkaminari_config.rbの数字が優先されるため、 kaminari_config.rb　>=　homes_controller.rb このような数字の優劣をつけてください。

nextやlastなどを変更したい場合、

1 gem 'rails-i18n'を導入
2 config/locals/ja.ymlファイルを作成
3 ja.ymlを編集

上記を行えばOKです。
【ja.yamlの参考】

ja.yaml

ja
  views:
    pagination:
      first: "≪"
      previous: "<"
      next: ">"
      last: "≫"

上記方法で実装する際に、値が配列の場合は表示されないため、
下記のように記述する必要があります。

app/controllers/homes_controller.rb

@posts = Kaminari.paginate_array(配列).page(params[:page])

他にも多くあるので興味のある方はぜひ調べてみてください。

導入自体はそこまで難しくないものの、ページング機能がないと
サイトが成長したときに読み込みが遅く使い物にならないので、
なにかしらのページング機能は必須です。

またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら　https://twitter.com/japwork