Laravel8 以降の Laravel のスターターキットとして登場した Jetstream について解説します。

Laravel Jetstream 公式（英語）

Jetstream とは？

Laravel Jetstream.
Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application. Jetstream provides the implementation for your application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.
Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.

【翻訳】 Laravel Jetstream は、Laravel 用の美しいデザインのアプリケーションスターターキットで、次の Laravel アプリケーションのための完璧な出発点を提供します。 Jetstream は、アプリケーションのログイン、登録、メール認証、二要素認証、セッション管理、Laravel Sanctum 経由の API、オプションのチーム管理機能の実装を提供します。 Jetstream は、Tailwind CSS を使用して設計され、Livewire または Inertia scaffolding を選択できます。

引用：Jetstream 公式

ようするにコマンド１つで、Laravel でサービスを作る際に、よく使われる機能を一通り揃えてくれるのがこの Jetstream というものです。

Jetstream で何ができるのか？

composer require laravel/jetstream

上記のコマンドを打つことで、以下の機能を簡単に実装してくれます。

1. ログイン
2. ユーザー登録
3. メール確認
4. ２要素認証
5. セッション管理
6. Laravel Sanctum を使った API
7. チーム管理
8. Tailwind CSS
9. Livewire または Inertia(Vue のみ、React 不可)

また、これらの機能はカスタマイズすることが可能です。

Breeze との違い

Laravel のスターターキットはもう一種類あります。

それが「Breeze」というものです。

実際、サービスを作るとなるとユーザー機能が付くことが大半だと思うので、これを簡単にざっと作ってくれるスターターキットは魅力的です。

「Jetstream」と「Breeze」のどちらで始めるか？と、一番最初に大事な２択をする感じです。

ポケモンでヒトカゲとフシギダネのどっちをもらうかくらいの２択です。

ポケットモンスター 青

¥2,150 (2024/09/30 13:00時点 Amazon調べ) 現在の値段の詳細はこちら

Amazon

Breeze とは？

Laravel Breeze は、ログイン、ユーザー登録、パスワードリセット、メール確認、パスワード確認など、すべての認証機能を最小かつシンプルに Laravel へ実装したものです。さらに、Breeze には、ユーザーが名前、電子メールアドレス、パスワードを更新できるシンプルな「プロファイル」ページが含まれています。 Laravel Breeze のデフォルトのビュー層は、Tailwind CSS でスタイリングした、シンプルな Blade テンプレートで構成しています。さらに、Breeze には Livewire（和訳）、または Inertia に基づいたスカフォールドオプションがあり、Inertia ベースのスカフォールドには Vue または React を使用できます。

引用：Laravel ドキュメント

文章に出てきた機能をまとめてみました。

1. ログイン
2. ユーザー登録
3. パスワードリセット
4. メール確認
5. パスワード確認
6. プロフィールページ
7. Tailwind CSS
8. Livewire または Inertia(Vue or React)

似たような感じですが、文章で出てきた機能を並べただけなので詳細を見に行ってみます。

Jetstream をインストールする

まず Jetstream をインストールします

コマンドを入力してインストールします。

composer require laravel/jetstream

下記のバージョンがうまく入ったようです。

Using version ^5.2 for laravel/jetstream

ビューのテンプレートを選ぶ

livewire か、Inertia を選ぶ必要があります。

これらをインストールする必要性については、

View [auth.login] not found.

このように View ファイルが足りていないからです。

livewire は、Laravel の blade を使った開発をする場合、Inertia は、フロントエンドで Vue を使った開発をする場合に選択します。

今回は Inertia を選択してみます。

php artisan jetstream:install inertia --teams --ssr

オプションの--teams は、チーム機能を使いたい場合、--ssr は SSR（サーバーサイドレンダリング）を使いたい場合に書きます。

不要の場合、消してください。

今回は色々確認するために全部込みで実行しています。

途中で選択肢が出てきて、マイグレーションを実行して良いか？と聞かれたので Yes を選択します。

New database migrations were added. Would you like to re-run your migrations?

Yesを選択

