はじめに
本日は、deviseの導入方法を記事にしたいと思います。
deviseとはログインやサインアップが実装できるGemです。
Gemを導入するだけで簡単にユーザー管理機能が実装できます。
手順
1.deviseのインストール
2.テーブル作成
3.viewの作成
4.ストロングパラメーターの設定
バージョン
・Ruby 2.6.5
・Rails 6.0.0
deviseのインストール
まずは、Gemfileに
Gemfile
gem 'devise'
こちらを記述し、
# Gemをインストール
% bundle install
ターミナルよりインストールを行います。
次に、deviseの設定ファイルを作成します。
# deviseの設定ファイルを作成
% rails g devise:install
このコマンドは、追加したdeviseというGemの「設定関連に使用するファイル」
を自動で生成するコマンドです。
次にUserモデルを作成します。
# deviseコマンドでUserモデルを作成
% rails g devise user
すると、以下のようなログが表示されます
invoke active_record
create db/migrate/20200309082300_devise_create_users.rb
create app/models/user.rb
invoke test_unit
create test/models/user_test.rb
create test/fixtures/users.yml
insert app/models/user.rb
route devise_for :users
ユーザーに関するモデルやマイグレーションも自動生成してくれます。
また、routes.rbのファイルをみてみると、
routes.rb
Rails.application.routes.draw do
devise_for :users
#以下省略
end
ルーティングが自動追記されています。
これで、deviseの導入は完了です。
テーブルの作成
次にテーブルを作成します。
2021xxxxxxx_devise_create_user.rb
class DeviseCreateUsers < ActiveRecord::Migration[6.0]
def change
create_table :users do |t|
## Database authenticatable
t.string :nickname, null: false
t.string :profile, null: false
t.string :email, null: false, default: ""
t.string :encrypted_password, null: false, default: ""
#以下省略
end
deviseを導入すると、デフォルトでemailとpassword、再passwordの
カラムは設定されています。
それ以外にカラムが必要でしたら、マイグレーションファイルに記述します。
今回は、nicknameとprofileのカラムを追加しました。
設計しまいたら、マイグレーションを実行します。
# マイグレーションを実行
% rails db:migrate
これで、テーブル作成は完了です。
マイグレーションを行ったらサーバーを再起動させます。
ビューの作成
deviseを導入すると、ログイン、サインアップの画面が自動生成されますが
ビューファイルとしては生成されません。
deviseのビューファイルに変更を加えるためには、deviseのコマンドを利用して、ビューファイルを生成する必要があります。
% rails g devise:views
deviseのコマンドで、devise用のビューファイルを生成します。
ファイルを生成したら自身でファイルを編集します。
views/devise/registrations/new.html.erb
<div class="main">
<%= render partial: "posts/header"%>
<div class="inner_login">
<div class="form__wrapper">
<h2 class="page-heading">新規登録</h2>
<%= form_with model: @user, url: user_registration_path, local: true do |f| %>
<%= render 'posts/error', model: f.object %>
<div class="field">
<%= f.label :email, "メールアドレス", class: :form__text_1 %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field">
<%= f.label :password, "パスワード（半角英数混合6文字以上）", class: :form__text_1 %><br />
<%= f.password_field :password, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :password_confirmation, "パスワード再入力", class: :form__text_1 %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :image, "プロフィール写真" ,class: :form__text_1 %><br />
<%= f.file_field :image %>
</div>
<div class="field">
<%= f.label :nickname, "nickname",class: :form__text_1 %><br />
<%= f.text_field :nickname %>
</div>
<div class="field">
<%= f.label :profile, "プロフィール（自分を一言で表現してください）" ,class: :form__text_1 %><br />
<%= f.text_area :profile, class: :form__text %>
</div>
<div class="actions">
<%= f.submit "新規登録", class: :form__btn %>
</div>
<% end %>
</div>
</div>
</div>
こちらは、新規登録のビューです。
nickname、profile、email、password、再password
プロフィール写真（Active Storage）の記述を行いました。
※プロフィール写真に関してはここでは、無視してください。
ストロングパラメーターの設定
deviseの処理を行うコントローラーはGem内に記述されているため、編集することができない
ため、application_controller.rbのファイルに記述します。
このファイルは全てのコントローラーが継承しているファイルです。
application_controller.rb
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
private
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname, :profile, :image])
end
end
before_actionの記述は、もしdeviseに関するコントローラーの処理であれば、そのときだけconfigure_permitted_parametersメソッドを実行するように設定したものです。
devise_parameter_sanitizerメソッド
deviseが提供しているメソッドでこれにより、新規登録のパラメーターを取得できます。
permitの引数には、第一引数に処理名、第二引数に許可するキーを記述します。
permit(:deviseの処理名, keys: [:許可するキー])
今回は新規登録時に、nicknameとprofileとimageを許可する設定をしました。
デフォルトのemailやpassword以外にカラムを設定した場合はこの記述が必要
となります。
以上がdeviseの導入と設定の手順です。
deviseを導入すると使えるようになるメソッドなんかもあり
とても便利です。
興味ある方は調べてみてください。
まだまだ、初心者なので不備があるかもしれません。
その際は、コメントいただければ幸いです。