👀

【Rails7】 Hotwire で「もっと見る」を実装する！

2022/12/03に公開

Rails

「もっと見る」ボタンを押してアイテムの表示件数を増やすやつをRails7で実装します。
↓こういうやつ！（データ50件登録したの間違いだった！！多い！！）

昔は、link_to に remote: true とかつけてゴニョゴニョやってたのですが、Rails7から remote: true が使えなくなったので
Hotwireを使って実装してみようという試みです。

環境

ruby: 3.1.2
rails: 7.0.4
kaminari: 1.2.2
turbo-rails: 1.3.2

実装していきますぞ

まず、ルーティングを設定します。
more は、もっと見る ボタンを押したときに走るアクションです。（名前もっとあっただろ。。。）

config/routes.rb

resources :posts do
  collection do
    get :more
  end
end

次に、コントローラーを作ります。ひとまず、5件ずつ表示することにします。
render turbo_stream とすることで、画面遷移せずに turbo_stream を使ってページの特定範囲を書き換えることができます。
今回使った、 turbo_stream.append turbo_stream.update 以外にもメソッドがあるので、用途に応じて使い分けましょう！

posts_controller.rb

def index
  @posts = Post.all.page(1).per(5)
end

def more
  @posts = Post.all.page(params[:page]).per(5)

  render turbo_stream: [
    turbo_stream.append("posts", partial: "posts"),
    turbo_stream.update("more_link", partial: "more_link"),
  ]
end

最後に、viewsを作ります。

posts/index.html.erb

<%= turbo_frame_tag 'posts' do %>
  <%= render 'posts' %>
<% end %>
<%= turbo_frame_tag 'more_link' do %>
  <%= render 'more_link' %>
<% end %>

posts/_posts.html.erb

<% @posts.each do |post| %>
  <div><%= post.title %></div>
<% end %>

posts/_more_link.html.erb

<% if @posts.next_page %>
  <%= link_to 'もっと見る', more_posts_path(page: @posts.next_page) %>
<% end %>

できた！

これで完成です！
意外と簡単にできて拍子抜けしました。
知見がまだまだ少ないので全然手を出していなかったのですが、リッチなJSを使わずにRailsだけで簡単なWebアプリケーションを作る時には重宝しそうですね！

環境

実装していきますぞ

できた！

Discussion