Laravel Jetstream 1.0 インストール

Jetstreamのインストール

Composerを使用して、Jetstreamを新しいLaravelプロジェクトにインストールできます。

composer require laravel/jetstream

Jetstreamパッケージをインストールした後、jetstream：install Artisanコマンドを実行する必要があります。このコマンドでは、好みのスタックの名前（livewireかinertia）を引数で指定します。Jetstreamプロジェクトを開始する前に、Livewire、またはInertiaのドキュメント全体を読むことを強く推奨します。また、--teamsスイッチを使用して、チームサポートを有効にできます。

Livewireと同時にJetstreamをインストール

php artisan jetstream:install livewire

php artisan jetstream:install livewire --teams

Inertiaと同時にJetstreamをインストール

php artisan jetstream:install inertia

php artisan jetstream:install inertia --teams

インストールを完了する

Jetstreamがインストールできたら、NPM依存をインストール・構築し、データベースをマイグレートしてください。

npm install && npm run dev

php artisan migrate

Jetstreamの構造

ビュー／ページ

インストールにより、Jetstreamはアプリケーションへ様々なビューやクラスをリソース公開します。Livewireを使う場合、ビューはresources/viewsディレクトリへリソース公開されます。Inertiaを使用する場合、「ページ」はresources/js/Pagesディレクトリへリソース公開されます。これらのビューやページはJetstreamがサポートする機能をすべて含んでおり、必要に応じて自由にカスタマイズできます。Jetstreamはアプリケーションの開始地点だと考えてください。Jetstreamをインストールしたら、なんでも好きなように自由にカスタマイズできます。

ダッシュボード

アプリケーションの「メイン」となるビューは、Livewireを使う場合はresources/views/dashboard.blade.php、Inertiaを使う場合は、resources/js/Pages/Dashboard.vueへリソース公開されます。アプリケーションのメインのビューを作成するスタートポイントとしてこれを自由に使ってください。

アクション

さらに、「アクション」クラスは、アプリケーションのapp/Actionsディレクトリへリソース公開されます。これらのアクションクラスは、たとえばチームを作成するとかユーザーを削除するとか、通常Jetstreamの単一機能に対応した、単一のアクションを実行します。Jetstreamのバックエンドの動作を調整したい場合、これらのクラスを自由にカスタマイズしてください。

Tailwind

インストールにより、JetstreamはTailwind CSSフレームワークを使用しアプリケーションと統合したスカフォールドを提供します。アプリケーションのCSSコンパイル済み出力を構築するために、以降の２ファイルを使用します。アプリケーションの必要に合わせ、これらのファイルは自由に変更してください。

それに付け加え、選択したJetstreamスタックに合わせ、適切な指定関連ディレクトリでPurgeCSSをサポートするように、tailwind.config.jsファイルを事前設定しています。

アプリケーションのpackage.jsonファイルはアセットコンパイルに使用するNPMコマンドをはじめから準備しています。

npm run dev

npm run prod

npm run watch

Livewireのコンポーネント

JetstreamはLivewireスタックを活用するために、ボタンやモーダルなど様々なBladeコンポーネントを使用しています。Livewireスタックを使っており、Jetstreamをインストールした後にこれらのコンポーネントをリソース公開したい場合は、vendor:publish Artisanコマンドを使います。

php artisan vendor:publish --tag=jetstream-views

アプリケーションのロゴ

Jetstreamのロゴが最上部のナビと同様に認証ページでも利用されていることに、皆さんお気づきでしょう。Jetstreamの２コンポーネントを変更すれば、ロゴのカスタマイズは簡単です。

Livewire

Livewire使用の場合、最初にLivewireスタックのBladeコンポーネントをリソース公開します。

php artisan vendor:publish --tag=jetstream-views

次に、resources/views/vendor/jetstream/components/application-logo.blade.php、resources/views/vendor/jetstream/components/authentication-card-logo.blade.php、resources/views/vendor/jetstream/components/application-mark.blade.phpにあるSVGをカスタマイズします。

Inertia

Inertiaスタック使用の場合、最初にJetstreamのBladeコンポーネントをリソース公開します。これらのコンポーネントは、認証テンプレートで使用されています。

php artisan vendor:publish --tag=jetstream-views

次に、resources/views/vendor/jetstream/components/authentication-card-logo.blade.php、resources/js/Jetstream/ApplicationLogo.vue、resources/js/Jetstream/ApplicationMark.vueの中のSVGをカスタマイズしてください。コンポーネントをカスタマイズしたら、最後にアセットを再ビルドします。

npm run dev