LoginSignup
5

More than 1 year has passed since last update.

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

Posted at

目標

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

開発環境

ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

前提

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

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

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

1ページあたりの表示件数を指定

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])

実際の記述:【Ruby on Rails】ランキング表示(合計、平均値)

その他機能

【Rails】自動で次のページへ!!jscrollによるページネーションの無限スクロール

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

まとめ

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

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

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
What you can do with signing up
5