0
Help us understand the problem. What are the problem?

posted at

updated at

Ruby on Rails チュートリアル第14章をやってみて & まとめ

ユーザーをフォローする

■第14章
他のユーザーをフォロしたりフォロー解除したり、フォローしているユーザーの投稿をステータスフィードに表示する機能を追加する。

ここで学んだデータモデルは、今後自分用のWebアプリケーションを開発するときに必ず役に立つらしいので、理解できるよう頑張ります。。

14.1 Relationshipモデル

has_manyを使えば実現できるようなものではない。問題は生じてしまう。
それを解決するためにhas_many throughについて説明する。

14.1.1 データモデルの問題 (および解決策)

いい加減なモデルを作ってしまうと、とにかく面倒で悲惨なことになる。
データの関係についてしっかり考えて作成する。

userとuserを繋ぐテーブルactive_relationshipsを作成する。
マイグレーション生成。

$ rails generate model Relationship follower_id:integer followed_id:integer

このリレーションシップは今後follower_idfollowed_idで頻繁に検索することになるので、それぞれのカラムにインデックスを追加。

[timestamp]_create_relationships.rb
class CreateRelationships < ActiveRecord::Migration[5.1]
  def change
    create_table :relationships do |t|
      t.integer :follower_id
      t.integer :followed_id

      t.timestamps
    end
    add_index :relationships, :follower_id
    add_index :relationships, :followed_id
    add_index :relationships, [:follower_id, :followed_id], unique: true
  end
end

一番下のadd_indexは、uniqueと書かれている。これは必ずユニークであることを保証する仕組み。

relationshipsテーブルを作成するためにマイグレーション。

rails db:migrate

14.1.2 User/Relationshipの関連付け

UserとRelationshipの関連付けを行う。

能動的関係に対して1対多 (has_many) の関連付けを実装。

user.rb
class User < ApplicationRecord
  has_many :microposts, dependent: :destroy
  has_many :active_relationships, class_name:  "Relationship",
                                  foreign_key: "follower_id",
                                  dependent:   :destroy
  .
  .
  .
end

リレーションシップ/フォロワーに対してbelongs_toの関連付けを追加。

relationship.rb
class Relationship < ApplicationRecord
  belongs_to :follower, class_name: "User"
  belongs_to :followed, class_name: "User"
end

14.1.3 Relationshipのバリデーション

まずはテストを作成する。fixtureはいったん空にしておく。

Relationshipモデルのバリデーションをテスト。

relationship_test.rb
require 'test_helper'

class RelationshipTest < ActiveSupport::TestCase

  def setup
    @relationship = Relationship.new(follower_id: users(:michael).id,
                                     followed_id: users(:archer).id)
  end

  test "should be valid" do
    assert @relationship.valid?
  end

  test "should require a follower_id" do
    @relationship.follower_id = nil
    assert_not @relationship.valid?
  end

  test "should require a followed_id" do
    @relationship.followed_id = nil
    assert_not @relationship.valid?
  end
end

Relationshipモデルに対してバリデーションを追加。

relationship.rb
class Relationship < ApplicationRecord
  belongs_to :follower, class_name: "User"
  belongs_to :followed, class_name: "User"
  validates :follower_id, presence: true
  validates :followed_id, presence: true
end

無事テストも成功。

14.1.4 フォローしているユーザー

followingがフォロー先ユーザー、followersはフォロー元ユーザー。

Userモデルにfollowingの関連付けを追加。

user.rb
class User < ApplicationRecord
  has_many :microposts, dependent: :destroy
  has_many :active_relationships, class_name:  "Relationship",
                                  foreign_key: "follower_id",
                                  dependent:   :destroy
  has_many :following, through: :active_relationships, source: :followed
  .
  .
  .
end

これにより、フォローしているユーザーを配列の様に扱えるようになった。
followunfollowといった便利メソッドを追加する。

テストから先に書く。

user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  .
  .
  .
  test "should follow and unfollow a user" do
    michael = users(:michael)
    archer  = users(:archer)
    assert_not michael.following?(archer)
    michael.follow(archer)
    assert michael.following?(archer)
    michael.unfollow(archer)
    assert_not michael.following?(archer)
  end
end

実際にフォローするメソッド、フォロー解除するメソッド、
現在のユーザーがフォローしてたらtrueを返すメソッドを追加する。

