Deviseを用いた簡単なログイン機能実装方法

<h1>devise 機能とは？</h1>
devise とは、Railsに入っているgemの一種で、新規登録やログイン機能を簡単に実装してくれます！

では、早速始めていきましょう！
まずは、　Gemfileにこのように記述してください。

<h1>1.deviseのダウンロード</h1>
````
gem 'devise'
````
その後に、

````
$ bundle install
````
すると、deviseが使えるようになります。

その後に、

````
$rails generate devise:install
````


````
create  config/initializers/devise.rb
create  config/locales/devise.en.yml
````

以下のファイルが生成されます。

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

````
このように順番に設定するように手順が出てきます。
順を追って、設定していきますが、今回はメールの設定は行わないために、２から行っていきます。
<h1>２.ルーティングの設定</h1>

まずは、２番ですが、これはconfig/root.rbで最初に飛ぶページのルーティングを設定してください。

````config/root.rb
root 'home#top'
````
でこのような場合、homeコントローラーとtopページを作成する必要がありますが、特に指定はないため、
好きなように設定してみてください。

<h1>3、Flashメッセージの設定</h1>

````layouts/application.html
<!DOCTYPE html>
<html>
  <head>
    <title>DeviseFunction</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
    <%= yield %>
  </body>
</html>
````
このように、bodyのすぐ下にFlashメッセージを書き込んでください。

````
 <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
````
こんな感じです。

<h1>4.viewの作成</h1>

````
$ rails g devise:views
````

````
Running via Spring preloader in process 4789
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_error_messages.html.erb
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb
````
このように、多くのviewファイルが生成されます。
viewファイルの中に、deviseのファイルがあり、これでデザインを触れるようになりました。

<h1>5.Userモデルの作成</h1>

````
$ rails g devise User
````

````
invoke  active_record
      create    db/migrate/20190617072331_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
````
そうすると、このようにUserモデルが自動的の作成してくれます。

<h1>6.Userテーブルをの作成</h1>
さっきのUserモデルを作成した時に、マイグレーションファイルも一緒の生成されました。

マイグレーションファイルとは、テーブルの設計図になります。それを元にテーブルが作られます。

````
$ rails db:migrate
````
このコマンドを打つと、

````
== 20190617072331 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0027s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0065s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0018s
== 20190617072331 DeviseCreateUsers: migrated (0.0124s) =======================
````

マイグレーションが実行され、テーブルが作られます。

これで、一通り、作り終えました。
<h1>7.確認</h1>
早速立ち上げて確認しましょう。
rails sで立ち上げて、

http://localhost:3000/users/sign_up
を開くと、
![スクリーンショット 2019-06-17 16.39.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345697/8db16073-b2ed-66ef-fbe3-c08e5c2fdea6.png)


このように、サインアップの画面が表示されてれいます。
http://localhost:3000/users/sign_in
今度はこのリンクを開いてみると、
![スクリーンショット 2019-06-17 16.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345697/9d5a8eaf-d934-37ab-5969-50fc0c6a293f.png)

このようにログイン画面が表示されていれば成功です。

以上が
deviseの実装方法でした。
細かい設定を知りたい方は、deviseの公式文を見て参考にしてください。

公式ドキュメントはこちらです。
https://github.com/plataformatec/devise

<h1>まとめ</h1>
今回はdeviseというgemを使ってログイン機能と登録機能を実装していきました。
素早く、設定できてとても便利なので、ぜひ使ってみてください。