[Devise]を導入してプロフィールページも作成する

はじめに

Devise導入時に毎回Qiitaのいくつかの記事を参照していたので自分なりにまとめてみた。
環境 M1 Mac Rails 6.1.4.7 Ruby 3.1.0

Deviceのインストール

Gemfile

gem 'devise'

terminal

bundle install

terminal

# 設定ファイルを生成する
rails g devise:install

Userモデルの作成

terminal

rails g devise user

テーブルを作成

terminal

rails db:migrate

nameとimageカラムをusersに追加

terminal

# add_カラム名_to_テーブル名 カラム名:データ型
rails g migration add_name_to_users name:string

xxx_add_name_to_users.rb

# null:falseを追加する
def change
  add_column :users, :name, :string, null:false
  add_column :users, :image, :string
end

terminal

rails db:migrate

strong_prameterを変更

app/controllers/application_controller.rb

# 下記を追記
# name情報を受け取れるように変更する
before_action :configure_permitted_parameters, if: :devise_controller?

protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :image])
    devise_parameter_sanitizer.permit(:account_update, keys: [:name, :image])
  end

Viewを編集

terminal

rails g devise:views

プロフィールページの追加

プロフィールページはデフォルトで生成されない

routes

# routingを追加
- get 'users/show' => 'users#show'
+ resources :users, only: [:show]

terminal

# Controllerを作成
rails g controller users show

app/controllers/users_controller.rb

def show
  @user = User.find(params[:id])
end

terminal

# Viewファイルを作成
# vscodeならcodeコマンドが使えますが、他を使っている場合
# touch app/views/users/show.html.erbで作成してください
code app/views/users/show.html.erb 

passwordなしで編集可能に

デフォルトのままではユーザー情報編集にpasswordを３回記述する必要があって面倒なので変更

terminal

# deviseコントローラを表示
rails g devise:controllers users

routes.rb

# 今回は”編集”に関することなので、registrations_controllerのみ記述。
devise_for :users, controllers: {
    registrations: "users/registrations",
  }

registrations_controller.rb

# passwordなしで可能になるよう編集する
protected
 
  def update_resource(resource, params)
    resource.update_without_current_password(params)
  end
  
  # ユーザー詳細ページをリダイレクト先に設定
  def after_update_path_for(resource)
    user_path(resource)
  end

user.rb

def update_without_current_password(params, *options)

  if params[:password].blank? && params[:password_confirmation].blank?
    params.delete(:password)
    params.delete(:password_confirmation)
  end

  result = update(params, *options)
  clean_up_passwords
  result
end

---

使用可能なhelper

devise導入によって自動で追加される

#ログイン済みユーザーのみアクセス可能にする
before_action :authenticate_user!

#ユーザーがサインイン済みかどうかを判定する
user_signed_in?

#サインインしているユーザーを取得する
current_user

#ユーザーのセッション情報にアクセスする
user_session

詳しい使い方はこちら

終わりに

Deviseを日本語化してエラメッセージやサクセスメッセージにを日本語にすることが可能です。
たくさん記事が出てくると思うので探してみてください。 参考記事の1番目のサイトにも載っています

各ページのpathとfileとurl

<!-- サインアップ -->
new_user_registration_path
/users/sign_up
app/views/devise/registrations/new..

<!-- サインイン -->
new_user_session_path
/users/sign_in
app/views/devise/sessions/new..

<!-- ユーザー詳細ページ -->
user_path(current_user)
/users/:id
app/views/users/show...

<!-- ユーザー編集ページ -->
edit_user_registration_path
/users/edit
app/views/devise/registrations/edit...

<!-- ログアウト -->
destroy_user_session_path 

参考

綺麗にまとまっていてわかりやすいです。

下記のQiita記事はpasswordなしで変更はできるが、passwordの変更は必要ない場合

下記の記事はpasswordなしで変更可能に+password自体も変更できるようにするもの 上記の記事と合わせてご覧ください