【Rails7 / 備忘録】リロードしないとJavaScriptが動かないんだけど、どした？エラー？

開発環境

Ruby 3.2.2
Ruby on Rails 7.0.5

はじめに

最近、Rails７でチャットアプリを開発しているのですが、チャットルームにページ遷移してメッセージを投稿しようとすると、投稿できない
しかし、ページをリロードしてからメッセージを投稿すると、投稿できる。
サーバーサイド側を確認しにいっても間違ってそうなところはないし、、、、
調べていると、メッセージ送信時にイベントが発火するようにJavaScriptを組んでいるのにそれが発火していない模様。

エラー原因がわかり、同じような現象のエラー解決の記事の通り実行するも動作せず、、、
ググっていると以下のようなJavaScriptのコードをTurbolinksのイベントで囲む対策法が多かったです。

JavaScript

document.addEventListener("turbolinks:load", function() {
  // ここにページが読み込まれたときに実行するコードを書く
});

どうやらRails7よりTurbolinksに代わって使用されているTurbo Driveが関係していることが分かったのでそれについてまとめていきます

Turbolinksについては以下の記事で簡単にまとめているのでよかったらご参照ください。

Turbo Driveとは

基本的な機能はTurbolinksと同様で、ページ全体を再読み込みするのではなく、必要な部分だけを更新することで、ページ遷移を高速化します。

Rails7では、Turbolinksに代わりデフォルトでturbo-railsというgemが用意されており、このgemによってTurbo Driveが使えるようになっています。

Gemfile（Rails7）

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

一方、Rails6までは以下のようにデフォルトでTurbolinksがGemfileに含まれており、Turbokinksによりページ遷移の高速化を行っていました。

Gemfile（Rails6）

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'

TurbolinksとTurbo Driveの違い

機能はほとんど同じですが、変更点の一つにイベント名が変わったのが挙げられます。
turbolinks:~~であったのがturbo:~~に変わっています！

Turbolinks	Turbo Drive	内容
turbolinks:load	turbo:load	ページのロード後
turbolinks:click	turbo:click	リンククリック時
turbolinks:before-cache	turbo:before-cache	ページのキャッシュ保存前
turbolinks:before-visit	turbo:before-visit	ページ訪問前
turbolinks:before-render	turbo:before-render	ページのレンダリング前

_{参考：「猫でもわかるHotwire入門 Turbo編」より}

なぜ今までのエラー解決記事でエラー解決できなかったか？

• 結論
  Turbo Driveのイベント名でコードを書かないといけないのに、Turbolinksのイベント名でコードを書いていたから

• 解決法
  読み込ませたいJavaScriptのコードを以下の通り囲むことで、動作させることができました。

document.addEventListener("turbo:load", function() {
  // ページが完全に読み込まれたときに実行されるコード
});

おわりに

時間はかかりましたが、バージョンの違いによって書かないといけないコードが違ってくる場合があることを学ぶことができました。
今後エラー出たときは、このような「内容自体はあっているけど、書き方の違い」も想定していきたいと思いました

参考文献

この記事にはお世話になりました