user.rb
# ユーザーをフォローする
  def follow(other_user)
    following << other_user
  end

  # ユーザーをフォロー解除する
  def unfollow(other_user)
    active_relationships.find_by(followed_id: other_user.id).destroy
  end

  # 現在のユーザーがフォローしてたらtrueを返す
  def following?(other_user)
    following.include?(other_user)
  end

テストも通過しました。

14.1.5 フォロワー

user.followersメソッドを追加する。フォローと似たようなことをしていく。

user.rb
class User < ApplicationRecord
  has_many :microposts, dependent: :destroy
  has_many :active_relationships,  class_name:  "Relationship",
                                   foreign_key: "follower_id",
                                   dependent:   :destroy
  has_many :passive_relationships, class_name:  "Relationship",
                                   foreign_key: "followed_id",
                                   dependent:   :destroy
  has_many :following, through: :active_relationships,  source: :followed
  has_many :followers, through: :passive_relationships, source: :follower
  .
  .
  .
end

テストを書いていく。

user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  .
  .
  .
  test "should follow and unfollow a user" do
    michael  = users(:michael)
    archer   = users(:archer)
    assert_not michael.following?(archer)
    michael.follow(archer)
    assert michael.following?(archer)
    assert archer.followers.include?(michael)
    michael.unfollow(archer)
    assert_not michael.following?(archer)
  end
end

テストもGREENに。今回は順調です。

14.2 [Follow] のWebインターフェイス

フォロー/フォロー解除の基本的なインターフェイスを実装していく。また、フォローしているユーザーと、フォロワーにそれぞれ表示用のページを作成する。

14.2.1 フォローのサンプルデータ

先にサンプルデータを自動作成できるようにしておけば、Webページの見た目のデザインから先にとりかかることができ、バックエンド機能の実装を後に回すことができるらしい。

サンプルデータにfollowing/followerの関係性を追加する。以下のコードを追加。

seeds.rb
# リレーションシップ
users = User.all
user  = users.first
following = users[2..50]
followers = users[3..40]
following.each { |followed| user.follow(followed) }
followers.each { |follower| follower.follow(user) }

14.2.2 統計と [Follow] フォーム

最初に、プロフィールページとHomeページに、フォローしているユーザーとフォロワーの統計情報を表示するためのパーシャルを作成する。

次に、フォロー用とフォロー解除用のフォームを作成する。それから、フォローしているユーザーの一覧 ("following") とフォロワーの一覧 ("followers") を表示する専用のページを作成する。

Usersコントローラにfollowingアクションとfollowersアクションを追加する。

routes.rb
Rails.application.routes.draw do
  root   'static_pages#home'
  get    '/help',    to: 'static_pages#help'
  get    '/about',   to: 'static_pages#about'
  get    '/contact', to: 'static_pages#contact'
  get    '/signup',  to: 'users#new'
  get    '/login',   to: 'sessions#new'
  post   '/login',   to: 'sessions#create'
  delete '/logout',  to: 'sessions#destroy'
  resources :users do
    member do
      get :following, :followers
    end
  end
  resources :account_activations, only: [:edit]
  resources :password_resets,     only: [:new, :create, :edit, :update]
  resources :microposts,          only: [:create, :destroy]
end

ルーティングを定義したので、統計情報のパーシャルを実装する準備が整った。divタグの中に2つのリンクを含めるようにする。

_stats.html.erb
<% @user ||= current_user %>
<div class="stats">
  <a href="<%= following_user_path(@user) %>">
    <strong id="following" class="stat">
      <%= @user.following.count %>
    </strong>
    following
  </a>
  <a href="<%= followers_user_path(@user) %>">
    <strong id="followers" class="stat">
      <%= @user.followers.count %>
    </strong>
    followers
  </a>
</div>

homeにも追加する。

home.html.erb
<% if logged_in? %>
  <div class="row">
    <aside class="col-md-4">
      <section class="user_info">
        <%= render 'shared/user_info' %>
      </section>
      <section class="stats">
        <%= render 'shared/stats' %>
      </section>
      <section class="micropost_form">
        <%= render 'shared/micropost_form' %>
      </section>
    </aside>
    <div class="col-md-8">
      <h3>Micropost Feed</h3>
      <%= render 'shared/feed' %>
    </div>
  </div>
<% else %>
  .
  .
  .
<% end %>

見た目を整えるためにCSSも弄る。

[Follow] / [Unfollow] ボタン用のパーシャルも作成しておく。

_follow_form.html.erb
<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

