Railsでとにかくログイン機能を作る

## とにかくログイン機能を作りましょう
Railsを用いたWEBアプリケーションでログイン機能を作るためだけの記事です。
これを体に覚え込ませて爆速で作れるようになっちゃいましょう！

## アプリの雛形を作る
これを作らないと何も始まりません！ターミナルから以下のコマンドを実行しましょう。

```
% rails _5.2.3_ new アプリ名 -d mysql
```
上記のコマンドによりアプリの雛形ができたらアプリのディレクトリに移動しましょう。

```
% cd アプリ名
```

## deviseのインストール
エディタでGemfileを開き、deviseを追加します。
deviseとは、ユーザー認証に必要な機能を簡単に作れるようになるgemのことです。
また、今回は私の好みでerbではなくhamlを使うのでerbファイルをhamlに変換するgemもインストールします。

```
gem 'devise'
gem "haml-rails"
```
Gemfileにdeviseを追記したらインストールします！

```
% bundle install
```
インストールが終了したらerbファイルをhamlに変換しておきます。

```
% rails haml:erb2haml
```

上記の変換作業が終わったらdeviseの設定ファイルを作成します。

```
% rails g devise:install
```
で、以下の設定ファイルが出来ます。
config/initializers/devise.rb
config/locales/devise.en.yml

## データベース周りの設定
続いてユーザーモデルの作成するため以下のコマンドを実行します。

```
% rails g devise user
```
これでルーティングファイルにもdeviseのルーティングが記載されます。

```ruby
Rails.application.routes.draw do
  devise_for :users
end
```
このアプリで使用するデータベースが未作成の状態なので作りましょう。

```
% rails db:create 
```
モデルを作成した時点でマイグレーションファイルが作成されていると思うので、マイグレーションしましょう
xxxxxxxxxxxxxx_devise_create_users.rb

```
% rails db:migrate
```
これでデータベース周りの設定は完了です。

## トップページを表示させる
続いて、トップページのビューファイルを作ります。
ここにログイン、新規登録、ログアウトへの導線を作っておきしょう。
今回は何らかの投稿をユーザーで投稿できるアプリ、と仮定しapp/views/postsにindex.html.hamlを作ります。
deviseをインストールすると、user_signed_inというヘルパーメソッドが使えるようになるので、これで未ログイン時とログイン時で表示を分けましょう。

```haml
%header
  - if user_signed_in?
    %div
      = link_to "ログアウト", destroy_user_session_path, method: :delete
  - else
    %div
      = link_to "ログイン", new_user_session_path
      = link_to "新規登録", new_user_registration_path
```
トップページができたらroutes.rbにルーティングを追記します。

```rb
Rails.application.routes.draw do
  devise_for :users
  root to: 'posts#index'
end
```

現時点でトップページを開こうとすると下記のようなエラーになると思うので、コントローラを作ります。

![スクリーンショット 2020-05-23 19.56.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/d0f1cf69-bbc9-64cd-b201-06c399780b33.png)

```
% rails g controller posts
```
これでコントローラができました！
作成されたコントローラにindexアクションを追加すればトップページが開けるはずです。

```rb
class PostsController < ApplicationController
  def index
  end
end
```
何とも味気ない画面ですが、うまくいっていれば下記のような画面になるはずです。
![スクリーンショット 2020-05-23 20.03.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/96df5a46-60d7-70ae-4ad1-01f20fe13557.png)


## ログインと新規登録
続いて、ログインと新規登録画面の作成を行います。
下記のコマンドを実行すると、新規登録とログイン用のビューが作成されます。

```
% rails g devise:views
```

.新規登録画面
app/views/devise/registrations/new.html.erb

・ログイン画面
app/views/devise/sessions/new.html.erb

今回はhamlで作成するので、下記のコマンドを再度実行してerbをhamlに変換しておきましょう。

```
% rails haml:erb2haml
```

ここまで出来れば新規登録、ログイン、ログアウトができるはずなので早速実践してみます。
・新規登録をクリック
![スクリーンショット 2020-05-23 20.03.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/96df5a46-60d7-70ae-4ad1-01f20fe13557.png)

・メールアドレスとパスワードを入力して"sign up"をクリック
![スクリーンショット 2020-05-23 20.11.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/9baf2b13-0c7a-513f-cf70-19bdd357cf16.png)

・トップページに遷移し、ログアウトが表示されるのでログアウトをクリック
![スクリーンショット 2020-05-23 20.15.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/1238fa1b-b9a9-6fce-ee83-0b09a08f6cd1.png)

・ログアウトできたので、続いてログインをクリック
![スクリーンショット 2020-05-23 20.17.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/dbe4a214-c9de-1cac-f7c3-0bd6aa3a0d61.png)

・メールアドレスとパスワードを入力してログインをクリック
![スクリーンショット 2020-05-23 20.19.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/6fde9b35-ad0c-e952-e30f-d71168ccda66.png)

・トップページに遷移してログアウトが表示される。
![スクリーンショット 2020-05-23 20.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/16787c0b-21a9-c6d6-78e3-c4f6db4eae12.png)

スタイルが当たってないので見た目はしょぼいですが、とりあえずサーバーサイドの実装は完了です！
今回の記事を参考にして、ぜひ爆速実装を目指してみてください！