IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

Rails でフォロー機能を作ってみる

はじめに

ここでは、以下の記事を参考にフォロー機能を作ってみることにする。

 

作ってみる

まずは rails new コマンドを実行する。

  • rails new follow_sample

 

Gemfile に devise を追加してターミナルから bundle コマンドを実行して gem をインストールする。

f:id:matt-note:20190108102319p:plain

  • bundle

 

devise のコマンドを実行する。

  • bin/rails g devise:install
  • bin/rails g devise:views
  • bin/rails g devise user

マイグレーションファイルが作成されるので、マイグレートを行う。

 

users コントローラを作成する。

  • bin/rails g controller users

f:id:matt-note:20190108125020p:plain

 

ルーティングを作成する。

f:id:matt-note:20190108125052p:plain

 

ビューを作成する。
app/views/users/index.html.erb

f:id:matt-note:20190110150845p:plain

 app/views/users/show.html.erb

f:id:matt-note:20190108131925p:plain

app/views/layouts/application.html.erb

f:id:matt-note:20190110140810p:plain

-> 「ログアウト」と「トップに戻る」のリンクを作成。

 

これで事前準備が完了した。

 

フォロー機能を作成する

ここでは、信頼性が高い Rails チュートリアルを参考に作成していく。

Relationshipモデルを作成して、マイグレーションファイルを編集する。

f:id:matt-note:20190108153030p:plain

 

マイグレーションを実行する

 

app/models/relationshop.rb を編集する。

f:id:matt-note:20190108132535p:plain

-> ここではユーザーが「フォローした」ものを followed としている。

 

app/models/user.rb を編集する。

f:id:matt-note:20190108151818p:plain

 

app/models/user.rb にフォロー関係のメソッドを定義する。

f:id:matt-note:20190108155635p:plain

ついでに、ユーザーの email から名前にするための to_name メソッドを定義しておく。

f:id:matt-note:20190110130043p:plain

 

サーバーを起動して、ユーザーを2人ほど作成しておく。

f:id:matt-note:20190108133154p:plain


rails コンソールから確認してみる。

 

登録したユーザーを取り出しておく。

f:id:matt-note:20190108140458p:plain

f:id:matt-note:20190108154457p:plain

 

フォロー機能を使ってみる。ここでは、@user が @user2 をフォローする。

f:id:matt-note:20190108154735p:plain

-> フォローできた。

 

@user がフォローしている人数を表示してみる。

f:id:matt-note:20190108154839p:plain

 

@user2 のフォロワーとフォロワー数を表示してみる。@user2 のフォロワーに @user がいる状態になっていれば良い。

f:id:matt-note:20190108160417p:plain

f:id:matt-note:20190108160558p:plain

-> フォロワーの関係が作成できた。

 

フォローを解除してみる。

f:id:matt-note:20190108155827p:plain

f:id:matt-note:20190108155859p:plain

-> フォロー解除できた。

 

サンプル用にもう一度、フォロー状態を作っておく。

f:id:matt-note:20190108154735p:plain

 

UI を作成する

まずはルーティングを作成する。

f:id:matt-note:20190109113942p:plain

 

これによって以下のようにパスやヘルパーが定義できた。

f:id:matt-note:20190109114636p:plain

 

app/views/users/show.html.erb を編集する。

ここでは、フォロー・フォロワー情報を表示したい。

f:id:matt-note:20190109120121p:plain

 

フォロー・フォロワー情報を表示できた。

f:id:matt-note:20190109120254p:plain

f:id:matt-note:20190109120301p:plain

 

このリンクをクリックすると、following の一覧とfollowers の一覧を表示するようにしたい。

app/controllers/users_controller.rb を編集する。

f:id:matt-note:20190110130210p:plain



それぞれ、ビューを作成する。

app/views/users/show_follow.html.erb を作成して編集する。

f:id:matt-note:20190110132110p:plain

-> フォローしているユーザー一覧を表示する。

 

app/views/users/show_follower.html.erb を作成して編集する。

f:id:matt-note:20190110132219p:plain

-> フォロワーの一覧を表示する。

 

それぞれ、次のようになる。

f:id:matt-note:20190110132331p:plain

f:id:matt-note:20190110132340p:plain

 

Follow/Unfollow ボタンを作る

Relationships コントローラを作成して、create/destroy アクションを作成する。

  • bin/rails g controller Relationships create destroy

f:id:matt-note:20190110135943p:plain


app/views/users/show.html.erb を編集する。

f:id:matt-note:20190110142749p:plain

-> すでにフォロー状態だったら「Unfollow」ボタンを表示。まだフォローしていないなら「Follow」ボタンを表示する。(Rails チュートリアルのコードをほとんどそのまま使用。)

「Follow」ボタンを作成できた。

f:id:matt-note:20190110143009p:plain

 

hoge さんの「Follow」ボタンをクリックしてみる。

f:id:matt-note:20190110143144p:plain

-> 「followers」が「1」になり、「Unfollow」ボタンを表示できた。

「followers」のリンクをクリックしてみる。

f:id:matt-note:20190110143310p:plain

-> hoge さんのフォロワーとして hoge4 が表示できた。

 

hoge さんへのフォローを解除してみる。

f:id:matt-note:20190110143601p:plain

 

「Unfollow」ボタンを押して見る。

f:id:matt-note:20190110143659p:plain

-> hoge さんの「followers」が「0」になり、「Follow」ボタンを表示できた。

 

おわり

フォロー・フォロワー機能を作成できた。

f:id:matt-note:20190110145304p:plain