enumを使って異性表示を実装

Railsでマッチングアプリを作成していたのですが、ユーザー一覧を異性のみ表示させたいと思いました。

そこで、以前の公開・非公開設定でも使ったenumを使用して、実装しました。

ざっとした実装方法の流れは、Userテーブルにenumのカラムを追加し、ユーザー一覧で条件分岐させるといった感じです。

それではやり方を書いていきたいと思います。

前提条件

既にdeviseが導入されている環境であることを前提とします。

Ruby version 2.5.1
Rails version 5.2.3

参考記事：https://madogiwa0124.hatenablog.com/entry/2017/12/24/222156

sexカラムをUsersテーブルに追加

sexカラムをUsersテーブルに追加します。

enumでカラムを追加するので、型はinteger型となっています。

ターミナル.

rails g migration add_sex_to_users sex:integer

migrationfile.

class AddSexToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :sex, :integer
  end
end

記述を確認したら、rake db:migrateをします。

Userモデルにenum記述

sexカラムに男性を選んだ時と女性を選んだ時に対応した、それぞれ番号を保存させる記述をする。

model/user.eb

  enum sex: { man: 0, woman: 1}

男性を選択した時には0、女性を選択した時には1が保存されます。

これでカラムを追加するための準備が完了です。

次にビューの方で実際にカラムが保存させる記述を行います。

ビューに性別選択のラジオボタンを追加

ビューの方で、性別選択のラジオボタンを追加します。

今回は、新規登録時に性別を保存させたいので、devise導入時に作成されたdevise/registrations/new.html.erbに下記のコードを追加します。

new.html.erb

<div class="sex-field">
    <%= f.label :Sex %><br />
    <%= f.label :man  %>
    <%= f.radio_button :sex, :man %>
    <%= f.label :woman  %>
    <%= f.radio_button :sex, :woman %>
</div>

また、deviseでは、paramsで送られてきた値をapplication_controllerで許可設定をしなけらばいけないので、permitの記述のところに:sexを加えます。

application_controller.rb

class ApplicationController < ActionController::Base

  before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :avatar, :profile, :sex])
  end

end

これで、新規登録ボタンが押された時に、性別のカラムに数値が保存されるようになりました。

あとは、ユーザー一覧のビューの方で条件分岐させるのみです。

ユーザー一覧で異性のみを表示

まずコントローラーの方では、whereメソッドを使って、現在ログインしているユーザー以外をActive Recordからとってくるコードを記述します。

ここでは、ページネーションを実装しているので5件ごとにユーザーページを作成し、最新で登録されたユーザーが最初に来るような記述をしています。

users_controller.rb

  def index
    @users = User.where.not(id: current_user.id).page(params[:page]).per(5).order("created_at DESC")
  end

そして、ユーザー一覧の、users/index.html.erbにif文で条件を加えます。

users/index.html.erbのビューでは、部分テンプレートを使っています。

users/index.html.erb

<div class="main users-index">
  <div class="container">
    <h1 class="users-heading">ユーザー一覧</h1>
      <%= render 'user', users: @users %>     
    <%= paginate(@users) %>
  </div>
</div>

部分テンプレート元で、@usersはusersという変数に入れているので、users.で記述が可能です。

条件文は、一番上に加えます。

<% if current_user.sex != user.sex %>
  <div class="card-group user-card-group">
    <%= image_tag user.avatar,class:"user-avatar"%>
    <div class="card-body user-card-body" %>
      <h4 class="card-title user-card-title">
        <%= user.name %>
      </h4>
      <p class="card-text">プロフィール：
        <%= user.profile%>
      </p>
      <div class="button_wrapper"> 
        <button class="btn btn-red100_rsd btn-block">
          <%= link_to "#{user.name}さんのページに移動する", "/users/#{user.id}",class:"button-a"%>
        </button> 
      </div>
    </div>
  </div>
<% end %>

これで、異性表示の完成です。

enumを使えば異性表示は簡単にできる

異性表示は、enumを使って番号で性別を管理することによって簡単に実装できるので、マッチングアプリやSNSアプリを作成している型はぜひ参考にしてみてください。

異性表示をenumで実装してみた