はじめに
現在railsでアプリを作成していてお気に入り機能を実装しました。
その備忘録としてアウトプットしたいと思います！
####前提
- Deviseでユーザー管理機能を実装済み
- ユーザーに紐づくモデルを作成済み（tweetモデルやarticleモデルなど）
- テンプレートエンジンはhamlを採用
開発環境
OS: macOS Catalina
データベース： Mysql
バックエンド： Ruby on Rails 6.0
テキストエディタ： Visual Studio Code
目次
1.データベース設計
2.ルーティングの記述
3.アソシエーションの記述
4.コントローラーの記述
5.Viewの記述
1. データベース設計
さきにER図を御覧ください。
今回はUserテーブル、Eventテーブル、Favoriteテーブルで考えたいと思います。
Eventテーブルとそのカラムについては任意の設定で大丈夫です。
FavoriteテーブルはUserテーブルとEventテーブルの中間テーブルとなります。
そのため、カラムにはuser_idとevent_idを持たせます。
これで、どのユーザーがどのイベントをお気に入りしたかをデータベースに保存できます。
それでは、この設計に沿って準備をしていきます！
###下準備
$rails g model Favorite user_id:integer tweet_id:integer
$rails g controller favorites create destroy
$rails db:migrate #忘れずに
###マイグレーションファイルはこんな感じ！
次はルーティングの記述です
2. ルーティングの記述
#=====================================
root 'events#index'
devise_for :users
resources :events do
resource :favorites, only: [:create, :destroy]
end
#======================================
ポイントは2つです
-
favoritesアクションはeventアクションにネストさせる
こうすることで、お気に入りされたイベントの情報を引き出すのが楽になります -
favoritesアクションはresorcesではなくresorceを用いる
favoriteはユーザーみたいに詳細ページや編集ページがいらないので個別のidはいりません。
なので省略するためにresorceを用います
3. アソシエーションの記述
favoriteはuserとeventに属する側なのでbelongs_toで記述します
class Favorite < ApplicationRecord
belongs_to :user
belongs_to :event
end
userとeventモデルは以下のように記述します
class User < ApplicationRecord
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :validatable
has_many :tweets
has_many :favorites
has_many :favorite_events, through: :favorites, source: :event
end
class Event < ApplicationRecord
belongs_to :user
has_many :favorites
end
###User.rbに関して
####source
sourceは**「参照元のモデル」**をさすオプションです。
これを指定することでアソシエーションでメソッドチェーンする時の名称を変更することができます。
本当はhas_many :events, through: :favorites
と記述したいのですが、上のhas_many :eventsと重複してしまうため、favorite_eventsと名称を変更しています。
has many throughを使った「ユーザーがファボしたイベントの表示」
これで、@user.favorite_eventsとやることで、「ユーザーがファボしたイベント」を取得することができるようになります。
更に、お気に入り機能は登録だけでなく解除の機能も必要です。
そのため、Eventモデルに**「このイベントをユーザーがファボしているかどうか」**を判定するメソッドを用意します。
ユーザーがイベントをお気に入りしたかどうかの判定メソッド
class Event < ApplicationRecord
belongs_to :user
has_many :favorites
# 追加
def already_favorited?(user) #引数を受け取るように設定
favorites.where(user_id: user.id).exists?
end
end
普通メソッドはコントローラーの中に記述していくと思います。
僕自身、モデルにはアソシエーションやバリデーションだけを書く場所だと認識していましたがメソッドも定義することができます。
余談ですが、このようにモデルに定義するメソッドをインスタンスメソッドと呼びます。
インスタンスメソッドはクラスで生成されたインスタンスにメソッドを設定できます。
例えば、events_controller.rbが下記の場合を見てみましょう
def show
@event = Event.find(params[:id])
end
この場合の@eventがEventクラスで生成されたインスタンスにあたります。
この後のViewのセクションでも登場しますが@event.already_favorited?(current_user)と記述することで、現在ログインしているユーザーが対象のeventをお気に入りしているかどうかの判定をすることができるようになります！
4. コントローラーの記述
###UsersControllerの記述
class UsersController < ApplicationController
def index
@users = User.all
end
def show
@user = User.find(params[:id])
@events = @user.events
@favorite_events = @user.favorite_events
end
end
@favorite_events = @user.favorite_eventsと記述することで
Viewでeachメソッドを使用することで**「ユーザーがファボしたイベント」**を取得することができます。
###FavoritesControllerの記述
class FavoritesController < ApplicationController
def create
favorite = current_user.favorites.build(event_id: params[:event_id])
favorite.save
redirect_back(fallback_location: root_path)
end
def destroy
favorite = Favorite.find_by(event_id: params[:event_id], user_id: current_user.id)
favorite.destroy
redirect_back(fallback_location: root_path)
end
end
###createアクション
アソシエーションを組んでいるので、current_user.favoritesとすることでfavoriesテーブルのuser_idにcurrent_user.idを入れることができます。あとはevent_idを入れるのですが、、、
ポイントはbuildです。newでもcreateでも問題ないですが、インスタンスに紐づくインスタンスを生成するときにbuildが形式的に使われるのでこのように記述します。
createは自動的にsaveまで行いますが、buildはnewと同じく生成するだけなのでfavorite.saveを記述してあげます。
####redirect_back
いいね、もしくはいいねを解除したときに同じページのままでいてほしいのでこのように記述します。
redirect_backで戻るべきページがなくてエラーがおきてしまう可能性があるので(fallback_location: root_path)と記述してエラーになるのを防ぎます。
###destroyアクション
特になしです笑
redirect_backに関してはcreateアクションと同じくいいねを解除した後も同じページに遷移するように記述しておきます。
5. Viewの記述
冒頭の通りHTMLではなくhamlで記述します。
###お気に入りボタンの実装
- if @event.already_favorited?(current_user)
%p.favorite-heading
保存をキャンセル
= link_to event_favorites_path(@event), method: :delete, class: "favorite-link" do
= icon("fas", "star", class: "favorite-icon")
- else
%p.favorite-heading
イベントを保存
= link_to event_favorites_path(@event), method: :post, class: "favorite-link" do
= icon("far", "star", class: "favorite-icon")
###解説
- - if @event.already_favorited?(current_user)
user.rbに定義したalready_favorited?(user)メソッドをViewで使用します。
引数としてcurrent_userを渡すことで、現在ログインしているユーザーが対象イベントをファボしているかどうかの条件分岐をしています。
もし、すでにファボしている場合はdestroyアクションをファボしていなければcreateアクションを実行します。
- = link_to~
pathはrails routesで確認してタイプミスがないように気をつけましょう。
メソッドもしっかり記述しましょう。
地味ですが、最後のdoは意外と躓いたポイントです。今回はアイコンを押してファボしたいので要素全体をリンクにするためにこのように記述します。
アイコンはFont Awesomeでスターを使用します。
Font Awesomeの導入の仕方はこちらをご覧ください
以上で実装はおわりです！！
おわりに
最後まで読んでいただきありがとうございました！
改良点としては、いいねを非同期通信にできたらもうすこしUI/UXの点でよくなると思います。
お疲れさまでした。。