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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 180

Gr.

score 47

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 リンク

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

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

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/07 14:09

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

    キャンセル

check解決した方法

0

単純なミスでした。

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を入れたらちゃんと表示されるようになりました。
お騒がせしました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる