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

10222 ワード
Rails Rails テキストリンク

この記事のゴール

・初心者が手始めにいいねマークを作成し、投稿のハートマーク部分を押すと赤いハートマークに表示が変わるところまで。
・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からハートマークのアイコンを持ってきます。
アイコンは以下の画像の左上から二番目のハートマークを使用します。

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

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

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

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 %>

完成！

以上で完成です。以下の画像が完成の例になります。ハートマークが赤くなり、いいね数が表示されているのがわかると思います。

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

再帰アルゴリズム
電子で最初のデスクトップアプリケーションを作る