-
序論
Rails初心者が詰まりやすい非同期通信を用いたいいね機能の追加方法をまとめました。 -
環境
Rails 6.1.7
deviceによるuserモデルと本を投稿するbookモデルが存在するサンプルアプリを使用 -
モデル作成
以下のコマンドでfavoritesモデルを作成
今回、favoritesモデルはuserモデルとbookモデルの中間テーブルなので、マイグレーションファイルに外部キーを記述し、rails db:migrateを行う。
各モデルにhas_manyとbelongs_toの記述を追加する。
4.ルーティングの設定
今回は投稿された本に対してのいいね機能ですので、resource booksにネストさせます。さらに、いいねをするか外すかだけですので
createとdestroyのみ記述します。
記述後、rails routesでpathやurlを確認しておきましょう。
5.コントローラ
まずは、以下のコマンドでコントローラを作成します。今回はviewファイルは必要ないのでシンプルなコマンドで大丈夫です。
コントローラにアクションを記述していきます。
createアクションでは@bookのidと現在ログインしているユーザーのidを使って新しくfavoritesを作成し、saveメソッドにより保存しています。
destroyアクションではcreateと同様にそれぞれのidでfavoritesを探し、destoroyメソッドで削除しています。
6.view
いよいよviewにいいねボタンを追加します。
本の詳細ページに38から50行目を追加してください。
ここでifの条件文に注目してください。faavorited_by?はコチラで新しく追加したメソッドであり、bookモデルに以下のように記述します。
もしこのメソッドが働いたとき、favorited_by?の後の()の中身をuserとして受け取り、そのuserのidでんおいいねが存在するかを確認します。
これにより、いいねが既に存在するならdeleteのアクションが働き、まだ存在しないのならelseの後のcreateが働くような記述になっています。
これらの作業が完了したらサーバーを立ち上げて、正常に機能するか確認してください。
7.非同期通信化
ここからが本番です！今のままですといいねをするといちいちページがリロードされるため、使い勝手があまりよろしくありません。
そこで、いいね機能を非同期通信に対応させることで、いいねをしてもリロードを挟まないようにします。
まずはjQueryをインストールします。以下のコマンドでインストールを行ってください。
config/webpack/environment.jsに3~11行目を追加してください。
app/javascript/packs/application.jsを以下のように変更してください。
これによってjqueryを導入することができました。
次は、非同期通信により変化するいいねボタンを部分テンプレート化します。
app/views/books/show.html.erb
app/views/favorites/_favorite.html.erb
テンプレートにはremote: trueを追加することを忘れないでください。これが非同期通信のトリガーになります。
これによりjsファイルを開くことができ、ページがリロードされることなく、情報が更新されます。
jsファイルはcreateとdestoroyでそれぞれviews/favoritesフォルダに作成して、それぞれに以下の記述を追加してください。
app/views/favorites/create.js.erb
$('#favorite_<%= @book.id %>').html("<%= j(render partial: 'favorites/favorite', locals: {book: @book}) %>");
app/views/favorites/destroy.js.erb
$('#favorite_<%= @book.id %>').html("<%= j(render partial: 'favorites/favorite', locals: {book: @book}) %>");
これにて非同期でいいね機能を追加することができました。
8.終わりに
非同期通信は少しわかりにくく、ネットで探してもrails5用のもので上手くいかないことがありました。今回はrails6用として
アウトプットする形で記事を投稿しました。
わかりにくい部分、間違えている部分などありましたらコメントいただけますと幸いです！