【Rails】検索機能にTurboFramesを導入してみた！

はじめに

お疲れさまです！
おおくまです！

今回はRailsで実装したWebアプリにTurboFramesを導入してみました！
その際の備忘録になります！

環境

Ruby 3.2.2
Rails 7.0.8
gem ransack を用いて検索機能実装済み

注意点

私はプログラミング学習中で、初学者です。
内容に誤りがある場合があります。
コメント等で教えていただけると幸甚です。

TurboFramesとは？

TurboFramesについてはこちらのサイトを参考にしていただければと思います！

実装前の動作

私のWebアプリでは動物園を地方と動物園名で検索する機能があります！

index.html.erb

<div class="zoo_image items-center text-center justify-center pb-20">
  <div>
    <%= image_tag "zoo_top.webp", alt: "ecommerce", class: "w-full" %>
  </div>
</div>
<div class="flex flex-col justify-center text-center zoo_image text-primary font-zoo">
  <h1 class="text-4xl mb-20">動物園一覧</h1>

  <-----　検索機能　----->
  <%= search_form_for @q do |f| %>
    <div class="flex items-center justify-center mb-10">
      <% selected_area = params[:q][:area_cont] if params[:q].present? %>
      <%= f.select :area_cont, options_for_select(["北海道地方", "東北地方", "関東地方", "中部地方", "関西地方", "中国地方", "四国地方", "九州地方"], selected: selected_area), { include_blank: "地方" }, class: 'input input-bordered input-primary mx-1', style: 'width: 125px;' %>
      <%= f.search_field :name_cont, class: 'input input-bordered input-primary mx-1', placeholder: '動物園名', style: 'width: 180px;' %>
      <%= f.submit '検索', class: 'btn btn-primary text-white mx-1' %>
    </div>
  <% end %>
  <div class="mb-20">
    <% @zoos_by_area.each do |area, zoos| %>
      <div class="text-2xl text-accent mt-10 mb-2"><%= area %></div>
      <ul>
        <% zoos.each do |zoo| %>
          <li class="text-base lg:text-xl link link-primary mb-1">
            <%= link_to "#{zoo.name}(#{zoo.prefecture})", zoo_path(zoo) %>
          </li>
        <% end %>
      </ul>
    <% end %>
  </div>
  <-----　検索機能　----->

</div>

現状だと検索ボタンを押すとページ全体がリロードされてしまっているため、ページの1番上まで戻されてしまいます！

実装後の動作

index.html.erb

<div class="zoo_image items-center text-center justify-center pb-20">
  <div>
    <%= image_tag "zoo_top.webp", alt: "ecommerce", class: "w-full" %>
  </div>
</div>
<div class="flex flex-col justify-center text-center zoo_image text-primary font-zoo">
  <h1 class="text-4xl mb-20">動物園一覧</h1>

  <-----　検索機能　----->
+ <%= search_form_for @q, html: { data: { turbo_frame: "zoo" } } do |f| %>
    <div class="flex items-center justify-center mb-10">
      <% selected_area = params[:q][:area_cont] if params[:q].present? %>
      <%= f.select :area_cont, options_for_select(["北海道地方", "東北地方", "関東地方", "中部地方", "関西地方", "中国地方", "四国地方", "九州地方"], selected: selected_area), { include_blank: "地方" }, class: 'input input-bordered input-primary mx-1', style: 'width: 125px;' %>
      <%= f.search_field :name_cont, class: 'input input-bordered input-primary mx-1', placeholder: '動物園名', style: 'width: 180px;' %>
      <%= f.submit '検索', class: 'btn btn-primary text-white mx-1' %>
    </div>
  <% end %>
  <div class="mb-20">
+   <turbo-frame id="zoo">
      <% @zoos_by_area.each do |area, zoos| %>
        <div class="text-2xl text-accent mt-10 mb-2"><%= area %></div>
        <ul>
          <% zoos.each do |zoo| %>
            <li class="text-base lg:text-xl link link-primary mb-1">
              <%= link_to "#{zoo.name}(#{zoo.prefecture})", zoo_path(zoo), data: { turbo: false } %>
            </li>
          <% end %>
        </ul>
      <% end %>
+   </turbo-frame>
  </div>
  <-----　検索機能　----->

</div>

検索ボタンを押しても、ページの1番上まで戻されなくなりました！
検索フォームにhtml: { data: { turbo_frame: "zoo" }を書き、
検索結果のビューを<turbo-frame id="zoo"> </turbo-frame>で囲みます！
そうすることで、TurboFramesの機能で、ページ全体ではなく、ページを部分的に書き換えてくれます！
これで完了です！

最後まで読んでいただきありがとうございました！