3
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 3 years have passed since last update.

[Rails]ウィザード形式のフォームの実装

Posted at

#はじめに
先日あるサイトにて新規会員登録の項目が大量あると登録する気が失せるなと感じました。そのことをきっかけに、ユーザへの興味を削がないように登録フォームを進めさせる方法はないかなあと考えていたらウィザード形式なるものに出会いましたのでアウトプットします。

#ウィザード形式とは
ウィザード形式とは、対話の如く順番に操作画面が進んでいく方式のことです。身の回りでいえば、新幹線の切符購入画面とかそうですよね(出発駅選択→到着駅選択→時間選択→座席指定みたいな)。ユーザからすると、1ページで項目を一気に登録しないといけないフォームよりも、ウィザード形式の方が、今何をしているのかシンプルにわかりやすくてみやすいと言う特徴があります。

#実装(ユーザ登録編)

ユーザ登録の後、住所情報を登録するウィザード形式を作ることとします。

registrations_controller.rb
def new
   @user = User.new
 end

 def create
   @user = User.new(sign_up_params)
    unless @user.valid?
      render :new and return
    end
   session["devise.regist_data"] = {user: @user.attributes}
   session["devise.regist_data"][:user]["password"] = params[:user][:password]
   @address = @user.build_address #1対1の場合は、buildメソッド_関連づけられたモデル名
   render :new_address
 end

このコントローラで行うことは次の3つです。

ユーザ情報入力画面から受け取った情報の
①バリデーションチェックを行い、
②sessionに登録情報を持たせて、
③次の住所情報登録で使用するインスタンスを生成しておく。

三行目でreturnしている理由は、バリデーションチェックが通らない場合は、その後の処理もいったん止めたいからです。もし、この記述を怠ると、その後出てくるrenderが実行されて「、DoubleRenderErrorというエラーが発生します。

unless @user.valid?
      render :new and return
    end

次に、sessionを使用することで登録した情報を保持します。

session["devise.regist_data"] = {user: @user.attributes}
session["devise.regist_data"][:user]["password"] = params[:user][:password]

###attributesメソッド
ここでattributesメソッドについて軽く触れておきます。
attributesメソッドはインスタンスメソッドから取得できる値をオブジェクト型からハッシュ型に変換してくれます。
実際に見てみるとよくわかります。

# 例:Userインスタンスがもつオブジェクト型の値
#=><user:12345678921>

# 例:Userインスタンスがもつハッシュ型の値
#=> {name=>"yamada", :sex=>"man"}

これを踏まえ、今回の記述を再度見てみると、sessionにはハッシュ型で渡していることがわかります。

#実装(住所登録編)

住所登録では以下のようなアクションを追加します。

registrations_controller.rb
#省略
def create_address
   @user = User.new(session["devise.regist_data"]["user"])
   @address = Address.new(address_params)
    unless @address.valid?
      render :new_address and return
    end
   @user.build_address(@address.attributes)#住所情報付け足し
   @user.save
   session["devise.regist_data"]["user"].clear
   sign_in(:user, @user)
 end

 private

 def address_params
   params.require(:address).permit(:postal_code, :address)
 end

おそらくuserモデルとさほど変わりはありませんが、、、
sessionはclearメソッドを使用して明示的に削除するようにしましょう。

そして、最後にsign_inでサインインします。

終わりに

ただ開発するのではなく、どうしたらユーザ(お客様)にとって、快適で便利になるのか、実装した結果どうなるのかを意識して開発に取り組んでいきます!

3
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
3
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?