今回は「いいね機能」の実装手順を、ミニアプリ制作を通して解説したいと思います。TwitterやInstagramでよく見かける「いいね機能」の大まかな実装手順をこの記事で学習し、ぜひ自分のアプリケーションにも導入してみてください。実装内容は「同期いいね」「いいね数の表示」「非同期いいね」「アイコン表示」の4つになっています。いいね機能実装のポイントまずは、いいね機能実装のポイントについて予習しておきます。ここを理解しておくと実装がグッとやりやすくなるので、ぜひ理解して上で実装に取り掛かりましょう。postsテーブル)を持ったアプリケーションがあるとします。加えてこれら2つのテーブルは1対多の関係になっています。likesテーブル)があると仮定します。その場合、これら3つのテーブル関係は以下のようになります。具体的には、「ユーザー」と「いいね」は1対多、「投稿」と「いいね」も1対多の関係となります。上記の図だと、ユーザー1が投稿2に、ユーザー2が投稿2と3にいいねを押していることになるね。ここから分かる通り、「いいね」とはユーザーと投稿のidがセットになっている状態のことを指します。反対に、どちらか片方のidが存在していなければいいね機能は実装できないので、その点に注意しましょう。いいね機能実装のポイント「いいね」とはユーザーと投稿のidがセットになっている状態にならなければならない。いいね機能実装の流れこれから実装する「いいね機能」の大まかな流れは以下のようになります。この流れを頭に入れておきながら作業していきましょう。アプリケーション作成いいね機能実装(同期いいね)いいね機能実装(いいね数の表示)いいね機能実装(非同期いいね)いいね機能実装(アイコン表示)非同期いいねの実装にはjs.erbを使用し、JavaScriptで記述します。「非同期いいね」ではjQueryを使用している記事が多いですが、今回はJavaScriptで実装していきます。実装手順【アプリケーション作成】アプリケーションの立ち上げまずは以下のコマンドでアプリケーションの立ち上げを行いましょう。データベースの作成も同時に行います。db:create今回開発するアプリケーションの環境は以下のようになります。アプリケーション名:favorite-appRails:6.0.3.2Ruby:2.6.5DB:MySQLdeviseを用いたユーザー登録ユーザー登録の実装には、deviseというgemを使用します。Github通り、以下の手順でdeviseをアプリケーションに導入しましょう。続いてトップページの作成です。「home_controller.rb」を作成し、ルーティングとビューを編集しましょう。ここまでで、ユーザー登録機能が完成です。:users」はdeviseの導入で自動的に生成されるルーティングです。次は投稿機能の実装です。投稿機能の実装には、Railsの便利機能「scaffold」を使用します。「scaffold」の使い方はここでは解説しませんので、「scaffold」について詳しく知りたい方はこちらの記事を参考にしてください。【Rails】秒速でアプリケーション開発できるscaffoldの使い方を簡単にまとめてみた手っ取り早くアプリケーションを開発することができるscaffold(スキャフォールド)の使い方について簡単に解説しています。新しい機能実装をテストしてみたい、すぐにでもアプリケーションを立ち上げたいといった場合に便利な機能なので、ぜひ覚えておきましょう。...まずは以下のコマンドで投稿機能を作成しましょう。シンプルなアプリケーション開発を目指すため、今回のカラムは「title」と「user_id」のみにしています。db:migrate現在のビューにはユーザー登録関係のリンクしかありません。「views/home/index.html.erb」に以下のコードを追記し、投稿ページへ遷移するボタンを追加しましょう。routes」で確認しましょう。ここで1つ問題があります。それは「scaffold」の機能を用いて投稿機能を作成したことで、必要のない「user_id」のフォームまで作成されてしまいました。そこで、下記の記述を削除しましょう。%></td>「posts_controller.rb」のストロングパラメーターである「user_id」も必要ないので、「:user_id」も削除しましょう。params.require(:post).permit(:title)end最後に、投稿時にログインしているユーザーのidを保存する記述を追記します。これは、postsテーブルには「user_idカラム」が存在しているためです。current_user.id)end上記のように、ストロングパラメーターにmergeメソッドを用いて「user_id」を付与することも可能です。今のままでは、ログインせずとも投稿ができてしまいます。:authenticate_user!」を追加し、ログインしているユーザー以外はリダイレクトさせる処理を実装しましょう。:authenticate_user!」を記述することで、そこで行われる処理はログインユーザーによってのみ実行可能となります。冒頭でも解説した通り、ユーザーと投稿は1対多の関係になります。UserモデルとPostモデルにアソシエーションの記述を追記しましょう。:userend挙動確認ここまでで「いいね機能」を実装する前の大まかな準備ができました。ここで一旦挙動を確かめてみます。GIFをクリックすると別タブで見ることができます。実装手順【同期いいね】ではここからいいね機能の実装に取り掛かります。likesテーブルの作成まずはユーザーIDと投稿IDを保存するため「Likeモデル」を作成しましょう。カラムは外部キーである「user_id」と「post_id」のみです。次に「usersテーブル」「postsテーブル」「likesテーブル」のアソシエーションを定義します。それぞれのテーブル関係は、下の図を参考にしてください。:postend「いいね」の表示ビューでは「いいね」を押すことができるリンクを作成しましょう。以下のように「views/posts/index.html.erb」を編集し、「いいねを外す」と「いいね」がそれぞれ表示されるよう設定します。%>「liked_by?(post.id)」は、ユーザーが「いいね」を押しているかどうかを判別するためのメソッドです。このメソッドは次の項目で定義します。「liked_by?」メソッドの定義では先ほど記述した「liked_by?」メソッドをモデルに定義しましょう。whereメソッドを使用し、likesテーブルに「post_id」が存在しているかどうか検索をかけています。post_id).exists?endテーブルとのやりとりに関するメソッドはモデルに置きます。exists?メソッドは、該当の値があればtrue、なければfalseを返すメソッドです。いいねを押すここまででビューに「いいね」を表示させることができました。リンクを付与していないため「いいね」をクリックすることができません。ここからはいいねを押す、いいねを解除できる機能を実装していきます。コントローラーの作成から行いましょう。likes作成したlikesコントローラーにcreateアクションを定義します。createアクションはいいねを押す機能のアクションです。endendルーティングを作成しましょう。likes#create」が出力されます。【Rails基礎】URLを自在にカスタマイズ!ルーティングに名前を指定する方法を解説ルーティングに名前を指定する方法を解説しています。この方法をマスターすることで、自由にパスやURLをカスタマイズできるようになります。マスターして実装の幅を広げていきましょう。...「いいね」にリンクを付与するため、ビューを編集しましょう。%></td>ここまでの実装で「いいね」をクリックすることができるようになりました。いいねを解除する続いて、いいねを解除する機能を実装していきます。likes_controller.rbにdestroyアクションを定義しましょう。destroyアクションはいいねを解除する機能のアクションです。endend「find_byメソッド」は、複数の検索条件を指定することができるメソッドです。02:42:56">同様にルーティングも編集しましょう。likes#destroy」が出力されます。「いいねを外す」にリンクを付与するため、ビューを編集しましょう。%></td>これでいいねを解除することができるようになりました。挙動確認これで「同期いいね」を実装することができました。実際に挙動を確認してみましょう。上記GIFをクリックすると別タブで見ることができます。実装手順【いいね数の表示】では次に、いいねが押された数を表示させましょう。いいね数の取得には「countメソッド」を使用することで簡単に実装することができます。「index.html.erb」を以下のように編集しましょう。%>これで「いいね」の右側に「いいね」の数が表示されるようになりました。いいね】では続いて、非同期でのいいね機能を実装していきます。ここからやや実装が複雑になってくるので、あらかじめ実装内容を解説します。それぞれの投稿を部分テンプレートで切り出します。これは「いいね」もしくは「いいねを外す」を押した瞬間に、JavaScriptでHTML構造を置き換えるためです。どの部分テンプレートを置き換えるのか判別するのでしょうか?この問題はそれぞれの投稿に異なるidを付与してあげることで解決できます。このidが投稿を判別する指標となります。これらを頭に入れた上で実装に進みましょう。部分テンプレートの切り出しまずは「いいね」の箇所を部分テンプレートで切り出します。いいね部分を切り分けることで、その部分だけを変更できるようにします。true」を付与します。true」が必須なので、忘れずに付与させましょう。true」を付与することで、パラメーターがHTML形式ではなくJS形式で送られるようになります。true」をlink_toメソッドに付与することで、likes_controller.rbのcreateアクション後は、views/likes/create.js.erbが呼び出されます。redirect_toの削除likes_controller.rbの「redirect_to」の記述を削除しましょう。「redirect_to」を記述すると画面遷移が行われてしまい、非同期処理ができなくなってしまうためです。「before_action」を使用して、投稿のidを取得できるようにしましょう。endendjs.erbファイルの作成では続いて、createアクションとdestroyアクションのjs.erbファイルをそれぞれ作成しましょう。今回はjs.erbファイルがきちんと発火するかどうかを確認するため、alertを記載しておきます。%>alert('いいねを解除できている!');このように非同期でアラート表示がされれば成功です。上記GIFをクリックすると別タブで見ることができます。指標の作成(idの付与)次に部分テンプレートを切り替える部分にidを付与しましょう。%>”」と記述することで、投稿それぞれ異なるidを付与します。</tbody>これで部分テンプレートを切り替えるための指標を作ることができました。js.erbファイルの編集では部分テンプレートの切り替えができるように、それぞれのjs.erbファイルを編集しましょう。「innerHTMLメソッド」を使用することで、特定のHTML要素を置き換えることができます。%>'「j」とは「escape_javascriptメソッド」の省略形で、部分テンプレート内の改行をエスケープ処理してくれます。省略せず、以下のように記述することもできます。%>'挙動確認ここまでの実装で「非同期いいね」が実装できました。上記GIFをクリックすると別タブで見ることができます。実装手順【アイコン使用】ここからはTwitterやInstagramのような、アイコンを用いたいいね機能を実装していきます。アイコンにはFontAwesomeを使用します。FontAwesome:https://fontawesome.com/FontAwsomeの導入まずはFontAwesomeの導入から行います。詳しくは解説しませんので、手順通り進めていきましょう。install続いて「application.css」を「application.scss」に変更します。その後以下のコードを追記しましょう。"font-awesome";これでコード内でFontAwesomeを使用することができるようになりました。Rails6でのFontAwesomeの導入は、以下の記事を参考にしてください。【Rails】Rails6でFontAwesomeを導入・表示させるための手順を初心者向けに解説Rails6でFontAwesomeを導入・表示させる手順について初心者向けに解説しています。Rails6ではWebpackerというパッケージを使用することにより、以前よりグッと簡単にFontAwesomeを導入することができるようになりました。この機会に導入を検討してみてください。次にアイコンをビュー上で表示させましょう。「いいね」と「いいね解除」を区別するため、それぞれのアイコンに「like-btn」と「unlike-btn」というクラス名を付与しています。link_toメソッドにも「like-link」というクラスを付与している点にも注意してください。end」を使用することで、アイコンがリンク化されます。最後にCSSを用いてアイコンの色を変更していきます。#e54747;}Scaffoldでアプリケーションを作成すると、以下のような記述がデフォルトで入ってしまいます。}}アイコンをhoverした際に、背景が黒になってしまうのを避けるため「!important」を使用してコードを上書きしています。#fff!important;}挙動確認これでアイコンでのいいね表示が完成しました。上記GIFをクリックすると別タブで見ることができます。参考記事escape_javascriptメソッド:https://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.htmlinnerHTMLメソッド:https://www.nishishi.com/javascript-tips/innerhtml.htmlFontAwesomeの導入:https://qiita.com/tai-fuj/items/fdb129866c03ae44ea93!importantの使い方:https://techacademy.jp/magazine/9424今回は「同期いいね機能」「いいね数の表示」「非同期いいね機能」「アイコンいいね機能」の4つをそれぞれ解説しました。いいね機能に関してはほぼ網羅したので、ぜひ理解して自身のアプリケーションにも組み込んでみてください。yoshi19941117TechTechMedia【Git初心者向け】fork(フォーク)からプルリクエストを送るまでの手...【Rails】Rails6でFontAwesomeを導入・表示させるため...Railsエンジニアちばよしはる銀座にあるヘルステック企業のRailsエンジニア。初心者から中級者向けに記事を更新しています。お酒とカレーと競馬が好き。TechTechMedia。