【PHP】Laravel6の認証画面を日本語表示しようと思ったら絶妙にハマった話

#この記事について
[この記事](https://qiita.com/666mikoto/items/f9462235a5646669f7e5)で認証機能をセットアップしたので、画面の文字を日本語化しようとしたら少しハマった話...

#環境
OS：Windows10 Home
PHP：7.4.15（XAMPP)
Laravel：6.20.16

#config/app.phpファイルの修正
日本語環境に設定します。

```php:config/app.php（変更箇所のみ）
'timezone' => 'Asia/Tokyo',

'locale' => 'ja',

'fallback_locale' => 'en',

'faker_locale' => 'ja_JP',
```

#viewの確認
とりあえずRegister画面を日本語化したいので、一度viewファイルを確認する。

```PHP:resources/view/auth/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>

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

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

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

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

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

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

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

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

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

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
```

上記コードの```{{ __('Register') }}```や```{{ __('Name') }}```がヘルパー関数を用いて文字列表示している。
ここを日本語に変換して表示させるようにする。

#変換ファイルの作成

ここに関しては、resources/langのフォルダ内に「ja.json」ファイルを新規作成して、変換内容を記載する。
この内容はRegister画面のみに適用されるわけではないので、1ファイルずつ修正していくよりこっちの方が断然楽だし、管理もしやすい。

```JSON:resources/lang/ja.json
{
	"Login": "ログイン",
	"Register": "ユーザー登録",
	"Name": "ユーザー名",
	"E-Mail Address": "メールアドレス",
	"Password": "パスワード",
	"Confirm Password": "パスワード確認"
}
```

#完成・・・？
Register画面を表示する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250196/4716dd1a-5087-8fea-ed2c-5dc39819ee0d.png)
え？？

#文字コードの罠
何も気にせずファイル作成したので文字コードがShift-JISだった・・・
UTF-8に変換して再度表示してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250196/8b49ab13-a5eb-42a1-7e01-8530bf8a9f89.png)
えぇ～？？

テキストエディタはTeraPadを使っているが、再度確認してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250196/76365ae2-b725-d72d-ab6a-933a1696fc43.png)
右下の通り、これはUTF-8・・・

試しに違うエディタ「Mery」で開いてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250196/147de38f-b42c-f7e9-2227-d761638c768a.png)
うん。UTF-8だよ・・・なんか（BOM付き）って書いてる。

いや、BOMいらないよね・・・
BOM無しで保存して再度表示してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250196/757a7c02-bf70-0b82-1396-94d0ea0b2636.png)
表示できた！！
BOM付きになってたのが原因><
TeraPadだと文字コードをUTF-8Nにしないとダメだった・・・

今日の記事さくっと書こうと思ってたのに文字コードの沼にハマりかけた話でした^^

ちなみにバリデーションとかのエラーの文言を日本語したい場合は、「resources/lang/en」フォルダをコピーして「resources/lang/ja」ファイルを作成してファイル内容を修正すればいけます！
自分で修正しなくても日本語ファイルがどこかでダウンロードできるらしいです！（自分はしらない）

#最後に
2/17分の記事です。
Qiitaの障害の影響で2/16は投稿できず、本日（日付変わったけど2/17のこと）は1日2記事投稿だったので大変でした。
この日本語表示、短い記事でさくっと終わるはずだったのに・・・