Railsでページネーションとしてpagyを使う

概要

Railsでページネーションを実装するために、pagyというgemが使えます。

ページネーションとは丁付けのことで、例えば記事によって１つの記事が複数のページに分かれており、それを切り替えながら１つの記事を読むというものがあります。 このようなものがページネーションです。

今回は、このpagyというgemを使ってページネーションを実装する方法を紹介します。

環境

• Rails 5.2
• pagy 3.3

インストール

pagyをインストールするためにGemfileに次のように記述します。

gem 'pagy'

次のコマンドでインストールできます。

bundle install

使い方

pagyの使い方は単純です。

例として、Articleというモデルが存在しその一覧を20件ごとに分割して表示したいとします。 そのような場合はコントローラのArticleモデルの一覧の取得時に次のように記述します。

class ArticlesController < ApplicationController
  include Pagy::Backend

  def index
    @pagy, @articles = pagy(Articles.all, items: 20)
  end
end

pagyを使う時には、そのコントローラでinclude Pagy::Backendと記述します。 その後、pagyメソッドの引数にページネーションで表示したい要素を記述します。 items: 20というのは、件数を20として表示するということを表しています。

次にヘルパーに次のように記述します。

module ArticlesHelper
  include Pagy::Frontend
end

include Pagy::Frontendとすることで次のviewで使うpagyのためのメソッドを使えるようにします。

ビューには、次のように記述します。

<% @articles.each do |article| %>
  <div>
    表示したい項目
  </div>
<% end %>

<%== pagy_nav(@pagy) %>

表示方法として既存のものを変える必要はありません。 重要な部分はpagy_nav(@pagy)です。 これはページネーションで前後のページに遷移するためのリンクを生成するものです。

ちなみにページ遷移のデザインとしてBootstrapを使う場合は次のように記述できます。

<% @articles.each do |article| %>
  <div>
    表示したい項目
  </div>
<% end %>

<div class="d-flex justify-content-center">
  <%== pagy_bootstrap_nav(pagy) %>
</div>

注意

ページネーションの仕組みとしてURLにクエリを追加して現在何ページ目なのかを管理しています。 そのため、URLを書き換えるようなgemを使用していたり、JavaScriptの処理をしていたりするとうまく動作しない事があります。

その点に注意して使用しましょう。

さいごに

すぐに使い始める事ができる事がわかると思います。

是非使用の参考にしてみてください。