Laravel9にJetstream Livewire版をインストールする方法と注意点・初期設定を解説します。
まず最初にインストール前のご留意事項をお伝えした後、具体的なインストール方法を説明していきますね。
Laravel Jetstreamインストール前のご留意事項
Jetstream以外でもいえることですが、Laravel9以上をインストールするには、PHP8以上が必要になります。あらかじめ、準備しておいてください。
なお、既にBreezeやLaravel/ui等、すでに他のライブラリを入れたプロジェクトに、Jetstreamを入れるのはおすすめしません。
Jetstreamの公式マニュアルにも、下記のようにあります。
Jetstream should only be installed into new Laravel applications. Attempting to install Jetstream into an existing Laravel application will result in unexpected behavior and issues.
【日本語訳】
Jetstreamマニュアル：https://jetstream.laravel.com/2.x/installation.html
Jetstreamは高機能な分、やや複雑です。
他のライブラリで作ったプロジェクトに入れてしまうと、思わぬエラーが発生する可能性があるので、ご注意を。
Laravel Jetstreamインストール方法
それではインストール方法を解説します。
① まずは、普通通りLaravelのプロジェクトを作成します。
プロジェクトを作成するディレクトリで、下記コマンドを実行しましょう。
|
1 |
composer create-project --prefer-dist laravel/laravel jetstream |
最後のjetstreamはプロジェクト名です。お好みで変えてくださいね。
② Jetstream Livewire版をインストールします。
プロジェクト内で、下記コマンドを実行して、Jetstreamをインストールします。
|
1 |
composer require laravel/jetstream |
次に下記コマンドを実行します。
team版をいれる場合には、最後にteamをつけます。
|
1 |
php artisan jetstream:install livewire --teams |
team不要な場合は、最後の –teamsは付けずにコマンドを実行してください。
③ npm install と npm run dev を実行します。
|
1 |
npm install |
|
1 |
npm run dev |
④ マイグレート実行
下記コマンドを実行し、データベースにテーブルを作成します。
|
1 |
php artisan migrate |
⑤ サーバーをたてて、画面を表示する
サーバーを起動します。
|
1 |
php artisan serve |
トップページは下記のとおり。
トップページ右上をクリックすると、ログイン（/login)・登録ページ(/register) を表示できます。
【Jetstream Login】
【Jetstream Register】
Jetstream Livewireインストール時にエラーになった場合の対策
以上です。スムーズにいけば、それほど時間もかかりません。
ただ、エラーになることもあります。その場合の対策をいくつか載せておきますね。困ったときに参考にしてください。
npm run dev後に WARNINGS in child compilations と表示
webpack.mix.jsに下記を追加します。
|
1 2 3 4 5 |
mix.webpackConfig({ stats: { children: true } }); |
次にnpm run devを行うと、エラーの詳細が表示されるので、メッセージに応じて対応します。
Jetstreamのロゴ画像が大きすぎる！
インストール後、こんな感じでロゴ画像が表示された場合。
ロゴが大きすぎて、全体が表示できない…
public/mix-manifest.jsonファイルを下記のように変更すればロゴはなおります。
【mix-manifest.json 変更前】
|
1 2 3 4 |
{ "/js/app.js": "/js/app.js", "/css/app.css": "/css/app.css" } |
【mix-manifest.json 変更後】
|
1 2 3 4 |
{ "/js/app.js": "js/app.js", "/css/app.css": "css/app.css" } |
もしXAMPPサーバーを使っている場合は、ログイン後に他の修正も必要になる可能性があります。php artisan serveコマンドを実行して、サーバーを立ち上げることをおすすめします。
Jetstream Livewireインストール後の初期設定
最初に行っておいたほうが良い初期設定も、いくつかご紹介します。
コンポーネントファイルの作成
Jetstreamでは、ビューファイルのコンポーネントがあらかじめ用意されています。コンポーネントとは、ビュー部分を作る部品のようなものです。
ボタンを作るコンポーネントとか、各種コンポーネントがあらかじめ準備されています。
もし既存のコンポーネントに手を加えたい場合は、下記コマンドを実行します。
|
1 |
php artisan vendor:publish --tag=jetstream-views |
resources/views/vendor/jetstream/componentsの中に、各ファイルが作成されます。
ロゴの変更
ロゴ画面の変更方法も説明します。
たとえばログイン画面のロゴを変更したい場合には、上記の①コンポーネントのカスタマイズを実行した後、resources/views/vendor/jetstream/components/authentication-card-logo.blade.phpファイルを開きます。
既存のコードを削除し、お好きなロゴファイルを入れてください。
ログインページ（/login)を表示すると、差し替えた画像が表示されます。
言語や時間の設定
ほか、config/app.php ファイルでの言語や時間の設定など、他のライブラリを入れたと場合と同じ変更が必要となります。
詳細は下記を参考にしてください。
さいごに
以上、Jetstream Livewire版のインストール方法を解説しました。
使い方など、また別記事で解説するかもしれません。
複数のチームを作り、チーム内で役割を割り振る、といった機能を手軽に搭載するには、Jetstreamはすばらしいプラットフォームです。
ただ、機能が高度な分複雑です。小規模なプロジェクトの場合には、Breeze版が良いと思います。
用途に応じて、使い分けていきましょう♪
