メインコンテンツまでスキップ
バージョン: 13.x

Starter Kits

Introduction​

新しい Laravel アプリケーションの構築をすぐに始められるように、application starter kits を提供させていただきます。これらのスターター キットを使用すると、次の Laravel アプリケーションの構築をスムーズに始めることができ、アプリケーションのユーザーを登録および認証するために必要なルート、コントローラ、ビューが含まれています。スターター キットは、Laravel Fortify を使用して認証を提供します。

これらのスターター キットを使用しても構いませんが、必須ではありません。 Laravel の新しいコピーをインストールするだけで、独自のアプリケーションを最初から自由に構築できます。いずれにせよ、私たちはあなたが素晴らしいものを作り上げることを確信しています。

Creating an Application Using a Starter Kit​

スターターキットのいずれかを使用して新しい Laravel アプリケーションを作成するには、まず install PHP and the Laravel CLI tool を実行する必要があります。すでに PHP と Composer がインストールされている場合は、Composer 経由で Laravel インストーラー CLI ツールをインストールできます。

composer global require laravel/installer

次に、Laravel インストーラー CLI を使用して、新しい Laravel アプリケーションを作成します。 Laravel インストーラーは、好みのスターター キットを選択するよう求めます。

laravel new my-app

Laravel アプリケーションを作成した後、NPM 経由でフロントエンドの依存関係をインストールし、Laravel 開発サーバーを起動するだけです。

cd my-app
npm install && npm run build
composer run dev

