Turboを使った非同期処理

Ruby on Railsのバージョン:7.2.1
Rubyのバージョン:3.3.5

投稿の削除をする際にターボを利用して画面のリダイレクトを行わないようにしてみた。

Turboを使った非同期処理の特徴

1. シンプルなコードで非同期処理
   通常、非同期処理にはJavaScriptやAjaxを記述する必要があります。
   Turboでは、Rails標準の仕組み（Turbo Stream）を利用することで、複雑なJavaScriptを書く必要がありません。
2. 自動的にリクエストとレスポンスを処理
   Turboは、サーバーから返されるレスポンスに応じて、DOMを自動で操作します。
   例えば、 タグで指定された要素を削除したり、更新したりします。
   Turboの非同期処理のメリット
   リアルタイム更新が簡単

必要な部分だけを更新することで、ユーザー体験が向上します。
コードが少ない

JavaScriptやフロントエンドライブラリを多用することなく、Rails側だけで非同期処理を完結できます。
Railsと統合されている
RailsのMVCフレームワークに自然に組み込まれているため、シンプルで保守しやすいです。

---

postscontroller.rb

def destroy
    @post.destroy
    respond_to do |format|
      format.html { redirect_to posts_path, notice: '投稿を削除しました。' }
      format.turbo_stream # Turbo Streamリクエストの場合
    end
end

respond_to do |format| 

respond_toはリクエストされたフォーマット（HTML、Turbo Stream、JSON など）を識別し、それに応じたレスポンスを返します。

format.html { redirect_to posts_path, notice: '投稿を削除しました。' }

HTML形式のリクエストの場合、投稿一覧ページにリダイレクトし、『投稿を削除しました。』とフラッシュメッセージでと表示する

format.turbo_stream # Turbo Streamリクエストの場合

turbo_stream形式のリクエストの場合、destroy.turbo_stream.erbというテンプレートを呼び出し、その内容をクライアントにレスポンスとして送信します。

削除ボタンが押されたときの動作
ボタンに turbo_method: :delete が指定されているため、DELETE リクエストが送信されます。Turboはこのリクエストを Turbo Stream形式 として送信します。

destroy.turbo_stream.erb が呼び出される理由
respond_to 内で format.turbo_stream が指定されており、Railsは対応するビュー（destroy.turbo_stream.erb）を自動的に探して実行します。

.削除ボタンを押下した際のログ

Started DELETE "/posts/9?_method=delete" for ::1 at 2025-01-19 13:26:58 +0900
Processing by PostsController#destroy as TURBO_STREAM

destroy as TURBO_STREAMと記載があるため、turbo_stream形式のリクエストだと分かる。

<% @posts.each do |post| %>
    <div id="<%= dom_id(post) %>">
      <h2><%= link_to post.title, post_path(post) %></h2>
      <p><%= post.content.truncate(100) %></p> 
      <%= link_to "削除", post_path(post), data: { turbo_method: :delete, turbo_confirm: "本当に削除しますか？" }, class: 'btn btn-danger' %>
    </div>
    <hr>
<% end %>

<div id="<%= dom_id(post) %>">

Turbo Streamで対象の投稿を削除する場合、dom_id(post) を指定することで、該当の投稿だけをDOMから消去できます。

destroy.turbo_stream.erb

<%= turbo_stream.remove dom_id(post) %>

turbo_stream.remove
削除された投稿のHTML要素が画面上から消えます。

DOMとは

DOMは、画面上のHTML要素をブラウザが管理するためのデータ構造。
DOMを操作することで、画面の内容や見た目を動的に変更できます。

以上です。