いいね機能 ❏Rails❏

ツイートアプリにいいね機能をつけていきます。

#【その１】 jQueryを入れる

gem 'jquery-rails'を加え、bundle install

Gemfile

gem 'jquery-rails'

ターミナル

bundle install

`application.js`に`//= require jquery`を追記。

app/assets/javascripts/application.js

//= require jquery  #一番上に書く
//= require rails-ujs
//= require_tree .

#【その２】ルーティング
createアクションとdestroyアクションの２つ

routes.rb

resources :tweets do
  resources :likes, only: [:create, :destroy]
end

#【その3】コントローラー

ターミナル

rails g controller likes

likes_controller.rb

class LikesController < ApplicationController
  before_action :set_tweet

  def create
    @like = Like.create(user_id: current_user.id, tweet_id: @tweet.id)
  end

  def destroy
    @like = Like.find_by(user_id: current_user.id, tweet_id: @tweet.id)
    @like.destroy
  end

  private
    def set_tweet
      @tweet = Tweet.find(params[:tweet_id])
    end
end

#【その４】モデル

tweet.rb

class Tweet < ApplicationRecord
  has_many :likes  #追記
end

user.rb

class User < ApplicationRecord
  has_many :likes  #追記
end

`Like`モデルと`likes`テーブル作成

ターミナル

$ rails g model like user:references tweet:references
$ rails db:migrate

like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :tweet

  validates :user_id, presence: true
  validates :tweet_id, presence: true
  validates_uniqueness_of :tweet_id, scope: :user_id
end

#【その５】ビュー

部分テンプレートとして作成↓

app/views/likes/_like.html.haml

- if Like.find_by(user_id: current_user.id, tweet_id: tweet.id)
  = link_to tweet_like_path(tweet_id: tweet.id, id: tweet.likes[0].id), method: :delete, remote: true do
    %i{class: "fas fa-heart"}
- else
  = link_to tweet_likes_path(tweet), method: :post, remote: true do
    %i{class: "far fa-heart"}
= tweet.likes.length

font-awesomeのアイコンを使っています。
使い方の解説はこちらへ
https://qiita.com/ITmanbow/items/2679109dd886dd5e6844

実際に置く場所↓

app/views/tweets/index.html.haml

略
#好きな場所へ配置
%div{id: "like-#{tweet.id}"}
  = render "likes/like", tweet: @tweet

#【その４】jsファイルを作成

erbの場合

app/views/likes/create.js.erb

$("#like-<%= @dream.id %>").html("<%= j(render partial: 'users/like', locals: { dream: @dream }) %>");

app/views/likes/destroy.js.erb

$("#like-<%= @dream.id %>").html("<%= j(render partial: 'users/like', locals: { dream: @dream }) %>");

`haml`の場合

app/views/likes/create.js.haml

$("#like-#{@tweet.id}").html("#{j(render partial: 'like', locals: { tweet: @tweet })}");

app/views/likes/destroy.js.haml

$("#like-#{@tweet.id}").html("#{j(render partial: 'like', locals: { tweet: @tweet })}");

Qiitaの記事をいくつか参考にしてなんとかできました。 先人は偉大です。。。いつも本当にありがとうございます。。。 >https://qiita.com/fumikao/items/373caa60b77f27f2dbdd https://qiita.com/shiro-kuro/items/f017dce3d199f06d1dcd
ではまた！