Railsでいいね数ランキング機能を作る！

##はじめに
PFでランキング機能を実装したので、
備忘録として書いていきたいです。

いいね機能とランキング機能の実装は以下を参考にさせて頂きました。
Railsでお手軽ランキング機能
Ruby on Rails 〜同率順位も含めたランキング機能〜

##環境
rails 5.2.4

##前提
投稿機能
いいね機能
を実装している

基本的には上記2つの記事を参考にさせて頂いてますが、
変数などは私のアプリケーションのものに変更している箇所もあります。

##ランキング機能実装

images/index.html.erb

  <h1>いいね数ランキング</h1>
    <!--lastFavoritesはその投稿のいいね数を代入するための場所-->
    <% lastFavorite = 0 %>
    <!--jは順位を示す変数。記号は何でもよい。-->
    <% j = 1 %>
    <% @all_ranks.each.with_index(1) do |ranking,i| %>
     <div class="card shadow-lg">
      <% if i == 1 %>
       <% lastFavorite = ranking.favorites.count %>
      <% end %>
      <!--1位はelseの下に行き、2位以下はelseの上を回る-->
      <% if ranking.favorites.count != lastFavorite %>
       <% j = i %>
       <p>第<%= j %>位</p>
       <!--ユーザー名-->  
        <p><%= ranking.user.name %></p>
       <!--投稿画像-->
       <div>
        <%= attachment_image_tag image, :image, size: "400x400", format: 'jpg', fallback: "no_image.jpg" %>
       </div>
       <p>♥<%= ranking.favorites.count %> いいね</p>
       <!--↓ここでfavorites.countをlastFavoritesに代入して上のlastFavoritesに代入する-->
       <% lastFavorite = ranking.favorites.count %>
      <% else %>
       <% lastFavorite = ranking.favorites.count %>
       <p>第<%= j %>位</p>
       <!--ユーザー名-->
       <p><%= ranking.user.name %></p>
       <!--投稿画像-- >
       <div>
        <%= attachment_image_tag image, :hobby, size: "400x400", format: 'jpg', fallback: "no_image.jpg" %>
       </div>
       <p>♥<%= ranking.favorites.count %> いいね</p>
      <% end %>
     </div>
    <% end %>

##解説
解説は参考元のこちらとほとんど被っています。
Ruby on Rails 〜同率順位も含めたランキング機能〜

コメントアウトして書いてありますが分解すると、

image/index

    <!--lastFavoritesはその投稿のいいね数を代入するための場所-->
    <% lastFavorite = 0 %>
    <!--jは順位を示す変数。記号は何でもよい。-->
    <% j = 1 %>

ここで表示する投稿のいいね数を保存するlastFavoriteを宣言します。
jは順位を示すための変数です。それ以上の役割はないので何でもいいです。
順位のjとでも考えてください。

image/index

    <% if i == 1 %>
     <% lastFavorite = ranking.favorites.count %>
    <% end %>

ここで1位のいいね数がlastFavoriteに代入されます。

image/index

      <% if ranking.favorites.count != lastFavorite %>
       <% j = i %>
       <p>第<%= j %>位</p>
       <!--ユーザー名-->  
        <p><%= ranking.user.name %></p>
       <!--投稿画像-->
       <div>
        <%= attachment_image_tag image, :image, size: "400x400", format: 'jpg', fallback: "no_image.jpg" %>
       </div>
       <p>♥<%= ranking.favorites.count %> いいね</p>
       <!--↓ここでfavorites.countをlastFavoritesに代入して上のlastFavoritesに代入する-->
       <% lastFavorite = ranking.favorites.count %>
      <% else %>
       <% lastFavorite = ranking.favorites.count %>
       <p>第<%= j %>位</p>
       <!--ユーザー名-->
       <p><%= ranking.user.name %></p>
       <!--投稿画像-- >
       <div>
        <%= attachment_image_tag image, :hobby, size: "400x400", format: 'jpg', fallback: "no_image.jpg" %>
       </div>
       <p>♥<%= ranking.favorites.count %> いいね</p>
      <% end %>
     </div>
    <% end %>

1位は、

<% if i == 1 %>
　<% lastFavorite = ranking.favorites.count %>
<% end %>

の8行目のif文でlastFavorite = ranking.favorites.countとなっているので、
12行目のif文に弾かれelse以下に行き1位として表示されます。

2位以下は12行目直下の文に行きます。

image/index

　　　<% if ranking.favorites.count != lastFavorite %>
       <% j = i %>
       <p>第<%= j %>位</p>
       <!--ユーザー名-->  
        <p><%= ranking.user.name %></p>
       <!--投稿画像-->
       <div>
        <%= attachment_image_tag image, :image, size: "400x400", format: 'jpg', fallback: "no_image.jpg" %>
       </div>
       <p>♥<%= ranking.favorites.count %> いいね</p>
       <!--↓ここでfavorites.countをlastFavoritesに代入して上のlastFavoritesに代入する-->
       <% lastFavorite = ranking.favorites.count %>

2位以下は基本的にここのif文をぐるぐる回ることになります。
2位以下を順番に表示していき、

仮に2位が50いいねの場合、ranking.favorites.countに50いいねが代入されlastFavoritesが50になります。
いいね数が同数の投稿があればelse以下に行きます。

3位が49いいねの場合、if文直下に行きます。
そして、また一番下のranking.favorites.countに49いいねが代入されlastFavoritesが49になり...
と繰り返し処理が行われます。

最後の説明が分かりにくかったら申し訳ないです。
間違いがありましたらご指摘お願い致します。
解説は以上となります。

ここまで見て頂きありがとうございました。