PagyとTurbo Framesで手動無限スクロールをセットアップするための完全ガイド

最近仕事で、pagyを使ってボタンを押すたびに情報が出力される手動の無限スクロールを実装する際に苦労したので同じように苦労している方のために説明したいと思います。

参考にした実装

完成デザイン

moreボタンを押下すると表示が増え、取得した情報がなくなるとボタンも消えます。

環境

• Ruby 3.2.2
• Rails 7.1.3.4
• gem
  • turbo-rails
  • pagy
• viewの拡張子はhaml

pagyのセットアップ

gemのインストール

pagyというページネーション用のGemがあるので、インストールします。

.Gemfile

gem 'pagy'
gem 'turbo-rails'

bundle install

Controller

Controller側ではapplication_controller.rb に以下を追記します。

app/controllers/application_controller.rb

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

helper

app/helpers/application_helper.rbに以下を追記します。

app/helpers/application_helper.rb

module ApplicationHelper
  include Pagy::Frontend #追記
end

これでスクロールを実装する準備が整ったので実装していきます。

データ取得

ユーザ一覧を取得すると仮定しましょう。
まずはコントローラーのapp/controllers/users_controller.rbにusersテーブルからデータを取得するためのコードを追加します。

app/controllers/users_controller.rb

def index
  @pagy, @users = pagy(User.all, limit: 4)
    
  respond_to do |format|
    format.html
    format.turbo_stream if turbo_frame_request?
  end
end

limitでは一度に表示するデータの数を決めることができます。
バージョンが9.0.0より古い場合、limitではなくitemsでの指定となるので注意してください。

表示部分の作成

app/views/users内の以下のファイルにコードを追加していきます。
ファイルがない場合はファイルを作成してください。

• index.html.haml
• _user.html.haml
• _pager.html.haml
• index.html+turbo_frame.haml

index.html.haml

app/views/users/index.html.hamlに以下を追加します。

index.html.haml

%h1 ユーザー一覧
%table
  %thead
    %tr
      %th 名前
      %th 住所
      %th 会社名
  = turbo_frame_tag 'page_handler'
  %tbody{id: 'users'}
    = render @users
.more-container
  = render 'pager', pagy: @pagy

index.html.hamlには基本的な表示のコードを書きます。
表の中身とボタンはパーシャルを読み込むような形で記述します。

_user.html.haml

表に表示したい中身を書きます。
`app/views/users/_user.html.hamlに以下を追加します。

_user.html.haml

%tr
  %td= user.name
  %td= user.address
  %td= user.company

.以降はuserテーブルから取得したいカラムを指定しています。

_pager.html.haml

ボタンのコードを書きます。
`app/views/users/_pager.html.hamlに以下を追加します。

_pager.html.haml

#pager
  - if pagy.next
    = link_to 'more', customers_path(page: pagy.next), data: { turbo_frame: 'page_handler' }

index.html+turbo_frame.haml

ボタンを押した際にパーシャルの置き換え、追加を行うコードを書きます。
app/views/users/index.html+turbo_frame.hamlに以下を追加します。

index.html+turbo_frame.haml

= turbo_frame_tag 'page_handler' do
  = turbo_stream_action_tag 'append', target: 'users', template: render(@users).to_s
  = turbo_stream_action_tag 'replace', target: 'pager', template: render('pager', pagy: @pagy).to_s

turbo_stream_action_tagについてはこちらのサイトが簡潔でわかりやすいのでおすすめです。
今回は要素の後ろに新しい要素を追加するappendと要素を置き換えるreplaceを使用しています。
これによってボタンを押すたびに表の中身が追加され、次の情報を追加するためのボタンに置き換わります。

終わりに

pagyは使い方がわかると簡単にページネーションが作成できる優れものです。
この記事を読んで少しでも参考になると幸いです。
ここまで読んでくださりありがとうございます。

参考・引用