Laravel 開発サーバーを起動すると、Web ブラウザー (http://localhost:8000) でアプリケーションにアクセスできるようになります。

Available Starter Kits​

React​

当社の React スターター キットは、Inertia を使用して React フロントエンドで Laravel アプリケーションを構築するための堅牢で最新の開始点を提供します。

Inertia を使用すると、従来のサーバー側のルーティングとコントローラを使用して、最新の単一ページの React アプリケーションを構築できます。これにより、React のフロントエンドのパワーと、Laravel の驚異的なバックエンドの生産性および超高速の Vite コンパイルを組み合わせて楽しむことができます。

React スターター キットは、React 19、TypeScript、Tailwind、および shadcn/ui コンポーネント ライブラリを利用します。

Svelte​

当社の Svelte スターター キットは、Inertia を使用して Svelte フロントエンドを備えた Laravel アプリケーションを構築するための堅牢で最新の開始点を提供します。

Inertia を使用すると、従来のサーバー側のルーティングとコントローラを使用して、最新の単一ページの Svelte アプリケーションを構築できます。これにより、Svelte のフロントエンドのパワーと、Laravel の驚異的なバックエンドの生産性および超高速の Vite コンパイルを組み合わせて楽しむことができます。

Svelte スターター キットは、Svelte 5、TypeScript、Tailwind、および shadcn-svelte コンポーネント ライブラリを利用します。

Vue​

Vue スターター キットは、Inertia を使用して Vue フロントエンドで Laravel アプリケーションを構築するための優れた開始点を提供します。

Inertia を使用すると、従来のサーバー側のルーティングとコントローラを使用して、最新の単一ページの Vue アプリケーションを構築できます。これにより、Vue のフロントエンドのパワーと、Laravel の驚異的なバックエンドの生産性および超高速の Vite コンパイルを組み合わせて楽しむことができます。

Vue スターター キットは、Vue Composition API、TypeScript、Tailwind、および shadcn-vue コンポーネント ライブラリを利用します。

Livewire​

当社の Livewire スターター キットは、Laravel Livewire フロントエンドを使用して Laravel アプリケーションを構築するための完璧な開始点を提供します。

Livewire は、PHP だけを使用して動的でリアクティブなフロントエンド UI を構築する強力な方法です。これは、主に Blade テンプレートを使用し、React、Svelte、Vue などの JavaScript 駆動の SPA フレームワークのよりシンプルな代替手段を探しているチームに最適です。

Livewire スターター キットは、Livewire、Tailwind、および Flux UI コンポーネント ライブラリを利用します。

Starter Kit Customization​

React​

当社の React スターター キットは、Inertia 3、React 19、Tailwind 4、および shadcn/ui で構築されています。すべてのスターター キットと同様に、バックエンドとフロントエンドのコードはすべてアプリケーション内に存在し、完全なカスタマイズが可能です。

フロントエンド コードの大部分は、resources/js ディレクトリにあります。コードを自由に変更して、アプリケーションの外観と動作をカスタマイズできます。

resources/js/
├── components/ # Reusable React components
├── hooks/ # React hooks
├── layouts/ # Application layouts
├── lib/ # Utility functions and configuration
├── pages/ # Page components
└── types/ # TypeScript definitions

追加の shadcn コンポーネントを公開するには、まず find the component you want to publish を実行します。次に、npx を使用してコンポーネントを公開します。

npx shadcn@latest add switch

この例では、コマンドはスイッチ コンポーネントを resources/js/components/ui/switch.tsx に公開します。コンポーネントが公開されると、どのページでも使用できるようになります。

import { Switch } from "@/components/ui/switch"

const MyPage = () => {
return (
<div>
<Switch />
</div>
);
};

export default MyPage;

Available Layouts​

React スターター キットには、「サイドバー」レイアウトと「ヘッダー」レイアウトという 2 つの異なる主なレイアウトから選択できます。サイドバー レイアウトがデフォルトですが、アプリケーションの resources/js/layouts/app-layout.tsx ファイルの先頭にインポートされるレイアウトを変更することで、ヘッダー レイアウトに切り替えることができます。

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; // [tl! remove]
import AppLayoutTemplate from '@/layouts/app/app-header-layout'; // [tl! add]

Sidebar Variants​

サイドバーのレイアウトには、デフォルトのサイドバー バリアント、「インセット」バリアント、および「フローティング」バリアントの 3 つの異なるバリアントが含まれています。 resources/js/components/app-sidebar.tsx コンポーネントを変更することで、最も好みのバリアントを選択できます。

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

Authentication Page Layout Variants​

React スターター キットに含まれる認証ページ (ログイン ページや登録ページなど) にも、「シンプル」、「カード」、「分割」の 3 つの異なるレイアウト バリアントが提供されています。

認証レイアウトを変更するには、アプリケーションの resources/js/layouts/auth-layout.tsx ファイルの先頭にインポートされるレイアウトを変更します。

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; // [tl! remove]
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; // [tl! add]

Svelte​

当社の Svelte スターター キットは、Inertia 3、Svelte 5、Tailwind、および shadcn-svelte で構築されています。すべてのスターター キットと同様に、バックエンドとフロントエンドのコードはすべてアプリケーション内に存在し、完全なカスタマイズが可能です。

フロントエンド コードの大部分は、resources/js ディレクトリにあります。コードを自由に変更して、アプリケーションの外観と動作をカスタマイズできます。

resources/js/
├── components/ # Reusable Svelte components
├── layouts/ # Application layouts
├── lib/ # Utility functions and configuration and Svelte rune modules
├── pages/ # Page components
└── types/ # TypeScript definitions

追加の shadcn-svelte コンポーネントを公開するには、まず find the component you want to publish を実行します。次に、npx を使用してコンポーネントを公開します。

npx shadcn-svelte@latest add switch

この例では、コマンドはスイッチ コンポーネントを resources/js/components/ui/switch/switch.svelte に公開します。コンポーネントが公開されると、どのページでも使用できるようになります。

<script lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<div>
<Switch />
</div>

Available Layouts​

Svelte スターター キットには、「サイドバー」レイアウトと「ヘッダー」レイアウトという 2 つの異なる主なレイアウトから選択できます。サイドバー レイアウトがデフォルトですが、アプリケーションの resources/js/layouts/AppLayout.svelte ファイルの先頭にインポートされるレイアウトを変更することで、ヘッダー レイアウトに切り替えることができます。

import AppLayout from '@/layouts/app/AppSidebarLayout.svelte'; // [tl! remove]
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte'; // [tl! add]

Sidebar Variants​

サイドバーのレイアウトには、デフォルトのサイドバー バリアント、「インセット」バリアント、および「フローティング」バリアントの 3 つの異なるバリアントが含まれています。 resources/js/components/AppSidebar.svelte コンポーネントを変更することで、最も好みのバリアントを選択できます。

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

Authentication Page Layout Variants​

Svelte スターター キットに含まれる認証ページ (ログイン ページや登録ページなど) にも、「シンプル」、「カード」、「分割」の 3 つの異なるレイアウト バリアントが用意されています。

認証レイアウトを変更するには、アプリケーションの resources/js/layouts/AuthLayout.svelte ファイルの先頭にインポートされるレイアウトを変更します。

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte'; // [tl! remove]
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte'; // [tl! add]

Vue​

Vue スターター キットは、Inertia 3、Vue 3 Composition API、Tailwind、および shadcn-vue で構築されています。すべてのスターター キットと同様に、バックエンドとフロントエンドのコードはすべてアプリケーション内に存在し、完全なカスタマイズが可能です。

フロントエンド コードの大部分は、resources/js ディレクトリにあります。コードを自由に変更して、アプリケーションの外観と動作をカスタマイズできます。

resources/js/
├── components/ # Reusable Vue components
├── composables/ # Vue composables / hooks
├── layouts/ # Application layouts
├── lib/ # Utility functions and configuration
├── pages/ # Page components
└── types/ # TypeScript definitions

追加の shadcn-vue コンポーネントを公開するには、まず find the component you want to publish を実行します。次に、npx を使用してコンポーネントを公開します。

npx shadcn-vue@latest add switch

この例では、コマンドはスイッチ コンポーネントを resources/js/components/ui/Switch.vue に公開します。コンポーネントが公開されると、どのページでも使用できるようになります。

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
<div>
<Switch />
</div>
</template>

Available Layouts​

Vue スターター キットには、「サイドバー」レイアウトと「ヘッダー」レイアウトという 2 つの異なる主なレイアウトから選択できます。サイドバー レイアウトがデフォルトですが、アプリケーションの resources/js/layouts/AppLayout.vue ファイルの先頭にインポートされるレイアウトを変更することで、ヘッダー レイアウトに切り替えることができます。

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // [tl! remove]
import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; // [tl! add]

Sidebar Variants​

サイドバーのレイアウトには、デフォルトのサイドバー バリアント、「インセット」バリアント、および「フローティング」バリアントの 3 つの異なるバリアントが含まれています。 resources/js/components/AppSidebar.vue コンポーネントを変更することで、最も好みのバリアントを選択できます。

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

Authentication Page Layout Variants​

ログイン ページや登録ページなど、Vue スターター キットに含まれる認証ページにも、「シンプル」、「カード」、「分割」の 3 つの異なるレイアウト バリアントが提供されています。

認証レイアウトを変更するには、アプリケーションの resources/js/layouts/AuthLayout.vue ファイルの先頭にインポートされるレイアウトを変更します。

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; // [tl! remove]
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; // [tl! add]

Livewire​

当社の Livewire スターター キットは、Livewire 4、Tailwind、および Flux UI で構築されています。すべてのスターター キットと同様に、バックエンドとフロントエンドのコードはすべてアプリケーション内に存在し、完全なカスタマイズが可能です。

フロントエンド コードの大部分は、resources/views ディレクトリにあります。コードを自由に変更して、アプリケーションの外観と動作をカスタマイズできます。

resources/views
├── components # Reusable components
├── flux # Customized Flux components
├── layouts # Application layouts
├── pages # Livewire pages
├── partials # Reusable Blade partials
├── dashboard.blade.php # Authenticated user dashboard
├── welcome.blade.php # Guest user welcome page

Available Layouts​

Livewire スターター キットには、「サイドバー」レイアウトと「ヘッダー」レイアウトという 2 つの異なる主なレイアウトから選択できます。サイドバー レイアウトがデフォルトですが、アプリケーションの resources/views/layouts/app.blade.php ファイルで使用されるレイアウトを変更することで、ヘッダー レイアウトに切り替えることができます。さらに、メインの Flux コンポーネントに container 属性を追加する必要があります。

<x-layouts::app.header>
<flux:main container>
{{ $slot }}
</flux:main>
</x-layouts::app.header>

Authentication Page Layout Variants​

Livewire スターター キットに含まれる認証ページ (ログイン ページや登録ページなど) にも、「シンプル」、「カード」、「分割」という 3 つの異なるレイアウト バリアントが用意されています。

認証レイアウトを変更するには、アプリケーションの resources/views/layouts/auth.blade.php ファイルで使用されるレイアウトを変更します。

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

Authentication​

すべてのスターター キットは、Laravel Fortify を使用して認証を処理します。 Fortify は、ログイン、登録、パスワードのリセット、電子メール検証などのためのルート、コントローラ、ロジックを提供します。

Fortify は、アプリケーションの config/fortify.php 構成ファイルで有効になっている機能に基づいて、次の認証ルートを自動的に登録します。

ルート方法説明
/loginGETログインフォームを表示する
/loginPOSTユーザーを認証する
/logoutPOSTユーザーをログアウトする
/registerGET登録フォームを表示する
/registerPOST新しいユーザーを作成する
/forgot-passwordGETパスワードリセットリクエストフォームを表示する
/forgot-passwordPOSTパスワードリセットリンクを送信する
/reset-password/{token}GETパスワードリセットフォームを表示する
/reset-passwordPOSTパスワードを更新する
/email/verifyGETメール認証通知を表示する
/email/verify/{id}/{hash}GETメールアドレスを確認してください
/email/verification-notificationPOST確認メールを再送信する
/user/confirm-passwordGETパスワード確認フォームを表示する
/user/confirm-passwordPOSTパスワードを認証する
/two-factor-challengeGET2FA チャレンジフォームを表示する
/two-factor-challengePOST2FA コードを検証する

php artisan route:list Artisan コマンドを使用すると、アプリケーション内のすべてのルートを表示できます。

Enabling and Disabling Features​

どの Fortify 機能を有効にするかは、アプリケーションの config/fortify.php 構成ファイルで制御できます。

use Laravel\Fortify\Features;

'features' => [
Features::registration(),
Features::resetPasswords(),
Features::emailVerification(),
Features::twoFactorAuthentication([
'confirm' => true,
'confirmPassword' => true,
]),
],

機能を無効にするには、その機能エントリを features 配列からコメント アウトするか削除します。たとえば、パブリック登録を無効にするには、Features::registration() を削除します。

React、Svelte、または Vue スターター キットを使用する場合は、フロントエンド コード内の無効な機能のルートへの参照も削除する必要があります。たとえば、電子メール検証を無効にする場合は、React、Svelte、または Vue コンポーネント内の verification ルートへのインポートと参照を削除する必要があります。これらのスターター キットは、ビルド時にルート定義を生成するタイプ セーフ ルーティングに Wayfinder を使用するため、これが必要です。存在しないルートを参照すると、アプリケーションのビルドは失敗します。

Customizing User Creation and Password Reset​

ユーザーがパスワードを登録またはリセットすると、Fortify はアプリケーションの app/Actions/Fortify ディレクトリにあるアクション クラスを呼び出します。

ファイル説明
CreateNewUser.php新しいユーザーを検証して作成します
ResetUserPassword.phpユーザーのパスワードを検証して更新します
PasswordValidationRules.phpパスワード検証ルールを定義します

たとえば、アプリケーションの登録ロジックをカスタマイズするには、CreateNewUser アクションを編集する必要があります。

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'], // [tl! add]
'password' => $this->passwordRules(),
])->validate();

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

