More than 3 years have passed since last update.

[Rails]同期いいね機能を実装する

Last updated at 2021-02-03Posted at 2021-02-03

はじめに

同期いいね機能の実装を覚えるために確認しながら実装しました。

覚えるためというのも兼ねて記述していきます。

ユーザー登録機能には「devise」を使用して作成しています。

今回は投稿の詳細ページにいいね機能を実装していきます。

開発環境

macOS Big Sur 11.1

Ruby 2.6.5

Rails 6.1.1

テーブル

中間テーブルを用意して「いいね！！」を押した時に
「誰がいいねを押したのか」「どの投稿にいいねを押したのか」LikesテーブルにuserとalbumのIDが登録できるようにします。

モデル

アソシエーションの定義は以下のように記述していきます。

user.rb

class User < ApplicationRecord
 has_many :likes
end

album.rb

class Album < ApplicationRecord
 has_many :likes
end

like.rb


class Like < ApplicationRecord
  belongs_to :user
  belongs_to :album
end

ルーティング

likesは「create」と「destroy」のみ使用するので二つ設定していきます。

routes.rb

Rails.application.routes.draw do

post 'like/:id' => 'likes#create', as: 'create_like'
  
delete 'like/:id' => 'likes#destroy', as: 'destroy_like'

end

URI Patternの指定の詳しくはこちら

TechTechMedia:【Rails基礎】URLを自在にカスタマイズ！ルーティングに名前を指定する方法を解説

わかりやすいです。

コントローラー

コントローラーを実装していきます。
「create」と「destroy」の実装をしていきます。

likes_controller

class LikesController < ApplicationController
  def create
      Like.create(user_id: current_user.id, album_id: params[:id])
      redirect_to album_path
    end
  end

  def destroy
  Like.find_by(user_id: current_user.id, album_id: params[:id]).destroy
    redirect_to album_path
  end
end

ビュー

・・・の前に「user.rb」にもう一つ記述します。

「album_id」が存在するかを確認するための記述です。
存在するかしないかで「いいね！」のボタンを切り替えていきます。

user.rb

def liked_by?(album_id)
    likes.where(album_id: album_id).exists?
  end

ビューを記述していきます。

if文で切り替えられるようにしています。

albums/show.html.erb

<div class="pic-likes">
                <ul class="like-content">
                  <% if current_user.liked_by?(@album.id) %>
                    <li>
                      <%= link_to destroy_like_path(@album), method: :delete, class: "like-link" do %>
                        <%= icon('far', 'kiss-wink-heart', 'いいね!!', class: 'like-part2') %>：<%= @album.likes.count %>
                      <% end %>
                    </li>
                  <% else %>
                    <li>
                      <%= link_to  create_like_path(@album), method: :post, class: "like-link" do %>
                        <%= icon('far', 'meh-blank', 'いいねを押す', class: 'like-part')  %>：<%= @album.likes.count %>
                      <% end %>
                    </li>
                  <% end %>
                </ul>
              </div>

今回は「font-awesome」を使用してアイコンも使用しています。

アイコンの使用方法

表示の仕方も色々あると思うのですがわかりやすかったのでgithubをみながら実装していきました。

SaimonL:fontawesome-sass

こちらも参考にしました。

pikawaka:【Rails】font-awesome-railsの使い方を徹底解説！

pikawaka:【Rails】font-awesome-sassの使い方を徹底解説！

順番

1.「Gemfile」に記述

Gemfile

gem 'font-awesome-sass', '~> 5.9.0'

2.インストールすする


bundle install

3.app/assets/stylesheets/application.scssに以下を追加します。
application.cssを使用している場合はscssに変換します。

@import "font-awesome-sprockets";
@import "font-awesome";

4.ビューに記述していきます。

albums/show.html.erb

<li>
 <%= link_to destroy_like_path(@album), method: :delete, class: "like-link" do %>

　　　　　# アイコンのスタイル　アイコンの名前　　記述したいテキスト　　　　クラス
   <%= icon('far', 'kiss-wink-heart', 'いいね!!', class: 'like-part2') %>：<%= @album.likes.count %>

        # => <i class="far fa-kiss-wink-heart　like-part2"></i> いいね！！

 <% end %>
</li>