Railsアプリの開発段階では問題ないJSが、Herokuにデプロイしたらうまく機能しない。

Question

railsでテスト開発したアプリをherokuにデプロイしたら、様々な不具合が生じています。
今回はjsがうまく機能しない問題です。

<table class="index-table">
　<tr>
　　<th>順位</th>
　　<th>名前</th>
　　<th>カウント</th>
　　<th>リンク</th>
　</tr>
　<% @tops.each_with_index do |f, i| %>
　<tr class="index-table-tr">
　　<td class="index-table-rank"><%= i+1 %></td>
　　<td class="index-table-name"><%= f.name %></td>
　　<td class="index-table-count">
　　　<% if f.likes_count.nil? %>
　　　　0
　　　<% else %>
　　　　<%= f.likes_count %>
　　　<% end %>
　　</td>
　　<td class="index-table-link">
　　　<%= link_to book_path(f) do %><i class="fas fa-search"></i><% end %>
　　</td>
　</tr>
　<% end %>
</table>

$(function() {
	var counter = 0;
	var text ="";
	var target="";
	$($('.index-table-tr').get().reverse()).each(function(){
	  if ($(this).children('.index-table-count').text() == text) {
		counter++;
		if(target !="")
			target.remove();
	  }
	  else  {
		if(target !="")
			target.attr('rowSpan', counter);
		counter=1;
	  }
	  text = $(this).children('.index-table-count').text();
	  target = $(this).children('.index-table-rank');
	});
});

上記は、カウント数が同じだった場合に以下のように順位のセルを統合して表示するためのコードです。

順位	名前	カウント	リンク
1	aaa	100	リンク
2	ddd	90	リンク
3	eee	75	リンク
4	bbb	75	リンク
5	ccc	55	リンク

順位	名前	カウント	リンク
1	aaa	100	リンク
2	ddd	90	リンク
3	eee	75	リンク
	bbb	75	リンク
5	ccc	55	リンク

※３位と４位の順位セルを縦に結合(文字は中央に寄ります)

この表記でローカルでは問題なく表示されますが、herokuにデプロイしたら下のように崩れて表示されます。

順位	名前	カウント	リンク
1	aaa	100	リンク
ddd	90	リンク
eee	75	リンク
bbb	75	リンク
ccc	55	リンク

原因と解決法を教えてください。

$ rails assets:precompile　してから更新しましたが変化ありません。

デベロッパーツールでconsoleを見てもエラーは何もでていません。

herokuデプロイ後に不具合が出て順次解消していっていますが、いままではローカル環境とサーバー環境でのデータベースの違い(sqlite3, postgresql)によるものでした。そのように、「データベースの違い」といった感じで根本的な原因がわかれば色々調べて自己解決できるでしょうが、この件はローカル環境とサーバー環境で何が食い違っているのかわかりません。なぜローカルで動くjsがデプロイ後にエラー表示もなく崩れるのでしょうか。

Answer 1

jsがブラウザにキャッシュされていたりしないでしょうか？
キャッシュをクリアするか、シークレットモードにするかして確認してみてください。

Comments

[Gr.]

Kta-Mさん
単純なミスだったため、自己解決できました。すみません。
キャッシュが残っていてうまく機能しないこともありえますね。
回答ありがとうございました。

Answer 2

単純なミスでした。

def index
　@tops = Book.all.order(likes_count: "desc").limit(20)
end

コントローラーで上記のように数の多い順に20件だけデータを取っていたのですが、本番環境ではlikes_countにデータをまだ20件分入れておらず、likes_countがnilとなっているものが含まれていたため崩れていました。

以下のように、likes_countがnilの場合「0」と表記するようにしていたので、nilではなく0とカウントされていると勘違いしてしまっていました。

<% if f.likes_count.nil? %>
　0
<% else %>
　<%= f.likes_count %>
<% end %>

20件分likes_countを入れたらちゃんと表示されるようになりました。
お騒がせしました。