Rails 7でのTurboの落とし穴:deleteとformメッセージ更新

開発ブログ

Ruby on Rails 7では、rails-ujsが標準構成から外れ、Turboが標準構成に入りました。この記事では、rails-ujsからTurboへ切り替える際の2つの落とし穴とその解決法をご紹介します。

2つの落とし穴とその解決法

deleteが機能せず、確認メッセージも表示されない

Turboでは、rails-ujsで機能していた以下のようなdeleteのリンクが機能せず、リンクをクリックしてもdeleteが実行されず確認メッセージも表示されません。

<%= link_to "delete", user, method: :delete, data: { confirm: "You sure?" } %>

解決策:turbo_methodとturbo_confirmを利用する

以下のように、turbo_methodとturbo_confirmを利用すれば、確認メッセージが表示された後にdeleteが実行されるようになります。

<%= link_to "delete", user, data: {turbo_method: :delete, turbo_confirm: 'Are you sure?'} %>
status: :see_otherに注意

コントローラのdestroyアクションでのリダイレクトにおいて、Turboが問題を引き起こすことがあります。このようなリダイレクトでは、以下のように「status: :see_other」を適切に利用する必要があります。

redirect_to users_url, status: :see_other

バリデーション失敗などを伝えるメッセージが表示されない

フォームから送信されたデータのバリデーションに失敗した場合などに、その失敗理由を示すメッセージを添えてフォームのページを再描画することがあります。Turboでは、renderで適切なステータスコードを選択しなかった場合、ページの再描画が行われず、その結果としてメッセージが表示されません。

解決策:Unprocessable Entityというステータスを返すように指定する

以下のように、renderに「status: :unprocessable_entity」を付与すれば、ページが再描画されメッセージが表示されるようになります。

render 'new', status: :unprocessable_entity

(参考)一時回避策:特定のフォームでTurboを利用しない

以下のように、form_withで「data: { turbo: false }」を指定し、そのフォームではTurboを利用しない設定を行うことで問題を回避できる場合があります。

<%= form_with(url: foo, local: true, data: { turbo: false }) do |f| %>

確認環境(バージョン)

  • ruby 3.1.0
  • Rails 7.0.2.3

サンプル

サンプルコード

GitHubでサンプルコードを公開しています。

GitHub - wakairo/rails7testenv: Test environment for Rails 7
Test environment for Rails 7. Contribute to wakairo/rails7testenv development by creating an account on GitHub.

記事でご紹介したポイントは以下のコミットでご確認いただけます。

Fix troubles related to turbo · wakairo/rails7testenv@413340a
Test environment for Rails 7. Contribute to wakairo/rails7testenv development by creating an account on GitHub.

参考資料

Rails 7.0 + Ruby 3.1でゼロからアプリを作ってみたときにハマったところあれこれ - Qiita
Ruby on Rails Advent Calendar 2021の枠が空いていたので、あとから登録しました はじめに個人的なプロジェクトになりますが、僕が翻訳しているRSpecの入門書「Ev…
How to migrate Rails UJS to Hotwire (Turbo)
See Hotwire handbook Update hotwired/turbo-rails Remove rails/ujs Replace link_to delete Replace...

以下のRails Guideのv7.0はTurbo利用に準拠していますので参考になります。

Rails をはじめよう - Railsガイド
Railsのインストール方法と最初のRailsアプリケーションの作成に必要なすべてを解説します。

Rails関連のその他Tips

Railsでの開発に関係する様々なTips(短めの技術情報)をTechTipsで発信しています。ご興味があればぜひご覧ください。

Ruby
タイトルとURLをコピーしました