Turbo

Turboは、Rails7以降を使用している方は必須の知識かと思います。

Railsで掲示板アプリの削除機能実装中に、ダイアログ機能を実装したつもりがダイアログが表示されず、即削除されてまい、意図した挙動をしなかった原因を追求したところ、Turboについて理解ができていなかったので、この記事でアウトプットとしていこうと思います。

Turboとは

Turboを理解する前に、Hotwireを知っておく必要がある。

Hotwire

Hotwireとは、Rails7からRailsのデフォルトになった、モダンなWebアプリケーションを作るための新しいアプローチ。

もう少し、詳しく説明すると、
サーバーサイドで生成されたHTMLを直接ブラウザに送信し、JavaScriptを最小限に抑えて、より高速でインタラクティブなウェブアプリケーションを構築することができるRuby on Railsのフレームワーク。

SPAではないが、React等のjsライブラリを使用せずに、SPA風のUXを実現することができるRailsのフレーワークというイメージだろうか。

Hotwireは、主に３つのコンポーネントで構成されている。

・Turbo
・Stimulus
・Strada

Turbo

Turboは、htmlのbody タグのみ置換するSPA風のアプリケーションを作成することができるHotwireのコンポーネントの１つ。

Turboは４つの要素がある。

・Turbo Drive
・Turbo Frames
・Turbo Streams
・Turbo Native

Turbo Drive

Rails7では、Turbo Driveが標準で有効になっている。
Turbo Driveは、ページ間のナビゲーションを高速化するために、全ページをリロードする代わりにHTMLのbodyタグのみを交換する。

今回は、このTurbo Driveを例に説明していく。

従来のRails(Rails7より前）

<%= link_to edit_board_path(board), id: "button-edit-#{board.id}" do %>
  <i class='bi bi-pencil-fill'></i>
<% end %>
<%= link_to board_path(board), id: "button-delete-#{board.id}", method: :delete, data: { confirm: t('defaults.message.delete_confirm') } do %>
   <i class="bi bi-trash-fill"></i>
<% end %>

これだと、削除自体は行えるが、ダイアログの表示は実行されない。

Rails7以降

<%= link_to edit_board_path(board), id: "button-edit-#{board.id}" do %>
<i class="bi bi-pencil-fill"></i>
<% end %>
<%= link_to  board_path(board), id: "button-delete-#{board.id}",
            data: { turbo_method: :delete, turbo_confirm: t('defaults.delete_confirm') } do %>
<i class="bi bi-trash-fill"></i>
<% end %>

method: :delete, data: { confirm: t('defaults.message.delete_confirm') }
↓
data: { turbo_method: :delete, turbo_confirm: t('defaults.delete_confirm') }

link_toメソッドのdataの中に、method属性を追加し、属性の前にturbo_を付与している。

これにより、Rails7のデフォルト機能であるTurboが機能し、Rails7でダイアログの表示ができ、deleteメソッドも機能するようになる。

ダイアログが表示されなかった理由

Turboが標準で有効になっているRails 7アプリケーションでは、
link_to ヘルパーでmethod: :delete と data: { confirm: ... } を使用しても、JavaScriptによる確認ダイアログが表示されず、リンクがクリックされると直接DELETEリクエストが送信される。これは、Turboによって通常のHTMLリクエストとして処理されるため。

まとめ

Rails 7において、従来のRails UJS（Unobtrusive JavaScript）が提供していたいくつかの機能（例えば、link_to ヘルパーでのmethod: :delete と data: { confirm: ... }の使用）は、Turboの導入により異なる方法で実装されるようになった。

これにより、JavaScriptによる確認ダイアログが期待通りに表示されない場合があり、代わりにTurboに適した方法（data: { turbo_method: :delete, turbo_confirm: ... } の使用）を採用されているため、Turboを使用した実装をする必要がある。

参考記事