Documentation Index Fetch the complete documentation index at: https://kawax.biz/llms.txt
Use this file to discover all available pages before exploring further.
スターターキットとは スターターキットは、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 コマンドを実行すると、対話形式でスターターキットを選べます。
Laravelインストーラーをインストールする
まだインストールしていない場合は、ComposerでLaravelインストーラーを取得します。 composer global require laravel/installer
新しいアプリケーションを作成する
laravel new コマンドを実行します。スターターキットの選択を含む対話的プロンプトが表示されます。プロンプトで React 、Vue 、Livewire 、Svelte のいずれかを選択します。
認証プロバイダーとして標準の Laravel 認証か WorkOS AuthKit かも選択できます。
フロントエンドの依存関係をインストールする
cd my-app npm install && npm run build
データベースを準備する
.env ファイルのデータベース設定を確認してからマイグレーションを実行します。
開発サーバーを起動する
ブラウザで http://localhost:8000 にアクセスすると、ナビゲーションに「Register」と「Log in」リンクが表示されます。 スターターキットをインストールすると、以下の認証機能がすぐに使えます。
機能 URL ユーザー登録 /registerログイン /loginパスワードリセット /forgot-passwordメール確認 /email/verifyプロフィール編集 /settings/profile
スターターキットのカスタマイズ 生成されたコードはすべて自分のアプリケーション内にあるので、自由に変更できます。
フロントエンドのコードの大半は resources/js(LivewireはBladeなので resources/views)ディレクトリにあります。
レイアウトの切り替え 各スターターキットには「サイドバー」と「ヘッダー」の2種類のレイアウトが用意されています。
デフォルトはサイドバーレイアウトです。
React
Vue
Livewire
Svelte
resources/js/layouts/app-layout.tsx を編集します。// サイドバーレイアウト（デフォルト） import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout' ; // ヘッダーレイアウトに変更する場合 import AppLayoutTemplate from '@/layouts/app/app-header-layout' ;
resources/js/layouts/AppLayout.vue を編集します。// サイドバーレイアウト（デフォルト） import AppLayout from '@/layouts/app/AppSidebarLayout.vue' ; // ヘッダーレイアウトに変更する場合 import AppLayout from '@/layouts/app/AppHeaderLayout.vue' ;
resources/views/layouts/app.blade.php を編集します。{{-- ヘッダーレイアウトに変更する場合 --}} < x-layouts::app.header > < flux:main container > {{ $slot }} </ flux:main > </ x-layouts::app.header >
resources/js/layouts/AppLayout.svelte を編集します。// サイドバーレイアウト（デフォルト） import AppLayout from '@/layouts/app/AppSidebarLayout.svelte' ; // ヘッダーレイアウトに変更する場合 import AppLayout from '@/layouts/app/AppHeaderLayout.svelte' ;
認証ページのレイアウト変更 ログインや登録ページも「simple」「card」「split」の3種類のレイアウトから選べます。
React
Vue
Livewire
Svelte
resources/js/layouts/auth-layout.tsx を編集します。// シンプルレイアウト（デフォルト） import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout' ; // 分割レイアウトに変更する場合 import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout' ;
resources/js/layouts/AuthLayout.vue を編集します。import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue' ; // 分割レイアウトに変更する場合 import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue' ;
resources/views/layouts/auth.blade.php を編集します。< x-layouts::auth.split > {{ $slot }} </ x-layouts::auth.split >
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の認証機能をさらに詳しく学びます。