続けてコマンドを打っていきます。

npm i
npm run dev

このとき、Register.vue などを読み込めないというようなエラーがコンソールに出ていたら、Docker であればポート 5173 を Docker 外（ブラウザ）から接続できるように設定する必要があります。

app コンテナや vite.config.js を以下の記事のように設定してみてください。

→ Docker で Laravel 11 の開発環境を構築する方法【動画あり】

機能をみてみる

認証周りは Fortify で実装されている

前述のように、Laravel Fortify は Laravel のフロントエンドに依存しない認証バックエンドの実装です。Fortify は、ログイン、ユーザー登録、パスワードのリセット、メールの検証など、Laravel のすべての認証機能を実装するために必要なルートとコントローラを登録します。

Laravel を初めて使用する場合は、Laravel Fortify を使用する前に、Laravel Breeze アプリケーションスターターキットを調べることをお勧めします。Laravel Breeze は、Tailwind CSS で構築されたユーザーインターフェイスを含む、アプリケーションの認証スカフォールドを提供します。Fortify とは異なり、Breeze はルートとコントローラをアプリケーションに直接リソース公開します。これにより、Laravel Fortify によりこれらの機能を実装する前に、Laravel の認証機能を学習し、慣れることができます。

初めて Laravel を触る人には Breeze を推しています。

Laravel 11.x Laravel Fortify

ログイン

トップページのヘッダーにログインや新規登録のリンクが表示されるようになりました。

ちなみに、Jetstream をインストールした時点でこれらは表示されています。

'/login'がログインページの URL です。

しかし、リンクをクリックした先のページは、その後の Inertia をインストールした後に作られます。

僕だけがいじめられているのか、それとも皆んなそうなのかは分からないですが、今回はそうでした。

ログインページは以下のようでした。ロゴとかを変えれば十分使えそうです。おしゃれですね。

App\Providers\FortifyServiceProviderに、色々設定が書かれているようです。

ログイン処理をカスタマイズする際は、

App\Providers\FortifyServiceProvider の boot()に追記してやるように書いてあります。

public function boot(): void
{
    Fortify::authenticateUsing(function (Request $request) {
        $user = User::where('email', $request->email)->first();

        if ($user &&
            Hash::check($request->password, $user->password)) {
            return $user;
        }
    });

    // ...
}

Fortify::authenticateUsing をオーバーライドすれば色々カスタマイズできそうですが、（沼りそうなので）今回は割愛します。

また、config/fortify.php にも設定が書かれています。

ユーザー認証のカスタマイズ

新規登録ページ

'/register' に接続すると、新規登録ページがあります。

新規登録は

app/Actions/Fortify/CreateNewUser.php

あたりを修正すれば、カスタマイズできそうです。

メール確認

メール認証ともいうかもしれませんが、自動メールを飛ばしてユーザーがメールのリンクをクリックしたらメールの認証をしてくれるものです。

→【Laravel】Jetstream(Fortify)を使ってメール認証を実装する方法

２要素認証

２要素認証は、Google Authenticator などのスマホアプリと連携して２段階に認証できる機能で、特に何もしなくても以下の画像のようなテンプレートが自動的に入ります。

開発者としては、これらを使いながらサービスにあった見た目に整える感じですね。便利でありがたいです。

プロフィールページに、以下の項目があります。

有効化しようとすると、パスワードを入力するモーダルが出ます。

アプリが読み込むための QR コードが表示されます。Google Authenticator などで QR コードを読みこませ、アプリに表示された 6 桁の数字を入力します。

スマホが使えなくなったときなどに使う復旧コードが表示されます。

一度ログアウトして、動作を確認します。以下のように Google Authenticator のコードを入力する画面が表示されます。

→【Laravel】Jetstream の２要素認証のデザインをカスタマイズする方法

セッション管理

項目だけでは謎だったこのセッション管理ですが、他のデバイスからログインしている場合セッションを切断しログアウトにさせることができる機能なようです。

公式ドキュメント（英語）

Laravel Sanctum を使った API