Two-Factor Authentication​

スターター キットには 2 要素認証 (2FA) が組み込まれており、ユーザーは TOTP 互換の認証アプリを使用してアカウントを保護できます。 2FA は、アプリケーションの config/fortify.php 構成ファイルの Features::twoFactorAuthentication() によってデフォルトで有効になります。

confirm オプションでは、2FA を完全に有効にする前にユーザーがコードを検証する必要がありますが、confirmPassword では、2FA を有効または無効にする前にパスワードの確認が必要です。詳細については、Fortify's two-factor authentication documentation を参照してください。

Rate Limiting​

レート制限により、ブルートフォース攻撃やログイン試行の繰り返しによって認証エンドポイントに負荷がかかるのを防ぎます。 Fortify のレート制限動作は、アプリケーションの FortifyServiceProvider でカスタマイズできます。

use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Cache\RateLimiting\Limit;

RateLimiter::for('login', function ($request) {
return Limit::perMinute(5)->by($request->email.$request->ip());
});

Teams​

React、Svelte、Vue、および Livewire スターター キットは、チーム サポートによって生成することもできます。チーム機能が有効になっている場合、各ユーザーは 1 つ以上のチームに属し、現在のチームを持ちます。登録中に、新規ユーザーには自動的に個人チームが与えられます。スターター キットには、チームの作成、チーム間の切り替え、メンバーの招待、チームの詳細の更新を行うためのチーム管理画面も含まれています。

