Laravel Jetstreamでは、フロントエンドスカフォールドをLivewireかInertia.jsかを選択できますが、今回はLivewireを選択しました。
手順
インストール
composerでLaravel Jetstreamをインストールします。
composer require laravel/jetstream
Livewireをインストールします。
※オプション--teams を付加でチーム管理機能を使用できるようです。
php artisan jetstream:install livewire --teams
ビルドを実行します。
npm install && npm run dev
マイグレーションファイルを実行します。
php artisan migrate
これでトップページに無事アクセスできるようになります。
日本語設定
Laravelを日本語に対応させます。
まずは下記の値を修正します。
<?php
return [
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
'fallback_locale' => 'ja',
'faker_locale' => 'ja_JP',
];
ログインページページも日本語に修正してみます。
<div>
<x-jet-label for="email" value="{{ __('メールアドレス') }}" />
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>
<div class="mt-4">
<x-jet-label for="password" value="{{ __('パスワード') }}" />
<x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
</div>
<div class="block mt-4">
<label for="remember_me" class="flex items-center">
<x-jet-checkbox id="remember_me" name="remember" />
<span class="ml-2 text-sm text-gray-600">{{ __('次回から自動でログインする') }}</span>
</label>
</div>
<div class="flex items-center justify-end mt-4">
@if (Route::has('password.request'))
<a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
{{ __('パスワードをお忘れですか?') }}
</a>
@endif
<x-jet-button class="ml-4">
{{ __('ログイン') }}
</x-jet-button>
</div>
英語名だった箇所を書き換えるだけなので簡単です。
バリデーションメッセージも日本語に変更します。
ressources/lang/jaを作成し、jaディレクトリの配下はressources/lang/enと同様です。
日本語化ファイルは公式ページより取得可です。
https://readouble.com/laravel/8.x/ja/auth-php.html
https://readouble.com/laravel/8.x/ja/pagination-php.html
https://readouble.com/laravel/8.x/ja/passwords-php.html
https://readouble.com/laravel/8.x/ja/validation-php.html
ただし、↑を作成しただけでは一部日本語化できていないところがあるようです。
例えば、、Whoops! Something went wrong
どうやら、これは下記で表示しているようです。。。
@if ($errors->any())
<div {{ $attributes }}>
<div class="font-medium text-red-600">{{ __('Whoops! Something went wrong.') }}</div>
<ul class="mt-3 list-disc list-inside text-sm text-red-600">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
このような公式の日本語化ファイルで対応できなかったバリデーションメッセージは、resources/lang配下にja.jsonを作成して対処します。
{
"Whoops! Something went wrong.": "エラーが発生しました。"
}
日本語で表示されました。他所でも日本語化できない所を発見したら、随時resources/lang/ja.jsonに追記していけば大丈夫そうです。
テストデータを作成
既にUserのFactoryは用意されているため、下記ファイルのコメントアウトを外して準備完了です。
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
\App\Models\User::factory(10)->create(); // ここのコメントアウトを外す。
}
}
Seederファイルを実行します。
php artisan db:seed
ちなみに、ユーザー登録ページよりデータを作成することも可能です。
ログインテスト
作成したテストデータでログインを実行します。
ダッシュボードにリダイレクトされたらログイン成功です。
ログイン後にはプロフィールページなんかもあるようです。
ひとまずログインは成功したのでここで終わります。