RubyonRailsにてフリマアプリ実装中、JavaScriptがうまく動かなかった件について。
初学者のアウトプット用記事なので、情報の信憑性の低さについてはご容赦ください。同じところで苦戦している初学者の方にも参考になれば幸いです。
当記事はRails７で実装した際の記録であり、具体的にはgemfileに以下のTurbolinksに関する記述がある場合を想定しています。該当しない場合は、当記事の内容が合わない場合がありますのでご注意ください。
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
不具合の具体的な内容
商品出品ページで販売価格を入力した時に、販売手数料と利益も同時に表示されるようにしたい。JavaScriptの実装後、ローカル環境で動作を確認したときに問題発生。JavaScriptのコードは問題なく書けているのに、商品出品ページに遷移しても動かない。なぜ？
商品出品ページを開いた状態でリロードすると、正常に動くようになる。でも、一度トップページに戻ってまた商品出品ページに遷移するとまた動かない、リロードすると動く、の繰り返し。
ページ遷移だけで動かないのはTurbolinksが原因
原因を調べてみるとRailsにデフォルトで組み込まれているTurbolinksという機能が影響して、上記のような誤作動が起こっているようでした。Turbolinksを無効化することで、JavaScriptが正常に動くようになります。
ただし、Turbolinksはページ遷移を高速化するために組み込まれている機能なので、ユーザーが快適にアプリを使えるようするために必要な機能です。なので、無効化が必要な箇所にだけ以下の記述を行います。
解決方法（Tubolinksを無効化）
Tutbolinksを無効化する方法のひとつに、link_toにdata: {turbo: false}を追記する方法があります。
元の記述
<%= link_to('/items/new', class: 'purchase-btn') do %>
Turbolinksを無効化
<%= link_to('/items/new', data: {turbo: false }, class: 'purchase-btn') do %>
トップページから商品購入ページに遷移する際のTurbolinksを無効化したいので、トップページのビュー（index.html.erb）に記述してあるlink_to（商品出品ページへのリンク）にdata:{turbo: failse}を追記しています。
Turbolinksを削除すれば簡単？
Turbolinks自体を削除すればJavascriptが問題なく動くようになりますが、この方法はおすすめできません。理由は上記のとおり、Turbolinksはページ遷移の高速化をしているので、こちらの恩恵を受けられなくなるからです。
まとめ
・Turbolinksの影響で、ページ遷移時にJavascriptが正常に動かないことがある。
・ページ遷移で動かなくても、リロードすると動くようになる。
・TurbolinksはRailsにデフォルトで入っているGem。
・Turbolinksを無効化するとJavaScriptが正常に動作するようになる。
・TurbolinksでRailsアプリのページ遷移を高速化している。
・link_toにdata: {turbo: false }を記述することで、無効化が必要な箇所だけ無効化することができる。