Devise導入の設定手順 ~haml使用/pay.jp導入の前準備~ (Rails)

## はじめに

下記リンクのPay.jp導入の前準備のため作成しました（私の備忘録も兼ねています笑）。
[1. Payjpでクレジットカード登録と削除機能を実装する(Rails)](https://qiita.com/takachan_coding/items/f7e70794b9ca03b559dd)
[2. Payjpに登録したクレジットカードで商品購入を実装する(Rails)](https://qiita.com/takachan_coding/items/d21c0d2621368c9b0d9b)

全ての手順を記載しており、そのまま実施していただければ導入できます。
__deviseの入門としても使える__かと思いますのでご確認ください。

## この記事でできること

- hamlを導入する
- Deviseを導入し日本語化する
- ログイン/ログアウト/サインアップなどができるようにする

## 開発環境

- Rails 5.2.3
- ruby 2.5.1

## 作成手順

### 1.新規ファイルを作成しよう

バージョン指定したい場合は`new _5.0.7_ payjp_test`のような感じにしてください。
今回はデータベースにMysqlを使用するので末尾に`-d mysql`とつけています。
（herokuにUPする場合は`-d postgresql`にてposgreSQLを選択するのが良いみたいです。）
`--skip-coffee`と`--skip-test`をつけることで__CoffeeScript__と__test__ファイルを生成しないようにします([参照](https://blog.ryogoto.com/entry/2017/10/08/115242))。

```
$ rails new payjp_test -d mysql --skip-coffee --skip-test
$ cd ./payjp_test
```

### 2.Deviseとhamlを導入しよう

Gemfileに以下のものを追加します。
Rspec、dotenv-railsなどが必要な場合は追加してください。
`gem 'devise-i18n'`はviewを日本語化する時に必要なものです。

```rb:Gemfile
gem 'haml-rails'
gem 'erb2haml'
gem 'devise'
gem 'devise-i18n'
gem 'devise-i18n-views'
```

bundle installを実施します。

```
$ bundle install
```

deviseをインストールします。
（もしできない場合はターミナルを再起動するか、[こちら](https://qiita.com/residenti/items/937d9fa3e98eaa498ff6)をご覧ください。）

```
$ rails g devise:install
```

インストール後、下記のようなアラートが表示されると思います。

```
Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views
```

1. Ensure you have defined default url options ...

デフォルトのローカルサーバーどうしますかということなので、下記のように追記します。

```config/environments/development.rb
Rails.application.configure do
  # Settings specified here will take precedence over those in 
(省略)
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } #<-追記
end
```

2~3については後ほど設定するものがあるので、今は省略します。
2. Ensure you have defined root_url to *something* in your config/routes.rb ...
（rootを設定する場合<-後ほど作成します）
3. Ensure you have flash messages in app/views/layouts/application.html.erb ...
（flashメッセージを付ける場合<-今回実装しません）
4. You can copy Devise views (for customization) to your app by ...
（編集するようのviewを作成する場合<-後ほど作成します）

### 3.データベースとテーブルを作成しよう

下記のコマンドでデータベースとテーブルが作成されます。
Devise用にUserというテーブルを作成します。

```
$ rails g devise User
$ rails db:create
$ rails db:migrate
```

今回、Userテーブルのカラムはデフォルト設定で最低限となっていますが、
より詳細に設定したい場合は[こちら](https://qiita.com/shizuma/items/c8c2e71af8c1dcf3d1c2#%E8%AA%8D%E8%A8%BC%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E3%82%AB%E3%83%A9%E3%83%A0%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)をご確認ください。

### 4.Deviseのコントローラーを作成しよう

Deviseのコントローラーを作成します。

```
$ rails g devise:controllers users
```
ファイルが生成されると、下記のようにターミナルにアラートが出ます。

```
Some setup you must do manually if you haven't yet:

  Ensure you have overridden routes for generated controllers in your routes.rb.
  For example:

    Rails.application.routes.draw do
      devise_for :users, controllers: {
        sessions: 'users/sessions'
      }
    end
```

こちらの内容については後ほど対応します。

### 5.Deviseのビューを作成し日本語化しよう

下記のコマンドでDeviseのビューを日本語で作成します。
（日本語化しない（デフォルトで使用する）場合は`$ rails g devise:views`で対応ください。）

```
$ rails g devise:i18n:views
$ rails g devise:views:locale ja
```

さらに表記を日本語化するために`config/application.rb`に
`config.i18n.default_locale = :ja`を追記します。

```config/application.rb
module Devise
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2
    config.i18n.default_locale = :ja # <-こちらを追記
    
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end
```

もしデフォルトの日本語表示を変更したい場合は
`config/locales/devise.views.ja.yml`を変更します。
ex) https://github.com/plataformatec/devise/wiki/I18n#japanese-devisejayml

### 6.erbファイルをhamlファイルに変換しよう

下記コマンドでerbをhamlに変換します。
そのままerbファイルを使用する場合は実施しなくて大丈夫です。

```
$ rails haml:erb2haml
```

このコマンドを打つとhamlファイルに変換後、
`Would you like to delete the original .erb files?(erbファイルを削除しますか？)`
と表示がでるので、`y`を押してerbファイルについては全て削除します。

### 7.ログイン/ログアウト用のコントローラーとビューを作成しよう

コントローラーとビューを作成します。
下記コマンドで、usersのコントローラーとindexのアクション（view）などを作成します。

```
$ rails g controller users index
```

ルーティングを下記の通り設定します。

```devise/config/routes.rb
Rails.application.routes.draw do
  root to: 'users#index'
  get 'users/index'
  devise_for :users, controllers: {
    sessions: 'users/sessions'
  }
end
```

### 8.画面の確認をしよう
サーバーを起動します(既に起動している場合は再起動します←再起動忘れがちなので重要！)。

```
$ rails s
```

以下のURLにアクセスします。

```
http://localhost:3000/users/sign_up
```
このような画面が出てくればOK！無事日本語化されていますね！
ここで後述する画面変遷の確認のため__アカウント登録を実施__してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224314/4897d513-0bc0-642d-40f8-28ec27555d3c.png)

### 9.ログイン/ログアウトができるようにしよう

ログインをしていないとroot画面に移行するように設定します。

```controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :authenticate_user!
end
```

尚、before_action :authenticate_user!についてはexceptやonly設定ができます。
https://qiita.com/GREAT__SHARK/items/6280ab19c4c8c7dc6506#authenticate_user%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89

ログイン/ログアウトボタンを作ります。

```view/users/index.html.haml
- if user_signed_in?
  = link_to "ログアウト", destroy_user_session_path, method: :delete
- else
  = link_to "ログイン", new_user_session_path, method: :get
```

`rootにusers#indexを設定`しているので、そのままrootにアクセスしてみましょう。

```
http://localhost:3000
```

そうすると、下画像のようなログインまたはログアウトのリンクが出てくると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224314/6f8fba73-7f89-abc4-0b65-8f52fcf58e48.png)

これでログインとログアウトができる状態が確認できれば、
ある程度使える状態になっていると思います！

## 参照

- [【Rails備忘録】deviseまとめ｜Qiita](https://qiita.com/ShinyaKato/items/a098a741a142616a753e)
- [Rails deviseで使えるようになるヘルパーメソッド一覧｜Qiita](https://qiita.com/tobita0000/items/866de191635e6d74e392)
- [【Rails5】Devise-i18nで日本語化する｜RemoNote](https://remonote.jp/rails-devise-i18n-locale-ja)
- [Railsでプロジェクトnewする時に自分がよくつけるオプションを調べてみた｜ごとーめも](https://blog.ryogoto.com/entry/2017/10/08/115242)