followunfollowのパーシャルに作業を振っているだけ。パーシャルでは、Relationshipsリソース用の新しいルーティングが必要。

routes.rb
Rails.application.routes.draw do
  root                'static_pages#home'
  get    'help'    => 'static_pages#help'
  get    'about'   => 'static_pages#about'
  get    'contact' => 'static_pages#contact'
  get    'signup'  => 'users#new'
  get    'login'   => 'sessions#new'
  post   'login'   => 'sessions#create'
  delete 'logout'  => 'sessions#destroy'
  resources :users do
    member do
      get :following, :followers
    end
  end
  resources :account_activations, only: [:edit]
  resources :password_resets,     only: [:new, :create, :edit, :update]
  resources :microposts,          only: [:create, :destroy]
  resources :relationships,       only: [:create, :destroy]
end

フォローとフォロー解除用のパーシャルは以下。

_follow.html.erb
<%= form_for(current_user.active_relationships.build) do |f| %>
  <div><%= hidden_field_tag :followed_id, @user.id %></div>
  <%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>
_unfollow.html.erb
<%= form_for(current_user.active_relationships.find_by(followed_id: @user.id),
             html: { method: :delete }) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-default" %>
<% end %>

れらの2つのフォームの主な違いは、上は新しいリレーションシップを作成するのに対し、下は既存のリレーションシップを見つけ出すという点。

プロフィールにフォローとフォロー解除のボタンをそれぞれ表示するようにする。

show.html.erb
<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
    <section class="stats">
      <%= render 'shared/stats' %>
    </section>
  </aside>
  <div class="col-md-8">
    <%= render 'follow_form' if logged_in? %>
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>

14.2.3 [Following] と [Followers] ページ

フォロー全員を表示するページと、フォロワー全員を表示するページを作っていく。

ログインを要求するようにする。そのためのテストをまずは書く。

users_controller_test.rb
require 'test_helper'

class UsersControllerTest < ActionDispatch::IntegrationTest

  def setup
    @user = users(:michael)
    @other_user = users(:archer)
  end
  .
  .
  .
  test "should redirect following when not logged in" do
    get following_user_path(@user)
    assert_redirected_to login_url
  end

  test "should redirect followers when not logged in" do
    get followers_user_path(@user)
    assert_redirected_to login_url
  end
end

followingアクションとfollowersアクションを追加。

users_controller.rb
class UsersController < ApplicationController
  before_action :logged_in_user, only: [:index, :edit, :update, :destroy,
                                        :following, :followers]
  .
  .
  .
  def following
    @title = "Following"
    @user  = User.find(params[:id])
    @users = @user.following.paginate(page: params[:page])
    render 'show_follow'
  end

  def followers
    @title = "Followers"
    @user  = User.find(params[:id])
    @users = @user.followers.paginate(page: params[:page])
    render 'show_follow'
  end

  private
  .
  .
  .
end

Railsは慣習に従って、アクションに対応するビューを暗黙的に呼び出す。

フォローしているユーザーとフォロワーの両方を表示するshow_followビューを作成。

show_follow.html.erb
<% provide(:title, @title) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <%= gravatar_for @user %>
      <h1><%= @user.name %></h1>
      <span><%= link_to "view my profile", @user %></span>
      <span><b>Microposts:</b> <%= @user.microposts.count %></span>
    </section>
    <section class="stats">
      <%= render 'shared/stats' %>
      <% if @users.any? %>
        <div class="user_avatars">
          <% @users.each do |user| %>
            <%= link_to gravatar_for(user, size: 30), user %>
          <% end %>
        </div>
      <% end %>
    </section>
  </aside>
  <div class="col-md-8">
    <h3><%= @title %></h3>
    <% if @users.any? %>
      <ul class="users follow">
        <%= render @users %>
      </ul>
      <%= will_paginate %>
    <% end %>
  </div>
</div>

無事テストもGREEENに。

show_followの描画結果を確認するため、統合テストを書いていく。

$ rails generate integration_test following

fixtureも書いていく。

relationships.yml
one:
  follower: michael
  followed: lana

two:
  follower: michael
  followed: malory

three:
  follower: lana
  followed: michael

four:
  follower: archer
  followed: michael

さらに、正しいURLかどうかをテストするコードも加える。

following_test.rb
require 'test_helper'

