【Laravel】JetStreamをインストール〜ログインまでを試す

2021年9月29日2024年1月8日

こんにちは。今回はLaravelから使うことができるJetStreamを試してみたいと思います。

JetStreamとは

JetStreamとはLaravelアプリケーションのスカフォールドです。スカフォールドとはアプリケーションの雛形のことで、開発の共通部分をある程度作り込んでくれる機能のことを指します。JetStreamはログイン、２要素認証、ユーザー登録、メール確認、セッション管理の機能を生成します。これらの機能がはじめから用意されているところからアプリケーション開発が始められるのはかなり魅力的です。

JetStreamはログイン画面や、ログイン後のダッシュボード画面も用意してくれます。TailwindというCSSフレームワークを採用しているので、洗練した見た目のWEBページが作成されます。

フロントの開発はLivewireとInertiaという２つのいずれかを選択することができます。イメージとしてはLivewireは従来のBladeと同じような開発、Inertiaはvue.jsを採用しているので、SPAのような開発となります。これらは好みですので、開発しやすい方を選択すれば良いと思います。

インストール手順

それではJetStreamのインストール手順を説明していきます。

新しいLaravelプロジェクトをまずは作ります。今回はjs-sampleというプロジェクトで作ります。

$ composer create-project laravel/laravel js-sample

作成したプロジェクトに移動し、composerでJetStreamをインストールします。

composer require laravel/jetstream

今回はフロント開発にlivewireを採用しますので、artisan jetstream:install livewireを実行します。

$ php artisan jetstream:install livewire

Livewire scaffolding installed successfully.
Please execute "npm install && npm run dev" to build your assets.

javascript類のインストールとビルドをしろと指示されるので、実行します。

npm install && npm run dev

JetStreamをインストールした時点で、必要なテーブルのマイグレーションを作成しています。マイグレーションを実行して必要なテーブルを作成します。

php artisan migrate

php artisan serveコマンドでローカルサーバーを立ち上げhttp://localhost:8000/loginにアクセスしてみましょう。以下のようなログイン画面が表示されれば成功です。

ユーザーデータを作成する

ログイン画面は作成されましたが、ログインするためのユーザー情報がデータベースに登録されていないので、このままではログインすることができません。ユーザー情報を作成するためのFactoryとSeederが用意されているので、それを使用してユーザーデータを作成します。

    public function run()
    {
        // 以下のコードがコメントアウトされているので、コメントを外します。
        \App\Models\User::factory(10)->create();
    }

Seederを実行します。

php artisan db:seed

Usersテーブルを見てみましょう。データが登録されました。

ログイン画面に戻りログインしてみましょう。※ユーザーの初期パスワードは一律でpasswordで設定されています。

ログインが成功するとDashboard画面に遷移します。

まとめ

いかがでしょうか。すごく簡単な手順でログイン画面を備えたアプリケーションを作成することができました。私も初めて作成したときはそのスピード感にかなり興奮しました。

今回は、取り敢えずログインするところまで作成してみました。次回はログイン周りの機能紹介をさせていただきます。