【初心者向け】いいね機能でハートマークを切り替える方法といいね数の表示をする

#この記事のゴール
・初心者が手始めにいいねマークを作成し、投稿のハートマーク部分を押すと赤いハートマークに表示が変わるところまで。
・Ajaxを用いての非同期処理は取り扱ません。
・いいねの数を表示させる。

難しい技術は使用できないけど、いいね機能を実装したい初心者向けの記事になります。

#いいね機能作成の準備〜いいねの有無で表示を変える
以下の流れで作成していきます。
①Likeモデルの作成
②モデルの関連付け
③コントローラ、ルーティングの作成
④ハートマークにリンクを追加
⑤CSSを使い表示を変える
⑥いいねの数を表示する

##①Likeモデルの作成
ターミナルにてモデルを作成します。

```ターミナル
$ rails g model like user_id:integer topic_id:integer
```
その後、マイグレーションを実行し、モデルの作成は完了です。

```ターミナル
$ rails db:migrate
```
##②モデルの関連付け
次はモデルの関連付けを行います。
Userから見てLikeモデルはたくさん存在しています。

・Userから見てLikeは複数存在している
・Likeから見てUserはひとつ存在する
という関連をコードに落としていきます。

つまりUserモデルに「has_many :likes」、Likeモデルに「belongs_to :user」を書いていきます。
※注意点
has_manyは複数形なのでモデルを複数形の「:likes」に、belongs_toは単数形なのでモデルを単数形の「:user」と書きます。

##③コントローラ、ルーティングの作成

```ターミナル
$ rails g controller likes
```

```config/routes.rb
get  'favorites/index'
post '/favorites', to: 'favorites#create'
```

```likes_controller.rb
class LikesController < ApplicationController
  def index
    @like_topics = current_user.like_topics
  end

  def create
    like = Like.new #Likeクラスのインスタンスを作成
    like.user_id = current_user.id #current_userのidを変数に代入
    like.topic_id = params[:topic_id]

    if like.save #likeが保存できているかどうかで条件分岐
      redirect_to topics_path, success: 'いいねしました'
    else
      redirect_to topics_path, danger: 'いいねに失敗しました'
    end
  end

  def destroy
    @like = Like.find_by(user_id: current_user.id, topic_id: params[:topic_id])
    @like.destroy
    redirect_to topics_path, success: 'いいねを取り消しました'
  end
end
```
##④ハートマークを用意し、リンクを追加
###ハートマークを追加する
今回は[Fontawesome](https://fontawesome.com/)からハートマークのアイコンを持ってきます。
アイコンは以下の画像の左上から二番目のハートマークを使用します。
![スクリーンショット 2019-10-14 22.30.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404519/02521f84-2a39-a458-dc91-8d1c426d493e.png)

今回使用するハートマークのHTMLコードは以下になります。

```
<i class="far fa-heart"></i>
```

これを使って投稿一覧ページの中に以下のコードを書いていきます。ここまで書けたらあとはCSSにて表示を変えるようにしていきます。

```erb:topics/index.html.erb
<% if !topic.like_users.include?(current_user) %>
  <%= link_to likes_path(topic_id: topic.id), method: :post do %>
    <i class="far fa-heart like-btn" ></i>
  <% end %>
<% else %>
  <%= link_to likes_path(topic_id: topic.id), method: :delete do %>
    <i class="fas fa-heart unlike-btn"></i>
  <% end %>
<% end %>
```
##⑤CSSによって表示を変える
ハートマークにそれぞれlike-btnとunlike-btnというクラスを指定したので、それぞれCSSにて色を変えていきます。like-btn（いいねされる前のボタン）には灰色、unlike-btn(いいねされた後のボタン)には赤色のCSSを適用します。（細かい部分は個人で調整してみてください）

```stylesheets/hogehoge.scss
.like-btn {
 width: 25px;
 height: 30px;
 font-size: 25px;
 color: #808080; 
 margin-left: 20px;
 }
  
.unlike-btn {
 width: 25px;
 height: 30px;
 font-size: 25px;
 color: #e54747;
 margin-left: 20px;
 }

##⑥いいねの数をビューに表示する
投稿一覧ページに表示する
countメソッドを使いいいねの数を引っ張ってきます。

```/views/topics/index.html.erb
<%= topic.like_users.count %>
```

#完成！
以上で完成です。以下の画像が完成の例になります。ハートマークが赤くなり、いいね数が表示されているのがわかると思います。
![スクリーンショット 2019-10-14 23.00.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404519/aec37ce0-1664-0abe-978e-19ac1a87249f.png)
![スクリーンショット 2019-10-14 23.00.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404519/5fbbd6be-ea6f-fbd0-e0ea-c0b8b3353876.png)

参考サイト
https://azusas.com/font-awesome-change-colors-sizes/

https://giga-log.com/homepage/fontawesome-list/

https://saruwakakun.com/html-css/basic/font-awesome#san3