【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を使わずに無限スクロールが実装できるなんて、数年前の自分が知ったらビックリして腰が抜けると思います。
意外と簡単に使えたので、他の機能でも応用できそうですね！