この記事のゴール
・初心者が手始めにいいねマークを作成し、投稿のハートマーク部分を押すと赤いハートマークに表示が変わるところまで。
・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
get 'favorites/index'
post '/favorites', to: 'favorites#create'
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からハートマークのアイコンを持ってきます。
アイコンは以下の画像の左上から二番目のハートマークを使用します。
今回使用するハートマークのHTMLコードは以下になります。
<i class="far fa-heart"></i>
これを使って投稿一覧ページの中に以下のコードを書いていきます。ここまで書けたらあとはCSSにて表示を変えるようにしていきます。
<% 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を適用します。（細かい部分は個人で調整してみてください）
.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 %>
完成！
以上で完成です。以下の画像が完成の例になります。ハートマークが赤くなり、いいね数が表示されているのがわかると思います。
参考サイト
https://azusas.com/font-awesome-change-colors-sizes/