[Laravel] 備え付け認証機能をカスタマイズ（ユーザー登録時の項目を増やす）

#やりたいこと

Laravel に最初から用意されているログイン機能を自由にカスタマイズできるようになりたい。
今回はユーザー登録時の登録項目を増やしたいと思います。

【デフォルトのユーザー登録画面】
名前、メールアドレス、パスワードが登録できます。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/238891/f3821aee-4932-32fc-8c12-dad3a364950b.png)

#環境

CentOS: 7.4
Apache: 2.4
MySQL: 5.7
PHP: 7.2
Laravel: 5.6

#下準備

ターミナルで以下の２つを叩きます。

```
php artisan make:auth
```
これで認証関連のルートやらビューやらを一発で作ってくれます。

```
php artisan migrate
```
これで Laravel 標準装備の Users テーブルを作ってくれます。

#テーブルに新しいカラム（列）を追加

今回は Users テーブルに性別と年齢の項目を増やしてみたいと思います。

まずはマイグレーションファイルを作成。
コマンドを叩きます。

```
php artisan make:migration add_column_to_users_table
```

先ほど作ったマイグレーションファイルを編集します。

```php
public function up()
{
    Schema::table('users', function(Blueprint $table) {
        $table->string('gender');
        $table->integer('age');
    });
}
```

最後にマイグレーションファイルを実行します。

```
php artisan migrate
```

これで users テーブルに gender と age のカラムが追加されたかと思います。

#ビューの編集

こんな感じで Gender と Age の入力欄を追加します。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/238891/d586fd47-e725-2178-c88a-acbcb0e17a02.png)

最初から用意されている Name などのフォーム部分をコピペして中身を書き換えます。

```register.blade.html
<!-- 省略 -->

<!-- 性別の入力欄 -->
<div class="form-group row">
    <label for="gender" class="col-md-4 col-form-label text-md-right">Gender</label>

    <div class="col-md-6" style="padding-top: 8px">
        <input id="gender-m" type="radio" name="gender" value="male">
        <label for="gender-m">Male</label>
        <input id="gender-f" type="radio" name="gender" value="female">
        <label for="gender-f">Female</label>

        @if ($errors->has('gender'))
            <span class="invalid-feedback">
                <strong>{{ $errors->first('gender') }}</strong>
            </span>
        @endif
    </div>
</div>

<!-- 年齢の入力欄 -->
<div class="form-group row">
    <label for="age" class="col-md-4 col-form-label text-md-right">Age</label>

    <div class="col-md-6">
        <input id="age" type="number" min="1" class="form-control{{ $errors->has('age') ? ' is-invalid' : '' }}" name="age" value="{{ old('age') }}" required>

        @if ($errors->has('age'))
            <span class="invalid-feedback">
                <strong>{{ $errors->first('age') }}</strong>
            </span>
        @endif
    </div>
</div>

<!-- 省略 -->
```

#モデルの編集

コントローラーの編集に入る前にちょこっとモデルを編集します。
User モデル内の `$fillable` に先ほど追加した２項目を追加します。

```User.php
protected $fillable = [
    'name', 'gender', 'age', 'email', 'password',
];
```

DB への登録を許可するためにはホワイトリスト `$fillable` に項目を追加する必要があります。
詳しく知りたい方は以下のサイトが参考になるかと思います。

[参考サイト][link_1]

[link_1]:https://www.larajapan.com/2016/09/03/%E5%85%A5%E5%8A%9B%E3%81%AE%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88%E3%81%A8%E3%83%9B%E3%83%AF%E3%82%A4%E3%83%88%E3%83%AA%E3%82%B9%E3%83%88/

#コントローラーの編集

##バリデーション

追加した２項目のバリデーションを設定します。
ここらへんの設定は自由に行っていただければと思います。

```RegisterController.php
protected function validator(array $data)
{
    return Validator::make($data, [
        'name'     => 'required|string|max:255',
        'gender'   => 'required',
        'age'      => 'required|integer',
        'email'    => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|min:6|confirmed',
    ]);
}
```

##DB への保存

特に何も考えず、gender と age を登録できるように追加しましょう。

```RegisterController.php
protected function create(array $data)
{
    return User::create([
        'name'     => $data['name'],
        'gender'   => $data['gender'],
        'age'      => $data['age'],
        'email'    => $data['email'],
        'password' => Hash::make($data['password']),
    ]);
}
```

#ユーザー登録してみる

項目を埋めてポチっとな。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/238891/2a0655e1-81c5-485e-099c-e50927e8d210.png)

正常にログインできました。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/238891/8b049453-74e5-fc54-1a8c-2d0785c862f8.png)

次にバリデーション機能を確認するために、性別をわざと未入力で登録してみます。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/238891/1dc0f4e5-466a-9c0f-e9bc-e27681ff0837.png)

ポチっとな。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/238891/e742de30-0fb6-1561-54db-c0253cd9f9e8.png)

あれ、確かに DB からはじかれてるけどエラーメッセージが出ない...。
`$errors` の中身を確認すると確かにエラーメッセージは吐き出されてます。

```
"The gender field is required."
```

HTML を確認してみると、エラーメッセージを囲っている \<span> タグがなぜか `display: none;` になってました。
原因はわからなかったですが、とりあえず `<span style="display:inline;">` とインライン指定してあげたところ正常にエラーメッセージが表示されました。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/238891/c5fca5d5-edcd-5db4-ebe7-70364ae9f7d2.png)

う～ん、原因わかるひとがいたら教えていただけると助かります\_\(\.\_\.\)\_

今日はここまで。