ルートのスコープが現在のチームに設定されている場合、現在のチームのスラッグが URL に含まれます。たとえば、ダッシュボードのルートは /{current_team}/dashboard になりますが、チーム管理ページでは settings/teams/{team} などのルートが使用されます。 {current_team} および {team} ルート パラメーターを使用する場合、スターター キットは、ルートへのアクセスを許可する前に、認証されたユーザーが要求されたチームに属していることを自動的に確認します。

チーム対応 URL の生成をより便利にするために、スターター キットは認証されたユーザーの現在のチームの URL デフォルトを登録します。これにより、route('dashboard') などのヘルパの呼び出しに現在のチームのスラッグを自動的に含めることができます。ユーザーがサインイン、登録、またはチームの切り替えを行うと、スターター キットによって現在のチームが更新され、これらの URL デフォルトが更新されるため、生成されたリンクは引き続き正しいチーム コンテキストを使用します。

スターター キットは、チームを作成または名前変更するときに、安全でないルート セグメントや競合するルート セグメントを生成する可能性のある予約名をユーザーが選択することも防止します。たとえば、settings、login、dashboard などのルート プレフィックスと衝突する名前は使用できません。

WorkOS AuthKit Authentication​

デフォルトでは、React、Svelte、Vue、Livewire スターター キットはすべて、Laravel の組み込み認証システムを利用して、ログイン、登録、パスワードリセット、電子メール検証などを提供します。さらに、以下を提供する各スターター キットの WorkOS AuthKit パワード バリアントも提供しています。

  • ソーシャル認証 (Google、Microsoft、GitHub、Apple)
  • パスキー認証
  • メールベースの「Magic Auth」
  • SSO

