スターターキット

Laravelのスターターキットを使って認証・UIを素早くセットアップする方法

​

スターターキットとは

スターターキットは、Laravelアプリケーションの出発点として用意された公式のスキャフォールディングです。 ログイン・登録・パスワードリセット・メール確認といった認証機能と、それに対応するUIを一括でセットアップできます。

laravel new でアプリケーションを作成する際にスターターキットを選ぶだけで、認証まわりのルート・コントローラー・ビュー・フロントエンドコードがすべて自動で生成されます。 生成されたコードはすべて自分のアプリケーション内に存在するため、自由にカスタマイズできます。

Laravel 13では、従来の Breeze と Jetstream は廃止されました。 新しいプロジェクトでは以下で紹介するスターターキットを使用してください。 既存のBreezeやJetstreamを使ったプロジェクトはそのまま動作しますが、新規開発には推奨されません。

​

利用可能なスターターキット

Laravel 13では、以下の4種類のスターターキットが提供されています。

React

React 19・TypeScript・Tailwind 4・shadcn/ui を使ったモダンなSPA。 Inertia.js によりサーバーサイドルーティングを維持しながらReactを使用できます。

Vue

Vue 3 Composition API・TypeScript・Tailwind・shadcn-vue を採用。 Reactと同じくInertia.jsでサーバーサイドと連携します。

Livewire

PHPだけで動的UIを構築できる Livewire。 Bladeテンプレート中心のチームや、JavaScriptフレームワークを使わずに済ませたい場合に最適です。Flux UI を採用。

Svelte

Svelte 5・TypeScript・Tailwind・shadcn-svelte を使ったSPA。 Inertia.jsと組み合わせてモダンなフロントエンドを構築できます。

​

どれを選ぶべきか

スターターキット	向いているチーム
React	ReactエコシステムやTypeScriptに慣れているチーム
Vue	VueやNuxtの経験があるチーム
Livewire	PHPとBladeを中心に開発したいチーム
Svelte	SvelteやSvelteKitの経験があるチーム

どれを選んでも認証機能はまったく同じです。チームが最も慣れているフロントエンド技術を選んでください。

Blade・Livewire・Inertia・独立SPAの違いを全体像から確認したい場合は、先に フロントエンド を読むと選びやすくなります。

​

インストール方法

スターターキットはプロジェクト作成時に選択します。laravel new コマンドを実行すると、対話形式でスターターキットを選べます。

1. Laravelインストーラーをインストールする

   まだインストールしていない場合は、ComposerでLaravelインストーラーを取得します。

   composer global require laravel/installer
   
2. 新しいアプリケーションを作成する

   laravel new コマンドを実行します。スターターキットの選択を含む対話的プロンプトが表示されます。

   laravel new my-app
   

   プロンプトで React、Vue、Livewire、Svelte のいずれかを選択します。 認証プロバイダーとして標準の Laravel 認証か WorkOS AuthKit かも選択できます。

3. フロントエンドの依存関係をインストールする

   cd my-app
   npm install && npm run build
   
4. データベースを準備する

   .env ファイルのデータベース設定を確認してからマイグレーションを実行します。

   php artisan migrate
   
5. 開発サーバーを起動する

   composer run dev
   

   ブラウザで http://localhost:8000 にアクセスすると、ナビゲーションに「Register」と「Log in」リンクが表示されます。

スターターキットをインストールすると、以下の認証機能がすぐに使えます。

機能	URL
ユーザー登録	/register
ログイン	/login
パスワードリセット	/forgot-password
メール確認	/email/verify
プロフィール編集	/settings/profile

​

スターターキットのカスタマイズ

生成されたコードはすべて自分のアプリケーション内にあるので、自由に変更できます。 フロントエンドのコードの大半は resources/js(LivewireはBladeなので resources/views)ディレクトリにあります。

​

レイアウトの切り替え

各スターターキットには「サイドバー」と「ヘッダー」の2種類のレイアウトが用意されています。 デフォルトはサイドバーレイアウトです。

React

resources/js/layouts/app-layout.tsx を編集します。

// サイドバーレイアウト（デフォルト）
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

// ヘッダーレイアウトに変更する場合
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Vue

resources/js/layouts/AppLayout.vue を編集します。

// サイドバーレイアウト（デフォルト）
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

// ヘッダーレイアウトに変更する場合
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

Livewire

resources/views/layouts/app.blade.php を編集します。

{{-- ヘッダーレイアウトに変更する場合 --}}
<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

Svelte

resources/js/layouts/AppLayout.svelte を編集します。

// サイドバーレイアウト（デフォルト）
import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

// ヘッダーレイアウトに変更する場合
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

​

認証ページのレイアウト変更

ログインや登録ページも「simple」「card」「split」の3種類のレイアウトから選べます。

React

resources/js/layouts/auth-layout.tsx を編集します。

// シンプルレイアウト（デフォルト）
import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

// 分割レイアウトに変更する場合
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Vue

resources/js/layouts/AuthLayout.vue を編集します。

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';

// 分割レイアウトに変更する場合
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Livewire

resources/views/layouts/auth.blade.php を編集します。

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

Svelte

resources/js/layouts/AuthLayout.svelte を編集します。

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

// 分割レイアウトに変更する場合
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

​

ユーザー登録ロジックのカスタマイズ

スターターキットはユーザー登録やパスワードリセットの処理に app/Actions/Fortify ディレクトリのアクションクラスを使います。 たとえば登録時に電話番号フィールドを追加するには CreateNewUser.php を編集します。

public function create(array $input): User
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users'],
        'phone' => ['required', 'string', 'max:20'],
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],
        'password' => Hash::make($input['password']),
    ]);
}

​

WorkOS AuthKit 認証

laravel new 実行時に認証プロバイダーとして WorkOS AuthKit を選ぶこともできます。 WorkOS AuthKitを使うと、以下の機能が追加されます。

• ソーシャル認証(Google・Microsoft・GitHub・Apple)
• パスキー認証
• メールによる「Magic Auth」
• SSO(シングルサインオン)

WorkOS AuthKitの利用にはWorkOSアカウントが必要です。月間アクティブユーザー100万人までは無料で利用できます。

WorkOSを選択した場合は、.env ファイルに以下の環境変数を設定します。

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

​

注意点

スターターキットはプロジェクト作成時に選択するものです。 既存のプロジェクトに後から追加することはできません。 認証UIが必要な場合は、新規プロジェクトでスターターキットを選択するか、手動で認証機能を実装してください。

​

次のステップ

認証入門

Auth ファサードの使い方やルートの保護など、Laravelの認証機能をさらに詳しく学びます。