Jetstream includes first-party integration with Laravel Sanctum. Laravel Sanctum provides a featherweight authentication system for SPAs (single page applications), mobile applications, and simple, token-based APIs. Sanctum allows each user of your application to generate multiple API tokens for their account. These tokens may be granted abilities / permissions which specify which actions the tokens are allowed to perform.

引用：公式より

ようするに、

1. Sanctum を使った token を使った API 認証やスマホアプリにも対応可能
2. 複数の API token を発行可能
3. token に対して権限を付与できる

という機能があるようです。

2 と 3 の機能に雛形があるようで、これを使えるようにするためには config を触る必要があるらしいです。

config/jetstream.php

//60行くらい
'features' => [
    // Features::termsAndPrivacyPolicy(),
    // Features::profilePhotos(),
    Features::api(), //このコメントアウトを外す

右上のメニューに「API tokens」が追加されました。

試しに名前と permissions を選択して CREATE を押してみました。

すると、token が発行され、画像のように発行された内容が表に追加されました。

このデータは、personal_access_tokens に保存され token や紐づくユーザー、権限レベルが保存されています。

（おそらく users 以外に認証するモデルをカスタマイズできるようになっています）

色々なことに使えそうな機能ではありますが、token だけを付与するパターンは結構ユースケースが限られるんじゃないかと思います。

例えば、GCP の API key とかはこれに近いと思います。

外部アプリとの連携やモバイルアプリ連携の場合、そっちで同じ DB 接続してユーザー情報を元にログインさせれば良い気がしますし、そういう仕様のサービスしか思い当たらないです。

Developer 向けサービスを思い浮かべると、なんとなくユースケースが浮かんでくるかなと言った感じです。

チーム管理

この機能は、Jetstream をインストールする際に、オプション--teams を付けると最初からついている機能です。

公式ドキュメント（英語）

右上のメニューにチーム関係のリンクが表示されています。

Team Settings

1. チーム名の変更
2. メンバーの追加（メールアドレス）
3. チームの削除

Create Team

チーム名を入力して新規作成

関連 DB

• temas
• team_invitations
• team_user
• users

users テーブルの current_team_id で選択中のチームを記録しているようです。

うまく使えば、企業向けの Saas を作るときに役立ちそうな機能だと思います。

Tailwind CSS

今、主流になりつつある CSS フレームワークです。

Bootstrap の「全てのクラス定義を最初に読み込ませて」使うのではなく、

class の指定で使ったクラスだけ読み込ませることが 1 番の違いだと思います。

要するに、

「表示が早い」が「開発コストは上がる（ビルドしながら使う、たまにビルドしてるのに反映されなかったりする）」

特徴

1. スマホベースのレスポンシブ（min-width を採用）
2. クラスを覚えやすい
3. 表示が早い
4. 公式ドキュメントが読みやすい

ビルドしながら使わないとクラスを書いても CSS が当たらないので、

npm run dev

を動かしながら使います。

TailwindCSS

Livewire または Inertia

Livewire は Laravel の blade ベースでフロントエンドを書く場合に選択。

Inertia は Vue でフロントエンドを書く場合に選択するものっぽいです。

残念ながら Jetstream をインストール時に、 React を Inertia パターンで選択する方法が見つかりませんでした。

公式ではないですが、有志の方が変換するパッケージを開発してくれていますし、2024 年現在で動くそうです。

laravel-jetstream-react

ただ、

If you're starting a new React and Laravel project I would recommend using Laravel Breeze instead as it has a first party React version with almost all of the same features.

（翻訳）新しい React と Laravel のプロジェクトを始めるのであれば、代わりに Laravel Breeze を使うことをお勧めします。

とのことですので、React を使いたい場合は Breeze を選択するのが良さそうです。

まとめ

自分で機能を確認しながら、Jetstream の理解を深めてみました。

特段理由がない限り Breeze で良いと思います。

２要素認証や、セッション管理の機能も Breeze ベースで自作できると思います。

Breeze、Sanctum が分かりやすくて楽で好きです。

技術選定の参考になれば幸いです。