WorkOS を認証プロバイダ requires a WorkOS account として使用します。 WorkOS は、月間アクティブ ユーザー 100 万人までのアプリケーションに対して無料の認証を提供します。

WorkOS AuthKit をアプリケーションの認証プロバイダとして使用するには、laravel new 経由で新しいスターター キットを利用したアプリケーションを作成するときに、WorkOS オプションを選択します。

Configuring Your WorkOS Starter Kit​

WorkOS 搭載スターター キットを使用して新しいアプリケーションを作成した後、アプリケーションの .env ファイルに WORKOS_CLIENT_ID、WORKOS_API_KEY、および WORKOS_REDIRECT_URL 環境変数を設定する必要があります。これらの変数は、アプリケーションの WorkOS ダッシュボードで提供される値と一致する必要があります。

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

さらに、WorkOS ダッシュボードでアプリケーションのホームページ URL を構成する必要があります。この URL は、ユーザーがアプリケーションからログアウトした後にリダイレクトされる場所です。

Configuring AuthKit Authentication Methods​

WorkOS を利用したスターター キットを使用する場合は、アプリケーションの WorkOS AuthKit 構成設定内で「電子メール + パスワード」認証を無効にし、ユーザーがソーシャル認証プロバイダ、パスキー、「Magic Auth」、および SSO を介してのみ認証できるようにすることをお勧めします。これにより、アプリケーションはユーザー パスワードの処理を完全に回避できます。

