【Rails jQuery Raty】ブラウザバックすると星が増える不具合

はじめまして、プログラミングを初めて3ヶ月の初学者です。
Ratyを利用した星評価を実装中に
ブラウザバックで星評価のある画面に戻ると
星5個が星10個になるという不具合にぶつかりました。

いくら検索しても解決せず、最終的にメンターと試行錯誤して解決したので
今日は同じ目に逢ってる方と、いつかの自分の為に記録します。

ちなみに初めて書くのでお手柔らかに…

目次

• 開発環境
• 不具合
• 何故なるのか？
• 結論　←ココが解決策
• 解説
• 試した方法

開発環境

• Cloud9
• ruby '2.6.3'
• Rails 5.2.4.5
• jquery

不具合

本来5つ星での評価をしたいのに、
ブラウザバックで評価の存在するページに戻ると
星の数が倍になる

正しい表示はこう

何故なるのか？

不具合時のコードを見ると記載がこうなります。

show.html.erb

<div id="star-rate-<%= @review.id %>"></div>

 <script>
  $('#star-rate-<%= @review.id %>').raty({
    size: 36,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',
    starHalf: '<%= asset_path('star-half.png') %>',
    readOnly: true,
    score: <%= @review.rate %>,
  });
 </script>

これだと、ページを表示する度に星5つを読み込むことになるとか…
順序で見てみると

1. 星5つが読み込まれたページを表示
2. ページ移行
3. ブラウザバック
4. 星5つが読み込まれたページ　に　再度星5つ読み込む(合計10個になる)

となるのだとか…

つまり星10個の時点で他のベー時に移行し、再度ブラウザバックすると星が15個になってしまうわけです。

結論

ページを表示する際に、一度真っさらにしてしまえばいい。
先ほどのコードに1文追加するだけです。

show.html.erb

 <script>
 $('#star-rate-<%= @review.id %>').empty(); #これを追加
  $('#star-rate-<%= @review.id %>').raty({
    size: 36,
    starOff:  '<%= asset_path('star-off.png') %>',

解説

これについては私もメンターの言葉を鵜呑みにしていたので、調べてみました。
【jQuery】要素を削除する.remove()と.empty()の違い
こちらの記事によると…

empty();
こちらは指定した要素の中にある子要素を削除します。

とのことでした。

メンターの言葉を借りると

星部分を一度削除→再度読み込む。

となるそうです。

試した方法

ついでなので、調べて試してダメだった方法も載せておきます。

.remove();
これだと親要素（星5つを表示するブロック）ごと削除されてしまうらしく
星5つを表示すらされませんでした。

---

周りでも数人同じことで困っていたので、結構よくあるのだと思います。
この記事が役に立ちます様に。