deviseの導入方法について

## はじめに

本日は、deviseの導入方法を記事にしたいと思います。
deviseとはログインやサインアップが実装できるGemです。
Gemを導入するだけで簡単にユーザー管理機能が実装できます。

手順
1.deviseのインストール
2.テーブル作成
3.viewの作成
4.ストロングパラメーターの設定

## バージョン
・Ruby 2.6.5
・Rails 6.0.0

## deviseのインストール

まずは、Gemfileに

Gemfile

```ruby
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

```ruby
Rails.application.routes.draw do
  devise_for :users

#以下省略
end

```
ルーティングが自動追記されています。
これで、deviseの導入は完了です。

## テーブルの作成

次にテーブルを作成します。

2021xxxxxxx_devise_create_user.rb

```ruby
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

```ruby

<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

```ruby
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を導入すると使えるようになるメソッドなんかもあり
とても便利です。
興味ある方は調べてみてください。

まだまだ、初心者なので不備があるかもしれません。
その際は、コメントいただければ幸いです。