Laravel デフォルトの会員登録画面をカスタムしてみた


Laravelの`php artisan make:auth`で生成される認証機能の1つ
register.blade.phpをカスタマイズしてみました。
デフォルトのままは嫌！という方の参考になれば幸いです。

Laravel バージョン 5.8

#完成品#
カスタマイズ前
<img width="575" alt="bbb.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365613/43c0a271-3c21-890a-2c54-02bc7a2b018c.png">




カスタマイズ後
<img width="575" alt="aaa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365613/ed3feb9c-4f3d-daab-ef19-731246df416e.png">

英語表記の部分をすべて日本語に修正しています。
入力条件に一致しない場合、バリデーションによってエラー出力されますがエラーの内容についても日本語に対応しています。
デザインも白色系から、白黒に修正していますがBootStrapの話になるのでここでは解説を省きます。

#使用するファイル群#
すでに`php artisan make:auth`は済んでいる状態で説明します。
使用するファイルは以下です。

```
make:authコマンドで作成される会員登録画面。
今回で言うカスタマイズ前の画面が表示されます。
resources > auth > register.blade.php

テンプレートですね。
make:authで自動生成されます。
resources > layouts > app.blade.php

認証系で使うコントローラ
app > Http > Controllers > Auth > RegisterController.php 

RegisterController.phpが参照しているメソッドが格納されている。
vendor > laravel > framework > src > Illuminate > Foundation > Auth > RegistersUsers.php
```

#register.blade.phpの修正#
英語表記されている部分を日本語に修正していきます。

```register.blade.php
@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">{{ __('Register') }}</div>
```
register.blade.phpの上から8行を表示しています。
ここで修正するのは`{{ __('Register') }}`の部分。
__()というヘルパ関数を使用していますが今回は特に使わないので以下のようにします。
`<div class="card-header">会員登録</div>`
ほかの個所についてもヘルパ関数を利用しているように見えますが、特別に処理を加える必要がない場合は利用しなくていいと思います。
Name, E-Mail Address等の部分についても同様に修正していきましょう。


#バリデーションのエラーメッセージをカスタマイズする#

###RegisterController.php###
RegisterController.phpから見ていきます。
確認する場所はvalidatorメソッドです。

```RegisterController.php
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'],
    ]);
}
```

上記の通り、validatorメソッドでバリデーションしているのがわかります。
nameでいうと、required, string, max:255でチェックしていますね。


###RegistersUsers.php###
RegistersUsers.phpには実際にregister.blade.phpにアクセスした際のget処理などが記載されています。
RegisterController.phpにはアクセスする処理は書いておらず、RegistersUsers.phpをトレイトしています。

そのため、処理関係はRegistersUsers.phpに書いていくことにします。
今回でいうとバリデーションのエラーメッセージをRegistersUsers.phpをここに書きます。

最終行に以下を追記しました。

```RegistersUsers.php
public static $registerErrorMessage = array
(
    'name.required' => '名前を入力して下さい。',
    'name.string' => '文字列で入力して下さい。',
    'name.max' => '255文字以内で入力して下さい。',
    'email.required' => 'メールアドレスを入力して下さい。',
    'email.string' => '文字列で入力して下さい。',
    'email.email' => 'メール形式で入力して下さい。',
    'email.unique:users' => 'すでにこのメールアドレスは登録されています。',
    'email.max:255' => '255文字以内で入力して下さい。',
    'password.required' => 'パスワードを入力して下さい。',
    'password.string' => '文字列で入力して下さい。',
    'password.min' => '8文字以上入力して下さい。',
    'password.confirmed' => 'パスワードが一致しません'
);
```

#RegisterController.phpにエラーメッセージを付与する。#
バリデーション時にエラーになった場合、今の時点では英語でエラーメッセージが表示されるため、日本語に上書きしたいと思います。
先ほどRegistersUsers.phpで追記した$registerErrorMessageを以下のように付与します。

```RegisterController.php
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'],
    ], RegistersUsers::$registerErrorMessage);

```

Validator::makeの第3引数にRegistersUsers::$registerErrorMessageを付与しました。
こうすることでエラーメッセージを指定することが可能です。

以上の処理を行うことで、バリデーション時にエラーメッセージは日本語表記になります。