0
0

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 1 year has passed since last update.

フォロー・フォロワー機能の実装

Posted at

1.序論
学習を進めていく中で、アソシエーションが理解しづらいフォロー・フォロワー機能に関しての実装方法についてアウトプットという形で投稿します。
今回は個別で説明するよりも、まずは実装法帆をすべて説明してからどういった挙動をするか解説したいと思います。

2.環境
Rails 6.1.7
deviceによるuserモデルと本を投稿するbookモデルが存在するサンプルアプリを使用

3.モデル作成
以下のコマンドでrelationshipモデルを作成します。フォロー・フォロワーの関係は、ユーザーとユーザーで多対多の関係になりますので
中間テーブルとしてrelationshipモデルが必要となります。

image.png

image.png
マイグレーションファイルにはフォローされているユーザー用のidであるfollower_idとフォローしているユーザー用のfollowed_idがそれぞれinteger型で定義します。記述が終わったら、rails db:migrateを忘れずに行いましょう。

4.アソシエーション
userモデルには以下のようにアソシエーションを設定します。
image.png

relationshipsモデルには以下のようにアソシエーションを設定します。
image.png

5.ルーティング
userにネストさする形でルーティングを設定します。
image.png
忘れずにrails routesでpathを確認しておきましょう。
image.png

6.フォロー機能の作成
まずはフォロー、フォロー解除用などのコントローラであるrelationshipsコントローラを作成してください。

フォローをするときにはuserモデルに新しく定義するfollowメソッドを使用します。このメソッドは、ユーザーの詳細ページで使いますので、そのユーザーのidを受け取り、user_idをfollowed_idとしてrelationshipsテーブルを作成するというメソッドになります。
image.png

ここで、relationshipsはフォローするときに参照するテーブルと説明しました。例えばuser_idが1の人が2,3,5,7のidのユーザーをフォローしたとすると、follower_id = 1, followed_id がそれぞれ2,3,5,7としてテーブルが作成されます。この一連の動きにより、user_id = 1が他のユーザーをフォローしたこととなります。

そしてこのfollowメソッドを使ったcreateアクションが以下に示すようになります。current_user.followという記述なので,current_userのidが外部キーであるfollower_idということになります。フォローされた2,3,5,7から見て1がフォロワーという関係ですから間違っていないと思います。
image.png

最後にviewページに記述を行います。

image.png

if文のcurrent_user.followings?というのはこのユーザーをフォローしているかどうかで、フォローボタンかフォロー解除ボタンを表示させています。最初の段階だとまだ誰もフォローしていないのでフォローボタンが表示されています。ボタンを押すとこのユーザーのidをコントローラに送り、createアクションによりフォローされるという仕組みになっています。

image.png

7.フォロー解除機能の作成
フォローを解除するときにはuserモデルに新しく定義するunfollowメソッドを使用します。このメソッドは、ユーザーの詳細ページで使いますので、そのユーザーのidを受け取り、user_idをfollowed_idとしてrelationshipsテーブルを探し、削除するというメソッドになります。
image.png

例えばuser_idが1の人が2,3,5,7のidのユーザーをフォローを解除したとすると、follower_id = 1, followed_id がそれぞれ2,3,5,7としてテーブルが探され、それが削除されます。この一連の動きにより、user_id = 1が他のユーザーをフォロー解除したこととなります。
image.png

viewに関してはフォロー機能作成のところでfollowings?メソッドがtrueだった時にボタンが表示されるギミックとなっています。

8.フォローしたユーザーとフォローされたユーザーの一覧表示機能
最後に、フォロー中のユーザーの一覧とフォロワーの一覧機能を実装します。

まずはuserモデルに以下のように記述してください。followingsの方がフォローしているユーザーを探すためのもので、viewで受け取ったユーザーidをfollower_idとしてコントローラで受け取り、sourceで定義したfolowed_idカラムを探すという動きになります。例で言いますと、user_id = 2のユーザーのフォロー一覧を探したいというときに、user_id = follower_id = 2となり、relationshipsテーブルの中でfollower_id = 2のテーブルがすべて探されます。そして、そのテーブルの中からfollowed_idの情報をすべて受け取り、それを一覧表示するという一連の動きになっています。

image.png
image.png

逆にフォローされているユーザーを探すときには以下のメソッドとアクションを使用します。

image.png
image.png

これでフォロー・フォロワー機能を実装することができました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?