class FollowingTest < ActionDispatch::IntegrationTest

  def setup
    @user = users(:michael)
    log_in_as(@user)
  end

  test "following page" do
    get following_user_path(@user)
    assert_not @user.following.empty?
    assert_match @user.following.count.to_s, response.body
    @user.following.each do |user|
      assert_select "a[href=?]", user_path(user)
    end
  end

  test "followers page" do
    get followers_user_path(@user)
    assert_not @user.followers.empty?
    assert_match @user.followers.count.to_s, response.body
    @user.followers.each do |user|
      assert_select "a[href=?]", user_path(user)
    end
  end
end

テストも無事GREENに。

14.2.4 [Follow] ボタン (基本編)

ボタンが動作するようにしていく。Relationshipsコントローラが必要なので生成する。

$ rails generate controller Relationships

ログイン済みでなければRelationshipのカウントが変わっていないことを確認する。テストを書く。

relationships_controller_test.rb
require 'test_helper'

class RelationshipsControllerTest < ActionDispatch::IntegrationTest

  test "create should require logged-in user" do
    assert_no_difference 'Relationship.count' do
      post relationships_path
    end
    assert_redirected_to login_url
  end

  test "destroy should require logged-in user" do
    assert_no_difference 'Relationship.count' do
      delete relationship_path(relationships(:one))
    end
    assert_redirected_to login_url
  end
end

Relationshipsコントローラのアクションに対してbeforeを追加する。

relationships_controller.rb
class RelationshipsController < ApplicationController
  before_action :logged_in_user

  def create
  end

  def destroy
  end
end

ボタンを正常動作させるために、対応するユーザーを見つけてこなければならない。

relationships_controller.rb
class RelationshipsController < ApplicationController
  before_action :logged_in_user

  def create
    user = User.find(params[:followed_id])
    current_user.follow(user)
    redirect_to user
  end

  def destroy
    user = Relationship.find(params[:id]).followed
    current_user.unfollow(user)
    redirect_to user
  end
end

これで、フォロー/フォロー解除の機能が完成。

14.2.5 [Follow] ボタン (Ajax編)

Ajaxを使えば、Webページからサーバーに「非同期」で、ページを移動することなくリクエストを送信することができる。WebフォームにAjaxを採用するのは今や当たり前になりつつあるので、RailsでもAjaxを簡単に実装できるようになっているらしい。

form_for

これを

form_for ..., remote: true

こう置き換えるだけで、Railsは自動的にAjaxを使うようになる。該当箇所を修正。

Ajaxに対応させるために、respond_toメソッドをcreateアクションとdestroyアクションにそれぞれ追加する。

relationships_controller.rb
class RelationshipsController < ApplicationController
  before_action :logged_in_user

  def create
    @user = User.find(params[:followed_id])
    current_user.follow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

  def destroy
    @user = Relationship.find(params[:id]).followed
    current_user.unfollow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end
end

ブラウザ側でJavaScriptが無効になっていた場合でもうまく動くようにする。

application.rb
require File.expand_path('../boot', __FILE__)
.
.
.
module SampleApp
  class Application < Rails::Application
    .
    .
    .
    # 認証トークンをremoteフォームに埋め込む
    config.action_view.embed_authenticity_token_in_remote_forms = true
  end
end

javascriptを動かせるようにするためには以下も必要。

JavaScriptと埋め込みRubyを使ってフォローの関係性を作成する。

create.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %>');

Ruby JavaScript (RJS) を使ってフォローの関係性を削除する。

destroy.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>");
$("#followers").html('<%= @user.followers.count %>');

これで、プロフィールページを更新させずにフォローとフォロー解除ができるようになった。

14.2.6 フォローをテストする

フォローのテストを書いていく。

following_test.rb
require 'test_helper'

class FollowingTest < ActionDispatch::IntegrationTest

  def setup
    @user  = users(:michael)
    @other = users(:archer)
    log_in_as(@user)
  end
  .
  .
  .
  test "should follow a user the standard way" do
    assert_difference '@user.following.count', 1 do
      post relationships_path, params: { followed_id: @other.id }
    end
  end

  test "should follow a user with Ajax" do
    assert_difference '@user.following.count', 1 do
      post relationships_path, xhr: true, params: { followed_id: @other.id }
    end
  end

  test "should unfollow a user the standard way" do
    @user.follow(@other)
    relationship = @user.active_relationships.find_by(followed_id: @other.id)
    assert_difference '@user.following.count', -1 do
      delete relationship_path(relationship)
    end
  end

  test "should unfollow a user with Ajax" do
    @user.follow(@other)
    relationship = @user.active_relationships.find_by(followed_id: @other.id)
    assert_difference '@user.following.count', -1 do
      delete relationship_path(relationship), xhr: true
    end
  end
