【Rails】Deviseを使ってユーザーページ/マイページを作成・プロフィール編集機能も実装（usernameカラムを編集）

# Deviseを使ってユーザーページを作る
##deviseをインストール

```:Gemfile
gem 'devise'
```

```
$ bundle install
$ rails g devise:install
```
##deviseでUserモデルを作成（usernameカラムを持つ）

```
$ rails g devise User username
$ rails db:migrate
```
##ユーザーページのために、deviseと別でUsersコントローラーを作成

```
$ rails g controller Users show
```
##ユーザーページのルーティングを編集

```routes.rb
- get 'users/show' => 'users#show'
+ resources :users, only: [:show]
```

##Usersコントローラーを編集

```user_controller.rb
before_action :set_user, only: [:show]

def show
end

private

  def set_user
    @user = User.find([:id])
  end
```
  
##ユーザーページを編集

```.erb:users/show.html.erb
<h1><%= @user.username %>のユーザーページ</h1>
```

#動作確認
##アカウントを2人作成

|email|password|username|
|---|---|---|
|a@a|aaaaaa|hanamichi10|
|b@b|bbbbbb|kaede11|


```
$ rails c
> User.create(email: "a@a", password: "aaaaaa", usename: "hanamichi10")
> User.create(email: "b@b", password: "bbbbbb", username: "kaede11")
```

##表示
`$ rails s`して、`localhost:3000/users/1'`にアクセスすれば、

**hanamichi10のユーザーページ**

`localhost:3000/users/2'`にアクセスすれば、

**kaede11のユーザーページ**

と表示されるはず。

#【+1】ユーザーページのビューを使ってマイページを作ろう

マイページがユーザーページと違うのは、

- 表示するにはログインが必要
- プロフィール編集機能がある

大きくはこの2点だろう。
順番に実装していく。

##マイページを表示する前にログインを要求する
###mypageアクションを追加

deviseのauthenticate_userを使いたいが、
ユーザーページはログインなしでも表示できるようにしたいので、Usersコントローラーのshowアクションには付けられない。

よって、仕方なく、アクションをもう一つ作る。

```users_controller.rb
def mypage
end
```
ブサイクだけど我慢。

###ルーティング
ルーティングは、

```routes.rb
get '/mypage' => 'users#mypage'
```
とする。

###コントローラー編集
mypageアクションにauthentivcate_userを付ける。

```users_controller.rb
before_action :authenticate_user!, only: [:mypage]

def mypage
end
```

そして、mypageアクションからshowアクションにリダイレクトする。
全体はこうなる.

```users_controller.rb
before_action :authenticate_user!, only: [:mypage]
before_action :set_user, only: [:show]

def mypage
  redirect_to user_path(current_user)
end

def show
end

private

  def set_user
    @user = User.find([:id])
  end
```

###ビューも少しいじる

```.erb:users/show.html.erb
<% if user_signed_in? && @user == current_user %>
  <h1>マイページ</h1>
<% else %>
  <h1>ユーザーページ</h1>
<% end %>

<h1><%= @user.username %></h1>
```

###動作確認

これで、ただユーザーページを表示したい時は、ログイン不要。
マイページを表示したい時は、ログインを要求する仕組みになったはず。

`$ rails s`して、ログアウトしていることを確認してから、
`localhost:3000/mypage`にアクセスする.
ログイン画面を経由してマイページが表示されればOK
ログアウトするには、ログアウトボタンを画面に用意しておくのが便利。（次項）

###【番外編】application.html.erbに追記しておくと便利な代物

```.erb:application.html.erb
<div><%= link_to 'マイページ', mypage_path %></div>
<% if user_signed_in? %>
  <div><%= link_to 'ログアウト', destroy_user_session_path, method: :delete %></div>
<% else %>
  <div><%= link_to 'ログイン', new_user_session_path %></div>
  <div><%= link_to 'アカウント作成', new_user_registration_path %></div>
<% end %>
```

##プロフィール編集機能を実装する

マイページが完成したので、プロフィール編集機能を実装する。

###editアクションとupdateアクションを追加する

```users_controller.rb
def edit
end

def update
end
```

###ルーティング
```routes.rb
- resources :users, only: [:show]
+ resources :users, only: [:show, :edit, :update]
```

###コントローラーを編集
```users_controller.rb
- before_action :authenticate_user!, only: [:mypage]
+ before_action :authenticate_user!, only: [:mypage, :edit, :update]
- before_action :set_user, only: [:show]
+ before_action :set_user, only: [:show, :edit, :update]

def mypage
  redirect_to user_path(current_user)
end

def show
end

def edit
  # 編集するユーザーが本人じゃない場合はユーザーページにリダイレクトする
  # これをしないと、ログインさえしていれば、"/users/5/edit"みたいな適当なurlにアクセスすると、他の人のプロフィール編集画面を表示できてしまう
+   unless @user == current_user
+     redirect_to user_path(@user)
+   end
end

def update
    # アップデートがうまくいけば、マイページに戻利、
    # うまくいかなければ、もう一度編集ページを表示する
+   if current_user.update(user_params)
+     redirect_to user_path(current_user)
+   else
+     redirect_to edit_user_path(current_user)
+   end
end

private

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

+   def user_params
+     params.fetch(:user, {}).permit(:username)
+   end
```

###ビュー編集・追加

編集

```.erb:users/show.html.erb
<% if user_signed_in? && @user == current_user %>
  <h1>マイページ</h1>
<% else %>
  <h1>ユーザーページ</h1>
<% end %>

<h1><%= @user.username %></h1>

+ <% if user_signed_in? && @user == current_user %>
+   <%= link_to "プロフィール編集", edit_user_path(current_user) %>
+ <% else %>
```

追加

```.erb:users/edit.html.erb
<h1>プロフィール編集</h1>

<%= form_with model: @user do |form| %>
  <div>username<%= form.text_field :username %></div>
  <div><%= form.submit "保存" %></div>
<% end %>
```

###動作確認

マイページにアクセス > プロフィール編集ボタン > フォーム入力、保存ボタン > 
マイページが表示されて、ユーザーネームが更新されていればOK