Rails7・Pagyでのページネーションの実装方法 ~ kaminariとの比較も

はじめに

こんにちは、株式会社TOKOSのツキヤです！
本記事では、WEBアプリケーションを作る際には必須と言って良い程の機能「ページネーション」について、実装するための現時点での最有力のgemのPagyについて説明します！
また、今までよく使われていたKaminariとの比較も書いているのでお楽しみに😎

ページネーションとは何か

その前に、ページネーションとは何かについて・メリットを簡単に説明しておきます。
ページネーションとは、ウェブアプリケーションデータにおいて、データを分割して複数のページに分けて表示するテクニックのことを指します。多数のデータを効率よく扱うために重要かつ必須な手段です😎

ツキヤ

UI上では、ブログとかの記事一覧ページにある[1],[2],…[最後] みたいなやつだね！

メリットとしては複数あります！

1. ユーザビリティの向上
   ユーザーは一度に適切な量のデータだけを見ることができるので、情報過多になりにくいです！
   また、求めているデータを探しやすくもなりますね✨
2. パフォーマンスの向上
   一度にロードするデータ量が少なくなるため、ページの読み込み速度が向上し、サーバーへの負荷も軽減されます。これはユーザーにとっても開発者にとっても嬉しいですね😎
3. SEO対策
   1ページあたりのコンテンツ量が適切であれば、検索エンジンがページのコンテンツを正しくインデックスしやすくなります。
   また、よく見る無限ローディングと比べても1ページ単位でインデックスをしてくれるので比較するとSEOの観点で優秀です💪

そろそろページネーションを実装してきたくなったと思うので、本題に入っていきます!!

記事の目的と対象読者

• Railsでページネーションを実装したい方
• ページネーションのgemをKaminariかPagyのどちらにしようか悩んでいる方

PagyとKaminariの比較

実装する前に、皆さんも気になってるKaminariとの比較をします！
両方とも実務で使った経験があるので、参考にしてみてください😎

Kaminariについて

Kaminariとは、Railsにおいてページネーションを実装する上で最も有名なgemです！

昔からあり、直感的に使えます✨
また、Googleで「Rails ページネーション」と調べると大体がKaminariについての記事になっています。
つまり特徴としては、認知度や検索ボリュームの大きさがあると思います！

ツキヤ

検索ボリューム(= 検索して記事がいっぱい出てくる) があると、自分が詰まった時に解決方法に簡単にたどり着ける可能性が上がるね！
初学者はgemを選ぶ時の1つの基準にしてみても良いかも！

Pagyについて

Kaminariに対し、Pagyは比較的最近リリースされたgemです(2018年~)。

なので、記事の数等は少ないですがもちろんKaminariを意識して作られているので優位な点はかなりあります！
それらを今から紹介していきます💪

PagyとKaminariの比較

パフォーマンス（メモリ使用量・スピード等）

PagyはKaminariよりも少ないメモリの使用量に関わらず、高速に動作します。Kaminariは多機能であるがゆえ、若干メモリ使用量が多くなることがあります。具体的には、KaminariはPagyの約36倍のメモリを使用するそうです😨

また、スピードに関してもPagyに軍配が上がります！
具体的には約40倍Pagyの方が早いです✨✨

使用感

使用感に関しては、僕の体感ベースではあまり変わりません。基本的な使い方をする分には、どちらか片方にしかできな機能というのは特に無いです。

パッケージのアップデートサイクル

見落としがちですが、ここを特に気にするべきです！！
Pagyが現時点での最新のリリース日が2023年4月です。
これに比べ、Kaminariは2021年12月です。
Kaminariは良い意味で成熟してるがゆえか、直近のリリースからかなり時間が空いています…。2021年だと、Rails7がリリースされてから1回もリリースされてないことになるので、Turboあたりとの不具合がもしかしたら起こる可能性があるかもしれません💦

ページネーションにどちらを使うべきか

上記の比較内容を見れば一目瞭然なのですが、僕はPagyを強く推します！！
ただ、今後の開発等によってはKaminari、又は更に新しいgemのほうがより適している可能性もあるのでその時々で良く調べてみてください！

Rails7におけるPagyの実装方法

ここからは、Pagyの使い方を説明していきます！
基本的には公式をなぞる形で説明しますので、より詳細が気になる人はぜひ公式を確認してみてください。

下準備として、$ rails g scaffold todo title:string body:text で最低限のTODOリストの状態を作った上で、seedでTODOのレコードを100個作ったものを用意しました！

今は1ページで100個のTODOが並んでいるので、これをPagyでページネーション化していきます

インストール・初期設定

まずはとりあえずGemfileへの追記 + $ bundle install ですね！

# ...
gem 'pagy'

次に下記リンクからpagy.rbをダウンロードし、 config/initializers に配置します！
https://ddnexus.github.io/pagy/quick-start/#2-configure

次に、 app/controllers/application_controller.rb に追記します。

class ApplicationController < ActionController::Base
  include Pagy::Backend
end

最後に、helpers/application_helper.rb に追記します。

class ApplicationController < ActionController::Base
  include Pagy::Backend
end

これで準備完了です💪

ページネーションの設定手順

ここからは実際にページネーションをあてていきます！
まずは、コントローラー側の Todo.all となっている部分を書き換えます！

class TodosController < ApplicationController
  # ...
  def index
    # @todos = Todo.all ここを下記に書き換え
    @pagy, @todos = pagy(Todo.all, items: 10)
  end
end

これで、ページにアクセスすると表示件数が items で設定した10件になっているはずです！

そして、index.html.erbに下記を追記すると、、

<%# 色々な処理... %>
<%== pagy_nav(@pagy) %>

ページネーションが出ています！！
数字をクリックして、他のページに飛べるようになりました✨

<%== pagy_nav(@pagy, link_extra: ‘class=”border bg-white p-1 rounded”‘) %> のように記述することで、任意のclassやidも付与することができます💪

おわりに

今回はPagyの概要から簡単な使い方までを説明しました！
特に難しい設定は無しでページネーションを設定できましたね😎

個人的には、今ページネーションをRailsで実装するならPagyを選びます！
皆さんの参考になれば幸いです🙏

スポンサーリンク