end

これでテストも無事完了。

14.3 ステータスフィード

ステータスフィードの実装に取りかかる。

14.3.1 動機と計画

テストを書いていく中で重要なのは、フィードに必要な以下の3つの条件を満たすこと。

1) フォローしているユーザーのマイクロポストがフィードに含まれていること。

2) 自分自身のマイクロポストもフィードに含まれていること。

3) フォローしていないユーザーのマイクロポストがフィードに含まれていないこと

user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase
  .
  .
  .
  test "feed should have the right posts" do
    michael = users(:michael)
    archer  = users(:archer)
    lana    = users(:lana)
    # フォローしているユーザーの投稿を確認
    lana.microposts.each do |post_following|
      assert michael.feed.include?(post_following)
    end
    # 自分自身の投稿を確認
    michael.microposts.each do |post_self|
      assert michael.feed.include?(post_self)
    end
    # フォローしていないユーザーの投稿を確認
    archer.microposts.each do |post_unfollowed|
      assert_not michael.feed.include?(post_unfollowed)
    end
  end
end

今のままだとまだテストはRED。

14.3.2 フィードを初めて実装する

ユーザーのステータスフィードを返す。

とりあえず動くフィードの実装。

user.rb
class User < ApplicationRecord
  .
  .
  .
  # パスワード再設定の期限が切れている場合はtrueを返す
  def password_reset_expired?
    reset_sent_at < 2.hours.ago
  end

  # ユーザーのステータスフィードを返す
  def feed
    Micropost.where("user_id IN (?) OR user_id = ?", following_ids, id)
  end

  # ユーザーをフォローする
  def follow(other_user)
    following << other_user
  end
  .
  .
  .
end

テストは成功に。

14.3.3 サブセレクト

フィードの実装は、投稿されたマイクロポストの数が膨大になったときにうまくスケールしないらしい。

フォローしているユーザーが5,000人程度になるとWebサービス全体が遅くなる可能性があるから、フォローしているユーザー数に応じてスケールできるように、ステータスフィードを改善していく。

効率的にコードを置き換えるために、SQLのサブセレクトを使う。

user.rb
class User < ApplicationRecord
  .
  .
  .
  # ユーザーのステータスフィードを返す
  def feed
    following_ids = "SELECT followed_id FROM relationships
                     WHERE follower_id = :user_id"
    Micropost.where("user_id IN (#{following_ids})
                     OR user_id = :user_id", user_id: id)
  end
  .
  .
  .
end

テストも無事完了!

まとめ

できたアプリがこちら

無事Railsチュートリアルを完走することができました。エラーが出た時はかなりしんどかったですが、力技でなんとか押し切れました。

Webアプリケーションがどのように出来ているか、なんとなくですが掴めた気がします。

思ったことがいくつかあるのですが、うまくまとめらないので、箇条書きにして綴っていきます。

所感

・Railsチュートリアルは多くの人が取り組んでいるので、エラーや詰まった時に参考になる記事が多い。
・プログラミングを学んでいくなら、成果物を作りながらの方が性に合う。手法を学んでいくだけだと作業感が強い。
・自分で調べながら全部できるようになるのまでは、時間がかかりそう。
・パソコンと向き合う時間が長いので、視力低下や疲れの対策を早めに取っておきたい。
・Rubyの書籍の目次などに目を通してみると、ほとんどチュートリアルでやったことだった。
・一周でも得るものは多かったが、二周目、三周目とやって理解を深めた方が良さそう。

疑問

・人やタスク、チームの規模によりけりな気はするが、大体テストを作るだとか、何か一つタスクを終えるのにはどのくらいの時間がかかるのか
・チームでやっていく中で分担して作業していくとどのような感じになるのか
・フロント、バックエンドと分けて考えることが基本だが、どちらにも必須な知識はどのようなことなのか

やりたいこと

・上の疑問を解消していきたい。
・人とコミュニケーションを取りながら作業することの経験を積みたい。
・将来的に、自分の興味のある組み込み系のことが少しでもできたらありがたい。
・エンジニアをジャンル分けした時に、Web系と組み込み系は分かれるらしいが、どちらにも活きる知識を身につけたい。
・自分でもWebアプリケーションが開発できるようになりたい。

拙い文章ですが、以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?