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

# はじめに
お疲れさまです！
おおくまです！

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

# 環境
:::note
Ruby 3.2.2
Rails 7.0.8
gem ransack を用いて検索機能実装済み
:::

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

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

https://zenn.dev/takeyuwebinc/articles/4bbb3df6ef6344

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

```ruby: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>
```
![画面収録 2023-10-21 0.38.54 2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/4d4caf70-48c9-5779-03f9-957f9e8b836d.gif)

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

# 実装後の動作
```diff_ruby: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>
```

![画面収録 2023-10-21 0.54.22 2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/6e05b298-fbac-d806-289e-61d1d3bb447d.gif)

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

<br>

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