前置きなく本題早速入ります
環境
- Windows, WSL
- Docker
- Ruby 3.2.3
- Rails 7.1.3
こうすることで解決した
👇エラーが起こっていたコード
<%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-primary" %>
👇エラー解消コード
<%= link_to "ログアウト", destroy_user_session_path, class: "text-sm font-semibold leading-6 text-gray-900", data: { turbo_method: :delete } %>
一体何がいけなかったのか？
-
Turboの影響:
- Rails 7以降では、Turboがデフォルトで使われる。（Turboはページの部分的な更新を可能にし、ページ遷移を軽くするライブラリ）
-
method: :deleteを使ったときに、UJS（Unobtrusive JavaScript）が正しく動作しない場合、Turboはこの情報を正しく処理できないことがある。
-
data: { turbo_method: :delete }の使用:-
data: { turbo_method: :delete }を使うことで、TurboがこのリンクがDELETEリクエストであることを理解し、正しく処理。 - これにより、JavaScriptが直接関与することなく、Railsのログアウト機能を正しく呼び出すことができる。
-
-
UJSとTurboの連携:
- 元のコードでは、
method: :deleteを指定してUJSに依存していたが、なぜかUJSが動作せず、DELETEリクエストが適切に送信されていなかった？！ - Turboを使用することで、リクエストのメソッドを指定するための新しい方法が提供。正しく機能しログアウトができた。
- 元のコードでは、
★UJSについて★
UJS（Unobtrusive JavaScript）は、Railsが提供するJavaScriptライブラリで、特にリンクやフォームの動作を強化するために使用。
UJSを使うことで、例えばリンクにmethod: :deleteやmethod: :patchなどを指定し、サーバーに対して正しいHTTPメソッドを送信することができます。
Rails 6以前では、application.jsファイルでUJSを読み込むように設定されていたそうです。
app/assets/javascripts/application.jsに下記のような記述がある
//= require rails-ujs
ついでにRails7以降では次のように確認できるそうです
-
Rails 7以降（
importmapを使う場合）では、config/importmap.rbにpin "@rails/ujs"があるか確認し、app/javascript/application.jsでインポートされているか確認。 -
Webpackerを使っている場合では、
package.jsonに@rails/ujsが含まれているか、そしてapp/javascript/packs/application.jsでインポートされているか確認。
さいごにまとめ
- Rails 7以降はTurboが加わったことをしる
- Turboを考慮してコードを書くことが大切！
- 今回の記事が何か参考になれば幸いです。