【Rails7】JS不要！Hotwireで無限スクロールを実装する

Hotwireを使ってみる第三弾です！
今回はJSを使わずに、Hotwireで無限スクロールを実装してみます。

下準備

1. Gemをインストールする

gem "kaminari"

2. モデルを作る

$ rails g model post

20240813000000_posts.rb

class CreatePosts < ActiveRecord::Migration[7.1]
  def change
    create_table :posts do |t|
      t.string :name
      t.timestamps
    end
  end
end

実装する

1. ルーティングを設定する

config/routes.rb

resources :posts, only: [:index]

2. コントローラーの実装

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    posts = Post.all
    if params[:page].present?
      @posts = posts.page(params[:page]).per(5)
      render turbo_stream: turbo_stream.replace("posts", partial: "posts")
    else
      @posts = posts.page(1).per(5)
      render :index
    end
  end
end

3. viewsの実装

app/views/posts/index.html.erb

<%= render 'posts' %>

app/views/posts/_posts.html.erb

<% @posts.each do |post| %>
  <div><%= post.name %></div>
<% end %>
<% if @posts.next_page %>
  <%= turbo_frame_tag "posts", loading: :lazy, src: posts_path(page: @posts.next_page) %>
<% end %>

終わり

これで実装完了です！！
loading: :lazy で遅延読み込みをすることにより、無限スクロールを実現しています。
JSを使わずに無限スクロールが実装できるなんて、数年前の自分が知ったらビックリして腰が抜けると思います。
意外と簡単に使えたので、他の機能でも応用できそうですね！