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

Ruby on Rails

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

Pagyというページネーションライブラリを使い、Railsアプリケーションでページネーションを実装する方法を解説します。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を作成し、以下を記述します。

require 'pagy/extras/bootstrap'

ビューで<%== pagy_nav(@pagy) %>の代わりに<%== pagy_bootstrap_nav(@pagy) %>とします。

<%== pagy_bootstrap_nav(@pagy) %>

アプリケーションを起動し表示すると、以下のようにBootstrapを適用したデザインで表示されます。

トラブルシューティング

ページ番号が表示されない

Pagyを使用してページネーションを実装した際に、ページ番号が表示されない場合があります。このような場合は、Pagyオブジェクトが正しくセットアップされていない可能性があります。以下の手順を確認してください。

  • Pagyオブジェクトを正しく作成しているか
  • Pagyオブジェクトをビューに渡しているか
  • ビューでPagyのメソッドを呼び出しているか

ページネーションが動作しない

Pagyを使用してページネーションを実装した際に、ページネーションが動作しない場合があります。このような場合は、以下の手順を確認してください。

  • ルーティングが正しく設定されているか
  • コントローラでPagyのメソッドを呼び出しているか

エラーが発生する

エラーが発生した場合は以下を確認してください。

  • pagy gemをインストールしているか
  • Pagyのモジュールをincludeしているか

まとめ

この記事では、Pagyを使用してRuby on Railsアプリケーションでページネーションを実装する方法を紹介しました。
手順通りやれば簡単に実装できるのでおすすめです。

タイトルとURLをコピーしました