【Rails】ページネーションを実装するためのPagyの使い方【初心者向け】

本記事では、Railsアプリケーションでページネーションを実装するための手順を紹介します。。

Pagyというページネーションライブラリを使い、Railsアプリケーションでページネーションを実装する方法を解説します。Pagyはカスタマイズ性が高く幅広いユースケースに対応することができます。

初心者の方でも分かりやすいように、基本的な使い方からトラブルシューティングまで詳しく解説していきます。Pagyを使って、スムーズなページネーションを実現しましょう。

ページネーションとは
Pagy とは
Pagyを利用してページネーションを実現する
トラブルシューティング
まとめ

ページネーションとは

ページネーションとは、ウェブアプリケーションで大量のデータを扱う際にそのデータを複数のページに分割する手法です。大量のデータがある場合でも1ページに表示する件数を制限できるのでユーザーが目的の情報を探しやすくなります。さらにデータ量を制限できるのでWebアプリケーションの性能劣化を防げます。

例えば、ネットショップの商品リストが10,000件ある場合、全てを1ページに表示するとロード時間が長くなります。ページネーションを導入すると、商品リストをページごとに分割して表示できます。さらに、ページネーションはユーザーがページを選択した際に選択したページにすばやく移動できるため、使い勝手が向上します。

Googleの検索結果でもページネーションが使用されています。 Googleで検索すると大量の検索結果件数が表示されますが、一度に表示するのは10件程度です。
各ページへのリンクを設置することでユーザが任意のページへ簡単にアクセスできるように配慮されています。

Pagy とは

PagyはRuby on Rails向けのページネーションライブラリの一種です。

ddnexus/pagy | Github

ページング機能を簡単に実現できます。

Pagyを使用するとWebアプリケーションのページング機能を簡単かつ効率的に実装できます。
開発者はより多くの時間をアプリケーションの機能開発に注力できます。

Pagyを利用してページネーションを実現する

ここではPagyの基本的な使い方を解説します。

Pagy のインストール方法

まず、Gemfileに以下の行を追加します。

gem 'pagy'

次に、bundle installコマンドを実行して、Pagyをアプリケーションにインストールします。
以上でPagyのインストールは完了です。

Pagyを使うための準備

ビューから使用するためにapp/helpers/application_helper.rb にinclude Pagy::Frontendを追記します。

module ApplicationHelper
  include Pagy::Frontend # 追記
end

コントローラから使うためにapp/controllers/application_controller.rbにinclude Pagy::Backendを追記します。

class ApplicationController < ActionController::Base
  include Pagy::Backend  #追記
end

Pagyの基本的な使い方

Pagyを使用するためには、コントローラーでページング用の変数を設定する必要があります。次のように、コントローラーのアクションで、Pagyオブジェクトを生成し、ビューで表示するための変数を設定します。

def index
  @items = Item.all
  @pagy, @items = pagy(@items)
end

上記のコード例ではallで全てのレコードを対象としていあますが、whereメソッドなどActiveRecord::Relation(複数レコード)であれば何でもオーケーです。

最後に、ページネーションのナビゲーションは以下のように一行書くだけで設置できます。

<%== pagy_nav(@pagy) %>

例えば上記では以下のように表示されます。

1ページに表示する件数の変更

Pagyはデフォルト設定で1ページごとに20件ずつとなっています。
この件数を変更するにはコントローラで呼び出したpagyメソッドにitems:オプションを指定します。

例えば1ページあたり50件にしたい場合は以下のように指定します。

def index
  @posts = Post.all
  @pagy, @posts = pagy(@posts, items: 50)
end

Bootstrapでデザインする

Bootstrapを使用すると簡単にある程度きれいなレイアウトが実現できます。
ここではBootstrapを使った基本的なPagyの使用法を解説します。

まずレイアウトファイルapp/views/layoutes/application.html.erbでBootstrapのCSSを読み込みます。
ここでは一番簡単なCDNから読み込む方法で行ないます。

<!DOCTYPE html>
<html>
  <head>
    ...

    <!-- 以下を追加 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>

  ...
</html>

次にconfig/initializers/pagy.rbを作成し、以下を記述します。