1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

いいね機能を利用したユーザー評価

Last updated at Posted at 2021-01-14

はじめに

オリアプ制作の中で、購入機能をつけ、その商品の詳細は購入後でしか見られないものにした。
そのため、売る側ユーザーの評価を見られるようにすることで、買う側ユーザーの購入の決め手となるような機能が必要であった。
それを今回は商品に対してのいいね機能を利用して、ユーザー評価(Good or Bad)をつけるように実装した。

実装までに完了している条件

1.deviseのgemを既に導入している・内容も記述している
2.商品をideaと定義し、ideaモデル、ideaコントローラーを作成済み・内容も記述している
3.userとideaのルーティング設定・アソシエーション等も完了している

1.いいね機能の実装(Good評価)

1.いいね機能を実装にあたり、まずは UserID と IdeaID を格納するための Likeテーブル(中間テーブル)を作成する。

ターミナル
$ rails g model like post:references user:references
$ rails db:migrate

2.userモデル、ideaモデル、likeモデルをそれぞれアソシエーションする。

userモデル
class User < ApplicationRecord
# 中略
  has_many :likes
end
ideaモデル
class Idea < ApplicationRecord
# 中略
  has_many :likes
end
likeモデル
class Like < ApplicationRecord
  belongs_to :user
  belongs_to :idea
end

3.likeコントローラーを作成する。
今回はいいねを保存するだけなので、createアクションのみをlikeコントローラーに定義する。

ターミナル
$ rails g controller likes
likeコントローラー
class LikesController < ApplicationController
  def create
    Like.create(user_id: current_user.id,idea_id: params[:idea_id])
    redirect_to root_path
  end
end

4.ルーティングを設定する。
like は idea に関連しているため、ideaにネストして設定する。

routes.rb
Rails.application.routes.draw do
# 中略
  resources :ideas,except: :index do
    resources :likes, only: :create
    # 中略
  end
# 中略
end

5.viewファイルにいいねボタン(Goodボタン)が表示される様に記述する。

views/ideas/show.html.erb
<!--中略-->
<div>
 <%= button_to 'Good', idea_likes_path(@idea), class:'good-btn' %>
</div>
<!--中略-->

2.いいね機能の実装(Bad評価)

いいね機能の実装(Good評価)の likedislike に置き換え、もう一度同じ工程を行う。

商品購入後の画面に以下の画像のようなGoodボタン・Badボタンを追加表示することが出来た。

3.ユーザー評価(Good Bad)の表示

今回の目的は商品を売る側ユーザーの評価が分かるようにするための機能を実装するということなので、そのユーザーの全商品に付けられているGood or Bad の合計を取得し、表示する必要がある。
ユーザー評価はユーザーページで表示するようにしたいため、showアクションに記述していく。

1.UserコントローラーでUserに結びつくIdeaを取得する。

Userコントローラー
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @user_ideas= @user.ideas
  end
end

2.eachメソッドを用いて、変数@likes_count と 変数@dislikes_count それぞれ合計を計算するコードを記述する。

Userコントローラー
class UsersController < ApplicationController
def show
    @user = User.find(params[:id])
    @user_ideas= @user.ideas
    # Goodの合計を計算する
    @likes_count = 0
    @user_ideas.each do |idea|
      @likes_count += idea.likes.count
    end

  # Badの合計を計算する
    @dislikes_count = 0
    @user_ideas.each do |idea|
      @dislikes_count += idea.dislikes.count
    end
  end
end

3. views/users/show.html.erb に@likes_count(Good評価)と @dislikes_count(Bad評価)を記述し、表示する。

views/users/show.html.erb
<div class="good-button"><%= @likes_count%></div>    <!--Good評価-->
<div class="bad-button2"><%= @dislikes_count%></div>  <!--Bad評価-->

4.実装完了

ユーザーページで以下の画像のように表示されるようになった。
Good と Bad の数が表示され、そのユーザーの評価を見られる様になった。

5.最後に

今回実装するにあたり、中間テーブルなどをもう一度学習することが出来たので、良い復習になったなと思います。

6.参考記事

以下の記事を参考に実装しました。ありがとうございました。
https://qiita.com/nojinoji/items/2c66499848d882c31ffa
https://freecamp.life/rails-favorite/
https://yumanoblog.com/rails-likes/

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?