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

この記事について

この記事で認証機能をセットアップしたので、画面の文字を日本語化しようとしたら少しハマった話...

環境

OS：Windows10 Home
PHP：7.4.15（XAMPP)
Laravel：6.20.16

config/app.phpファイルの修正

日本語環境に設定します。

config/app.php（変更箇所のみ）

'timezone' => 'Asia/Tokyo',

'locale' => 'ja',

'fallback_locale' => 'en',

'faker_locale' => 'ja_JP',

viewの確認

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

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ファイルずつ修正していくよりこっちの方が断然楽だし、管理もしやすい。

resources/lang/ja.json

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

完成・・・？

Register画面を表示する。

え？？

文字コードの罠

何も気にせずファイル作成したので文字コードがShift-JISだった・・・
UTF-8に変換して再度表示してみる。

えぇ～？？

テキストエディタはTeraPadを使っているが、再度確認してみる。

右下の通り、これはUTF-8・・・

試しに違うエディタ「Mery」で開いてみる。

うん。UTF-8だよ・・・なんか（BOM付き）って書いてる。

いや、BOMいらないよね・・・
BOM無しで保存して再度表示してみる。

表示できた！！
BOM付きになってたのが原因><
TeraPadだと文字コードをUTF-8Nにしないとダメだった・・・

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

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

最後に

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