Configuring AuthKit Session Timeouts​

さらに、Laravel アプリケーションに設定されているセッション タイムアウトしきい値 (通常は 2 時間) と一致するように、WorkOS AuthKit セッションの非アクティブ タイムアウトを設定することをお勧めします。

Inertia SSR​

React、Svelte、および Vue スターター キットは、Inertia の server-side rendering 機能と互換性があります。アプリケーション用の Inertia SSR 互換バンドルを構築するには、build:ssr コマンドを実行します。

npm run build:ssr

便宜上、composer dev:ssr コマンドも使用できます。このコマンドは、アプリケーション用の SSR 互換バンドルを構築した後、Laravel 開発サーバーと Inertia SSR サーバーを起動し、Inertia のサーバー側レンダリング エンジンを使用してアプリケーションをローカルでテストできるようにします。

composer dev:ssr

Community Maintained Starter Kits​

Laravel インストーラーを使用して新しい Laravel アプリケーションを作成する場合、Packagist で入手可能なコミュニティが管理するスターター キットを --using フラグに提供できます。

laravel new my-app --using=example/starter-kit

Creating Starter Kits​

スターター キットを他の人が確実に利用できるようにするには、Packagist に公開する必要があります。スターター キットは、.env.example ファイルで必要な環境変数を定義する必要があり、必要なインストール後のコマンドはスターター キットの composer.json ファイルの post-create-project-cmd 配列にリストされている必要があります。

Frequently Asked Questions​

How do I upgrade?​

すべてのスターター キットは、次のアプリケーションへの確実な出発点となります。コードの完全な所有権があれば、思い描いたとおりにアプリケーションを調整、カスタマイズ、構築できます。ただし、スターター キット自体をアップデートする必要はありません。

How do I enable email verification?​

電子メール検証を追加するには、App/Models/User.php モデル内の MustVerifyEmail インポートのコメントを解除し、モデルが MustVerifyEmail インターフェイスを実装していることを確認します。

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
// ...

class User extends Authenticatable implements MustVerifyEmail
{
// ...
}

登録後、ユーザーは確認メールを受け取ります。ユーザーの電子メール アドレスが確認されるまで特定のルートへのアクセスを制限するには、verified ミドルウェアをルートに追加します。

Route::middleware(['auth', 'verified'])->group(function () {
Route::get('dashboard', function () {
return Inertia::render('dashboard');
})->name('dashboard');
});

スターター キットの WorkOS バリアントを使用する場合、電子メール検証は必要ありません。

How do I modify the default email template?​

デフォルトの電子メール テンプレートをカスタマイズして、アプリケーションのブランドに合わせることもできます。このテンプレートを変更するには、次のコマンドを使用して電子メール ビューをアプリケーションに公開する必要があります。

php artisan vendor:publish --tag=laravel-mail

これにより、resources/views/vendor/mail にいくつかのファイルが生成されます。これらのファイルと resources/views/vendor/mail/themes/default.css ファイルを変更して、デフォルトの電子メール テンプレートの外観を変更できます。