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

# はじめに

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

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

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

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

[![Image from Gyazo](https://i.gyazo.com/cb1a6c265e703ab8ec5d8ea5fa07d1df.gif)](https://gyazo.com/cb1a6c265e703ab8ec5d8ea5fa07d1df)

# 開発環境

macOS Big Sur 11.1

Ruby 2.6.5

Rails 6.1.1

# テーブル

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

 ![スクリーンショット 2021-02-03 15.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892628/6f883e32-9f74-34b2-edcf-7ab324590a6e.png)



## モデル

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

```ruby:user.rb
class User < ApplicationRecord
 has_many :likes
end
```

```ruby:album.rb
class Album < ApplicationRecord
 has_many :likes
end
```

```ruby:like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :album
end
```

## ルーティング

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


```ruby:routes.rb
Rails.application.routes.draw do

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

end
```
![スクリーンショット 2021-02-03 16.27.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892628/8d86142d-4b68-f0b1-975a-5d2578bbd4d9.png)


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

[TechTechMedia:【Rails基礎】URLを自在にカスタマイズ！ルーティングに名前を指定する方法を解説
](https://techtechmedia.com/routing-customize-rails/)

わかりやすいです。

## コントローラー

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

```ruby: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」が存在するかを確認するための記述です。
存在するかしないかで「いいね！」のボタンを切り替えていきます。

```ruby:user.rb
def liked_by?(album_id)
    likes.where(album_id: album_id).exists?
  end
```
ビューを記述していきます。

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

```html: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](https://github.com/SaimonL/font-awesome-sass/blob/master/README.md)

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

[pikawaka:【Rails】font-awesome-railsの使い方を徹底解説！](https://pikawaka.com/rails/font_awesome_rails)


[pikawaka:【Rails】font-awesome-sassの使い方を徹底解説！](https://pikawaka.com/rails/font_awesome_sass)

#### 順番

1.「Gemfile」に記述

```ruby:Gemfile
gem 'font-awesome-sass', '~> 5.9.0'
```
2.インストールすする

```ruby

bundle install
```

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

```scss
@import "font-awesome-sprockets";
@import "font-awesome";
```
4.ビューに記述していきます。

```html: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>
```
アイコンのスタイルは3種類ほどあります。

- solid (fas)
- regular (far)
- brands (fab)


アイコンはたくさんの種類を使用することができます:relaxed:

こちらから使用できます。↓


[fontawesome](https://fontawesome.com/)

#### カウント

こちらの部分は「いいね！！」が押されるとカウントされる部分です。
「countメソッド」を使用しています。

```html

<%= @album.likes.count %>
```

後はcssでお好みの色や形にして整えていきます。

# さいごに

こちらもまぁまぁ時間がかかってしまいましたが無事実装することができました。

次回は非同期のものも実装してみたいと思います。

↓こんな感じのも素早くできるようになっていきたいです。

[![Image from Gyazo](https://i.gyazo.com/bdec09fa2c2067762c4a9f46fd772c51.gif)](https://gyazo.com/bdec09fa2c2067762c4a9f46fd772c51)

本日はここまでです。お疲れ様でした！！

# 参考

こちらの記事がものすごーくわかりやすかったので参考にしました。

[TechTechMedia:【Rails】いいね機能完全版！同期いいね、いいね数の表示、非同期いいね、アイコン表示、それぞれの実装方法についてまとめて解説
](https://techtechmedia.com/favorite-function-rails/)


こちらもとても参考になりました。細かく書いてあります。

[【Rails、JavaScript】いいね機能を実装（同期・非同期通信）](https://qiita.com/MitsuTurtle/items/fec4b925b5a950789e09)