Railsで会員登録の基本機能の実装した

これはなに

• Railsの勉強をしており、Webサイトの基本機能の実装を勉強しているので学習したことをまとめた

1. 準備

(1) Gemfile の設定

ユーザー登録時にパスワードを安全に扱うためには、bcryptを使ってパスワードのハッシュ化を行う
Gemfile に以下のように追加し、bundle installを実行してインストール

$ gem 'bcrypt', '~> 3.1.20'

bcryptの最新を指定
https://rubygems.org/gems/bcrypt/versions?locale=ja

$ bundle install

2. Userモデルの作成 & マイグレーション

(1) モデルの生成

Rails のモデル生成コマンドを使用して、Userモデルとマイグレーションファイルを作成
username, email, passwordを必須項目とし、パスワードは平文で保存せずハッシュ化するために、マイグレーションファイルにはpassword_digestカラムを定義（has_secure_passwordを使う場合）。

$ rails g model Users username:string email:string password_digest

上記のコマンドで以下が生成される

1. app/models/user.rb
2. db/migrate/xxxxxxxxxxxxxx_create_users.rb（マイグレーションファイル）

(2) マイグレーション実行

$ rails db:migrate

これで users テーブルが作成されます（id, username, email, password_digest が保存される）。

3. Userモデルにバリデーションとパスワード設定を記述

# app/models/user.rb
class User < ApplicationRecord
  # パスワードをハッシュ化するためのメソッドを提供する
  has_secure_password

  # バリデーション
  validates :username, presence: true
  validates :email, presence: true, uniqueness: true
  validates :password, presence: true
end

has_secure_password を使うと、password と password_confirmation という仮想属性が使用可能になります。

バリデーションで presence を指定することによって、空欄の場合はエラーになるようにしています。

uniqueness: true でメールアドレスの重複登録を禁止しています。

4. ルーティングの設定

次に、ユーザー登録のためのルーティングを設定
config/routes.rb で users を扱えるようにしましょう。

# config/routes.rb
Rails.application.routes.draw do
  resources :users, only: [:new, :create]
  get 'users/register_complete', to: 'users#register_complete', as: 'register_complete'

  # デフォルトや他のルーティングが追加されていくイメージ
end

これで以下のURLが自動的に生成されます。

• GET /users/new → ユーザー登録フォームページ （UsersController#new）

5. コントローラの作成

(1) コントローラ生成

以下のコマンドで UsersController を生成します。

$ rails g controller Users new create

これによって app/controllers/users_controller.rb が作成されるので、中身を編集する

(2) コントローラにアクションを記述

# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to register_complete_path, notice: 'ユーザー登録が完了しました'
    else
      # ステータス422（Unprocessable Entity）をつけてフォーム再表示
      render :new, status: :unprocessable_entity
    end
  end

  def complete
    # 完了ページ表示用。特に処理は不要。
  end

  private

  def user_params
    params.require(:user).permit(:username, :email, :password, :password_confirmation)
  end
end

@user.save によって、バリデーションが通ればDBにレコードが保存される

失敗時は render :new で再度フォームを表示し、エラーを表示できるようにします

6. ビューの作成

(1) 新規登録ページ (new.html.erb) の作成

<!-- app/views/users/new.html.erb -->
<h1>新規ユーザー登録</h1>

<% if @user.errors.any? %>
  <div style="color: red;">
    <h2>エラーが発生しました:</h2>
    <ul>
      <% @user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

<%= form_with model: @user, local: true do |f| %>
  <div>
    <%= f.label :username, "ユーザー名" %><br>
    <%= f.text_field :username %>
  </div>

  <div>
    <%= f.label :email, "メールアドレス" %><br>
    <%= f.email_field :email %>
  </div>

  <div>
    <%= f.label :password, "パスワード" %><br>
    <%= f.password_field :password %>
  </div>

  <div>
    <%= f.label :password_confirmation, "パスワード（確認）" %><br>
    <%= f.password_field :password_confirmation %>
  </div>

  <div>
    <%= f.submit "登録する" %>
  </div>
<% end %>

@user.errors.any? でエラーを確認し、あればメッセージを表示

form_with の model: @user で、UsersController#new で生成した @user をフォームに紐付けています。

local: true を付けることで、JavaScriptを使わない通常のフォーム送信ができます（Rails 7からデフォルトがlocal: falseになっている場合は明示的に指定すると良いでしょう）

(2) 登録完了ページ (register_complete.html.erb) の作成

<h1>登録完了</h1>
<p>ユーザー登録が正常に完了しました！</p>

<%= link_to 'ログインページへ', login_path %> <!-- 予定している機能に応じて -->
<%= link_to 'トップページへ戻る', root_path %> <!-- トップがある場合 -->

登録完了の挙動を個人的にわかりやすくするために、redirect_to register_complete_path, noticeでリダイレクトの設定している
新規会員登録が完了したら、登録完了ページへ遷移するようにした

補足

• データベースはMySQLを利用しており、ユーザーが問題なく作成(insert)できているかの確認は都度、DBeaerと接続して閲覧できるようにして確認していた
  • 遷移だけでなくDBを目視で確認しつつ検証作業をした