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でサンプルコードを公開しています。
記事でご紹介したポイントは以下のコミットでご確認いただけます。
参考資料
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UmFpbHMlMjA3LjAlMjAlMkIlMjBSdWJ5JTIwMy4xJUUzJTgxJUE3JUUzJTgyJUJDJUUzJTgzJUFEJUUzJTgxJThCJUUzJTgyJTg5JUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFCJUUzJTgzJThGJUUzJTgzJTlFJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgxJUE4JUUzJTgxJTkzJUUzJTgyJThEJUUzJTgxJTgyJUUzJTgyJThDJUUzJTgxJTkzJUUzJTgyJThDJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz0wY2MzMmNhZDIxMTRmODcyZmE4MmVjMDc2ZmQzNjM4MA&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwam5jaGl0byZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjBmOTQ1ODBiNzFiNGQ4OWFhZDQwMjIwNjMyYmQwYjQ&blend-x=142&blend-y=491&blend-mode=normal&s=cc2da9cc707c345f2b439d9a7378c0c0)
![](https://dev.to/social_previews/article/918476.png)
以下のRails Guideのv7.0はTurbo利用に準拠していますので参考になります。
![](https://railsguides.jp/images/cover_for_facebook.png)
Rails関連のその他Tips
Railsでの開発に関係する様々なTips(短めの技術情報)をTechTipsで発信しています。ご興味があればぜひご覧ください。
![](https://www.techtips.page/assets/ogp-121f1eb0c9ed7f4336e558cd2be97adca3b0875ef321be748d43a5dcc0319c89.png)