devise ユーザーのプロフィール画面作成と編集（デフォルトをカスタマイズ）

# はじめに
deviseを導入の仕方を学び、デフォルトのままだとユーザーフレンドではないと思い、deviseのカスタマイズをしようと思います。

**・sign up(アカウント登録)時にユーザーの名前も一緒に登録！
・users/showで「名前」「メールアドレス」「プロフィール」の表示！
・users/editで簡単編集！**

上記の3つについて、rails初心者目線で書いていきたいと思います。
## 完成イメージ
<img width="197" alt="スクリーンショット 2020-01-20 17.57.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504349/f66c607e-4b00-799e-95b3-58fbcbce9b94.png">
<img width="357" alt="スクリーンショット 2020-01-20 18.10.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504349/26512e1a-5905-319e-d7dc-66967858b6ab.png">


Qiita初めての記事で緊張しますが、分かりやすく書いていきます！
# 環境
ruby 2.5.6
rails 5.2.3
devise 4.7.1

# 前提
今回、deviseは導入済みでその後どうやってカスタマイズしていくか進めます。

deviseの導入がまだの方用に参考URL貼っておきます。

devise導入方法URL
（１）[公式ドキュメント](https://github.com/heartcombo/devise#getting-started)
（２）[[*Rails*] deviseの使い方（rails4版）](https://qiita.com/cigalecigales/items/73d7bd7ec59a001ccd74#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
※（２）だと「1.deviseの導入」まで進めてください。

# MVC（model/ view/ controller ）設定
## modelの生成
```ターミナル.
$ rails g devise user
```
テキストエディターの**app/models**見てみると一番下にuser.rbがあります。
<img width="190" alt="スクリーンショット 2020-01-20 20.51.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504349/40d11294-cb6b-c311-7eb0-6192b6ff5a1b.png">
これでuser modelで出来ました。

## viewの生成
```ターミナル.
$ rails g devise:views
```
テキストエディターの**app/views/devise**見てみるとこんな感じになります。

<img width="185" alt="スクリーンショット 2020-01-20 20.57.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504349/16eaac07-947d-34dc-c44b-6bcabb392ef1.png">
確認ができたらdeviseのviewsが生成されました。

## controllerの生成
```ターミナル.
$ rails g devise：controllers users
```
テキストエディターの**app/controllers/users**見てみるとこんな感じになります。

<img width="187" alt="スクリーンショット 2020-01-20 21.00.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504349/9e8973bb-ec78-1892-d2bd-0dba387a850c.png">
確認できたら、deviseのcontroller生成されました！

#各種ファイルの設定
この章の目的：
（１）sign upでメールアドレスとパスワードの他に名前もを登録
（２）ユーザーのプロフィール画像の作成
そのために各種の設定していきます。
## userテーブルにカラムを追加しよう

```ターミナル.
$ rails g migration add_name_profile_to_users
```
テキストエディターで**db/migrate**の中を確認すると
その時作った「日時add_name_profile_users」と表示されたファイルが出来ます。

例えばこんな感じ「20200120053617_add_name_profile_to_users.rb」です。


```〇〇_add_name_profile_to_users.rb
class AddNameProfileUsers < ActiveRecord::Migration[5.2]
  def change 
    add_column :users, :name, :string #追記
    add_column :users, :profile, :text #追記
  end
end
```
```ターミナル.
$ rails db:migrate
```
## 解説（なぜ、　userテーブルに「name」「profile」カラムを？）
※なぜ、　userテーブルに「name」「profile」カラムを追加したか解説します。
結論、deviseの初期状態でのカラムに「name」「profile」カラムがないからです。

userテーブルが持っているカラムをどこで確認するのか？
①**db/schema.rb**で確認
<img width="641" alt="スクリーンショット 2020-01-20 21.54.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504349/3ac1e23b-064e-71ba-9fb4-e916663c3443.png">
これはカラム追加した後ですが、本来は「name」「profile」カラムがない状態です。

②**rails c**で確認
ターミナルで```rails c```をして
```User.column_names```をすると確認できます。

## モデル
```app/models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  validates :name, presence: true #追記
  validates :profile, length: { maximum: 200 } #追記
end
```
nameに空欄は許しませんよ！
profileは２００文字に抑えてくさだいね！って制限をかけます。

## コントローラー
```app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

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

  # deviseコントローラーにストロングパラメータを追加する          
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected
  def configure_permitted_parameters
    # サインアップ時にnameのストロングパラメータを追加
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    # アカウント編集の時にnameとprofileのストロングパラメータを追加
    devise_parameter_sanitizer.permit(:account_update, keys: [:name, :profile])
  end

end
```
後はviewで「sign up時にユーザーの名前も一緒に登録」「users/showで「名前」「メールアドレス」「プロフィール」の表示」を表示していきます。

## ユーザー情報を記入
```app/views/devise/registrations/new.html.erb
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

    <!--サインアップ時に名前を入力できるようにフォームを追加-->
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
```
## ユーザー情報を編集

```app/views/devise/registrations/edit.html.erb
<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= devise_error_messages! %>

  <!--アカウント編集時に名前を入力できるようにフォームを追加-->
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <!--アカウント編集時にプロフィールを入力できるようにフォームを追加-->
  <div class="field">
    <%= f.label :profile %><br />
    <%= f.text_area :profile, autofocus: true %>
  </div>

  <div class="actions">
    <%= f.submit "Update" %>
  </div>
<% end %>

<%= link_to "Back", :back %>

```

# プロフィール画面の作成
ここでの目的
**・プロフィール画面の作成**

手順
①コントローラーとviewファイルの生成と設定
②ルーティング設定
の手順で進めていきます。

## コントローラーとviewファイルの生成
```ターミナル.
$ rails g controller Users show
```
deviseとまた別にコントローラーとshow.html.erbを作成します。

```app/controllers/users_controller.rb
class UsersController < ApplicationController

  def show
    @user = current_user
  end
end

```
current_userは現在ログインしているユーザーのことを指します。

```app/views/users/show.html.erb
<h1>about me</h1>

<h3>ユーザー名</h3>
<%= @user.name %>
<h3>メールアドレス</h3>
<%= @user.email %>
<h3>プロフィール</h3>
<%= @user.profile%>

```
## ルーティング設定 
```route.rb
devise_for :users, controllers: { registrations: 'users/registrations' }
get "users/show" => "users#show"
```


#パスワードを入力せずにユーザー情報を編集
編集画面で入力した情報をsubmitすると
```Current password can't be blank```が出てくると思います。

これはパスワードを入れて情報を更新してください。ってことなので、
パスワードを入れずにユーザー情報を編集できるようにします。


## registrations_controller.rbの追記
```registrations_controller.rb
class RegistrationsController < Devise::RegistrationsController

  protected
  def update_resource(resource, params)
    resource.update_without_password(params)
  end
end
```

ユーザー情報を編集する際にパスワード無しで編集可能になりました！

# 参考URL
[[Devise] パスワードを入力せずにユーザー情報を編集する](https://qiita.com/machamp/items/f6a7b003fcda3f04094a)
[devise導入からユーザ-のプロフィール画面を作成するまで](https://qiita.com/ryokky59/items/71b5a853989721b89c6e)