【Laravel】ログイン機能実装について

# はじめに
草野と申します。
今回の投稿は、プログラミングスクールを卒業後、同期生に声をかけチームを作り、行っている開発についてアウトプットを行います。自分用のメモのため、文章は拙いですが、少しでも初学者の助けになればと考えています
内容は、表題にもあるとおり、チーム開発によるアプリのログイン機能実装についてです。未熟な点も多いと思います。不備等ありましたらご指摘ください。随時改善して行こうと思います。ちなみに私は、Railsを学びLaravelを次に学んでいるという状況です。

# Laravelの導入方法について
Laravelの導入方法については以下の記事を参考にさせて頂きました。

- [macにLaravelを導入](https://qiita.com/iczo32/items/c20ebd5cf40c8a376cd2) @iczo32様
- [【Laravel】データベースを作成しよう](https://qiita.com/hitochan/items/f5dc22ecbe24a350276a) @hitochan様


# 完成品
[![Image from Gyazo](https://i.gyazo.com/516dccedebf70c5dd8a21044a8f7d3b4.gif)](https://gyazo.com/516dccedebf70c5dd8a21044a8f7d3b4)

[![Image from Gyazo](https://i.gyazo.com/e7267afbf985ccf2c65edd04029f06cc.gif)](https://gyazo.com/e7267afbf985ccf2c65edd04029f06cc)



# ログイン機能実装手順
※今回は% php artisan migrateまで行ったあとからの手順になります。DBはmysqlを使用しています。

1.環境設定

 - laravel/uiライブラリのインストール
 - ログイン、新規登録周りファイルのインストール(ここでvueを取り入れています)
 - Node.jsのインストール
 - npmのインストール

2.日本語化

 - config.phpファイル内の設定変更
 - 日本語フォルダインストール
 - ビューの日本語化を行うため、ja.jsonファイル作成

3.ユーザー新規登録の編集

 - usersテーブルへカラムの追加
 - ビューへinputを追加
 - コントローラー編集
 - モデル編集

# 環境設定
ターミナルで以下のコマンドを実行します。
まずlaravel/uiライブラリをインストールします。

```:ターミナル
% composer require laravel/ui
```
 - 変更されるファイル
   - composer.json
   - composer.lock



ログイン、新規登録周りファイルのインストールします。(ここでvueを取り入れています)

```:ターミナル
% php artisan ui vue --auth
```
 - 追加されるファイル
   - app/Http/Controllers/HomeController.php
   - resources/js/components/ExampleComponent.vue
   - resources/sass/_variables.scss
   - resources/views/auth/login.blade.php
   - resources/views/auth/passwords/email.blade.php
   - resources/views/auth/passwords/reset.blade.php
   - resources/views/auth/register.blade.php
   - resources/views/auth/verify.blade.php
   - resources/views/home.blade.php
   - resources/views/layouts/app.blade.php
 - 変更されるファイル
   - package.json
   - resources/js/app.js
   - resources/js/bootstrap.js
   - resources/sass/app.scss
   - routes/web.php
   - webpack.mix.js



Node.jsを導入するに当たり、サイトからダウンロードするやり方をしている人（これはYouTubeで見ました）もいましたが、バージョン管理などを行うことを考えるとnodebrewをインストールした方が良いです。

```:ターミナル
% brew install nodebrew
```
Nodebrewのインストールを確認します。

```:ターミナル
% nodebrew -v
```

```:ターミナル
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
```
次にNode.jsのインストールします。

```:ターミナル
% nodebrew install-binary stable
```
すると下記のようなエラーが出ました。

```:ターミナル
Fetching: https://nodejs.org/dist/v14.4.0/node-v14.4.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/kyousuke_kusano/.nodebrew/src/v14.4.0/node-v14.4.0-darwin-x64.t
Warning: ar.gz: No such file or directory
```
                                                      
インストール用のディレクトリが内容でしたので下記コマンドで作成し、再度% nodebrew install-binary stableコマンドを実行するとインストールに成功します。

```:ターミナル
% mkdir -p ~/.nodebrew/src
```


Node.jsのインストールを確認します。

```:ターミナル
% nodebrew --version
```
```:ターミナル
#上部記述は省略

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4　←
```

% nodebrew --versionコマンドで出力された『# use a specific version number』の下部に記載されているコマンドを実行します。するとnot installedと出るのでnodebrew install v8.9.4コマンドを実行し、再度下記コマンドを実行し、not installedと出なければOKです。

```:ターミナル
% nodebrew use v8.9.4
>use v8.9.4
```
Node.jsのバージョンが有効化されている事を確認します。
currentに上記と同じバージョンが記載されていれば完了です。

```:ターミナル
% nodebrew ls

#中略

>current: v8.9.4
```
下記コマンドでパスを通します。

```:ターミナル
% echo 'export PATH=$PATH:~/.nodebrew/current/bin/' >> ~/.bashrc
```
「.bashrc」ファイルがログイン時に読み込まれるように設定していない場合は下記の手順を行います。
「.bash_profile」ファイルを開く

```:ターミナル
% vi ~/.bash_profile
```
下記内容を追記し保存します。

```:ターミナル
source ~/.bashrc
```
保存後に下記コマンドで「.bashrc」ファイルを読み込みます。

```:ターミナル
% source ~/.bashrc
```
パスが通っているか確認します。
command not foundにならなければOKです。
これでNode.jsのインストール完了です。

```:ターミナル
% npm
```
次にnpmをインストールします。

```:ターミナル
% npm install
% npm run dev
```
下記のようにDONEと表示されれば完了です。

```:ターミナル
 DONE  Compiled successfully in 5385ms

       Asset     Size   Chunks             Chunk Names
/css/app.css  178 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app
```
これでまだ日本語化されていませんが、ログイン機能を実装できています。

# 日本語化
config.phpファイル内の設定を日本に変更します。

```php:config/app.php&nbsp;

'timezone' => 'Asia/Tokyo',
#中略
'locale' => 'ja',
#中略
'fallback_locale' => 'ja',
#中略
'faker_locale' => 'ja_JP',
```
次にインストーラーをダウンロードします。
Laravel 公式が日本語フォルダのインストールを記載してくれているので、利用します。

```:ターミナル
% php -r "copy('https://readouble.com/laravel/6.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
```
インストーラーを起動します。

```:ターミナル
% php -f install-ja-lang.php
```
これでバリデーションエラーなどが日本語化されました。


次にビューの日本語化を行います。
下記のファイルは、% php artisan ui vue --authコマンドを実行した時に生成されたデフォルトのログイン画面のビューファイルです。

```php:resources/views/auth/login.blade.php&nbsp;
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Login') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

#省略

```
上記ファイル内に**__('Login')**という記述があります。
**__(　　)**というい記述は多言語化というもので中の英語を変換し表示することができます。
何も触らない場合はそのままLoginと表示されます。
ちなみにhome.blade.phpやwelcome.blade.phpファイル内にも**__(　　)**を追加して日本語化しています。



次に**__(　　)**の英語を日本語化するため、resources/lang内にja.jsonファイルを作成し、下記の通り記述します。

```php:resources/lang/ja.json&nbsp;
}
  "Login": "ログイン",
  "Register": "新規登録",
  "Forgot Your Password?": "パスワードを忘れた場合",
  "Reset Password": "パスワード再設定",
  "Send Password Reset Link":  "パスワード再設定URLを送信",
  
  "Name": "お名前",
  "E-Mail Address": "メールアドレス",
  "Password": "パスワード",
  "Confirm Password": "パスワード(確認用)",
  "Remember Me": "ログイン状態を保存",
  
  "Hello!": "ご利用ありがとうございます。",
  "Reset Password Notification":  "パスワード再設定のお知らせ",
  "You are receiving this email because we received a password reset request for your account.": "あなたのアカウントでパスワード再発行のリクエストがありました。",
  "This password reset link will expire in :count minutes.": "再設定URLの有効期限は :count 分です。",
  "If you did not request a password reset, no further action is required.": "もしパスワード再発行をリクエストしていない場合、操作は不要です。",
  "If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser: [:actionURL](:actionURL)": "\":actionText\"ボタンを押しても何も起きない場合、以下URLをコピーしてWebブラウザに貼り付けてください。\n[:actionURL](:actionURL)",
  "Regards": "よろしくお願いいたします",

  "Home": "マイページ",
  "Logout": "ログアウト",
  "Dashboard": "お知らせ",
  "You are logged in!":"ログインしました！"
}
```
これでビューに日本語が表示されます。


# ユーザー新規登録の編集
usersテーブルへカラムの追加を行います。
今回開発するアプリではデフォルトに所属（belongs）というカラムを追加します。
制約等少々デフォルトから編集しております。
※今回% php artisan migrateを行ったあとに環境設定や日本語化を行っていましたので一度% php artisan migrate:rollbackを行った後に下記ファイルにカラム追加の記述を行います。

```php:resources/lang/ja.json&nbsp;
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name')->unique();
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->string('belongs'); #これを追加
            $table->timestamps();
        });
    }
```
そしてmigrateを実行し、カラムを追加します。

```:ターミナル
% php artisan migrate
```

Railsのgem deviseではなかった\$table->timestamp('email_verified_at')->nullable();と$table->rememberToken();が気になり、少々調べました。
email_verified_atは、メールアドレス確認日時が保存されるカラムです。新規登録時に登録されたメールアドレスにメールが送られ、そのメールに設置されているボタンをクリックするとこのカラムに日時が保存されます。ローカル環境でも実験できるのかなどは確認できておらず、動作には問題なかったのでこのまま進めます。ちなみにこれは２段階認証が目的ではなく、確認処理による離脱対策として「未確認状態を(一定期間)許容することができる場合」にメールアドレス確認済みの判定を行うものです。
rememberTokenは、ログインを保持するためのもので保持期間がデフォルトでは5年に設定されているそうです。今回はその設定は触らず進めます。このカラムは、このチェックを入れてログインすると保存されるようです。
<img width="734" alt="ログイン画面Qiita-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634232/8f043870-3a24-838e-3361-32ecd774a4b0.png">


次にビューファイルに所属情報を入力する欄を追加します。
今回は、デフォルトのパスワード（確認用）の部分をコピペしてlabelタグやinputタグ等のオプションを少々触った程度です。

```php:resources/views/auth/register.php&nbsp;
#省略

                        <div class="form-group row">
                            <label for="belongs" class="col-md-4 col-form-label text-md-right">所属</label>

                            <div class="col-md-6">
                                <input id="berongs" type="text" class="form-control" name="belongs" required autocomplete="organization" value="{{ old('belongs') }}">

                                @error('belongs')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

#省略
```

次にコントローラー編集します。
バリデーションを追加します。（必須、文字列、最大文字数255文字となります。）

```php:app/Http/Controllers/Auth/RegisterController.php&nbsp;
#省略

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
            'belongs' => ['required', 'string', 'max:255'],  #ここを追加
        ]);
    }

#省略
```
DBに保存するための記述をします。

```php:app/Http/Controllers/Auth/RegisterController.php&nbsp;
#省略

    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
            'belongs' => $data['belongs'],  #ここを追加
        ]);
    }

#省略
```

次にモデル編集します。
$fillableは定義した値しかモデルへ入らないようにするものです。

```php:app/User.php&nbsp;
#省略

    protected $fillable = [
        'name', 'email', 'password', 'belongs',  #belongsを追加
    ];

#省略
```

これで新規登録に追加したカラムの入力情報がDBへ保存されるようになります。
ここまで読んで頂きありがとうございます。


# 参考にさせて頂いた記事

**環境設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー**
[Laravel6 ログイン機能を実装する](https://qiita.com/ucan-lab/items/bd0d6f6449602072cb87) @ucan-lab様
[Mac HomebrewでNode.jsをインストールする](https://qiita.com/miriwo/items/73d1546220f1c091a7d5) @miriwo様

**Node.jsとはーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー**
[初心者向け！3分で理解するNode.jsとは何か?](https://eng-entrance.com/what-is-nodejs)


**日本語化ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー**
[Laravelの言語を日本語に変更qiita](https://qiita.com/mitashun/items/160784ce352cf529f853) @mitashun様
[Laravel の言語を日本語に変更](https://m-gild.com/blog/1393)
[ログイン認証機能の日本語化（laravel6）](https://laraweb.net/tutorial/6949/)


**vue.jsの使い方ーーーーーーーーーーーーーーーーーーーーーーーーーーーー**
合わせてvue.jsについて調べた際に今後参考になりそうだと思い、閲覧させて頂いた記事をご紹介させて頂きます。
[Vue.jsでjQueryと共存させる方法](https://qiita.com/g-taguchi/items/15b2f5392f5556ac5a70) @g-taguchi様
[jQuery から Vue.js へのステップアップ](https://qiita.com/mio3io/items/e7b2596d06b8005e8e6f) @mio3io様
[1週間でVue.jsをマスターしようと思った時に参考にしたサイト](https://qiita.com/mimoe/items/56784c9d17ed34ee7533) @mimoe様