ページをリロードしないとJavaScriptが動かない
会社検索のボタンをJavascriptで実装し１回目の条件検索を行うときはボタンを押せるが、一回絞り込み検索した後に再度ボタンを押そうとすると反応しない。
解決方法
app/views/layouts/application.html.erb
<body data-turbo="false">
<main>
<%= yield %>
</main>
</body>
bodyタグにdata-turbo="false"を記載し、turboを無効化にすると解決しました。
もしくは
app/views/companies/index.html.erb
<script data-turbo="false">
</script>
scriptタグにdata-turbo="false"を記載し、turboを無効化にすると解決しました。
解決できなかった方法
色々な記事を見ていると大体は下記をJavaScriptの描かれているところに記載すれば解決できると書いていたが、これでは解決できなかった。
<script>
document.addEventListener("turbolinks:load", function() {
// ...
})
</script>
turboとは
従来、Railsはサーバーサイドレンダリングを利用し、ページ遷移の度にページ全体をリロードしていた。しかし、この方法ではレスポンスの待機時間が増えてしまうことが問題だった。そこで、Turboはページ遷移を軽量化し、部分的にHTMLを更新することで、ユーザーの待機時間を減らし、インタラクションをスムーズにした。
Turbo発動時、遷移先のページを一から新たに読み込んでいるわけではないので、jsファイルが読み込まれていないという状況が発生し動作しないということが起きる。
参考文献
https://qiita.com/shibata0406/items/861df68467f3bee22a94
https://zenn.dev/takeda_kaho/articles/a37d064db1bad4
https://www.next.inc/articles/2025/railsのhotwireとturboとは
https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/turbo-drive