Laravel 12.x スターターキット

イントロダクションIntroduction

新しいLaravelアプリケーションの構築を開始できるように、アプリケーションスターターキットを提供いたします。このスターターキットは、次にLaravelアプリケーションを構築する口火を切るためのもので、アプリケーションのユーザー登録と認証に必要なルート、コントローラ、ビューを含んでいます。To give you a head start building your new Laravel application, we are happy to offer application starter kits[https://laravel.com/starter-kits]. These starter kits give you a head start on building your next Laravel application, and include the routes, controllers, and views you need to register and authenticate your application's users.

皆さんがこのスターターキットを使用してくれるのは大歓迎ですが、これは必須でありません。Laravelの真新しいコピーをインストールするだけで、自分自身のアプリケーションを自由にゼロから構築できます。いずれにせよ、みなさんが素晴らしいものを作り上げるのはわかっています！While you are welcome to use these starter kits, they are not required. You are free to build your own application from the ground up by simply installing a fresh copy of Laravel. Either way, we know you will build something great!

スターターキットを使ったアプリケーションの作成Creating an Application Using a Starter Kit

スターターキットを使用して新しいLaravelアプリケーションを作成するには、まずPHPとLaravel CLIツールをインストールしてください。すでにPHPとComposerがインストールされている場合は、Composer経由でLaravelインストーラCLIツールをインストールしてください。To create a new Laravel application using one of our starter kits, you should first install PHP and the Laravel CLI tool[/docs/{{version}}/installation#installing-php]. If you already have PHP and Composer installed, you may install the Laravel installer CLI tool via Composer:

composer global require laravel/installer

次に、LaravelインストーラCLIを使用して、新しいLaravelアプリケーションを作成します。Laravelインストーラは、希望するスターターキットを選択するよう促します。Then, create a new Laravel application using the Laravel installer CLI. The Laravel installer will prompt you to select your preferred starter kit:

laravel new my-app

Laravelアプリケーションを作成したら、NPM経由でフロントエンドの依存関係パッケージをインストールし、Laravel開発サーバを起動するだけです。After creating your Laravel application, you only need to install its frontend dependencies via NPM and start the Laravel development server:

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

Laravel開発サーバを起動すると、ウェブブラウザでhttp://localhost:8000からアプリケーションへアクセスできるようになります。Once you have started the Laravel development server, your application will be accessible in your web browser at http://localhost:8000[http://localhost:8000].

利用可能なスターターキットAvailable Starter Kits

ReactReact

私達のReactスターターキットは、Inertiaを使用してReactフロントエンドで、Laravelアプリケーションを構築するための堅牢でモダンな出発点を提供します。Our React starter kit provides a robust, modern starting point for building Laravel applications with a React frontend using Inertia[https://inertiajs.com].

Inertiaを使用すると、古典的なサーバサイドのルーティングとコントローラを使用して、モダンなシングルページのReactアプリケーションを構築できます。これにより、Reactのフロントエンドのパワーと、Laravelの驚異的なバックエンドの生産性、そして電光石火のViteコンパイルを組み合わせることができます。Inertia allows you to build modern, single-page React applications using classic server-side routing and controllers. This lets you enjoy the frontend power of React combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation.

Reactスターターキットは、React19、TypeScript、Tailwind、shadcn/uiコンポーネントライブラリを使用しています。The React starter kit utilizes React 19, TypeScript, Tailwind, and the shadcn/ui[https://ui.shadcn.com] component library.

VueVue

私達のVueスターターキットは、Inertiaを使用してVueフロントエンドで、Laravelアプリケーションを構築するための素晴らしい出発点を提供します。Our Vue starter kit provides a great starting point for building Laravel applications with a Vue frontend using Inertia[https://inertiajs.com].

Inertiaを使用すると、古典的なサーバサイドのルーティングとコントローラを使用して、モダンなシングルページのVueアプリケーションを構築できます。これにより、Vueのフロントエンドのパワーと、Laravelの驚異的なバックエンドの生産性、そして電光石火のViteコンパイルを組み合わせることができます。Inertia allows you to build modern, single-page Vue applications using classic server-side routing and controllers. This lets you enjoy the frontend power of Vue combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation.

Vueスターターキットは、Vue Composition API、TypeScript、Tailwind、shadcn-vueコンポーネントライブラリを利用しています。The Vue starter kit utilizes the Vue Composition API, TypeScript, Tailwind, and the shadcn-vue[https://www.shadcn-vue.com/] component library.

LivewireLivewire

私たちのLivewireスターターキットは、Laravel Livewire（和訳）フロントエンドでLaravelアプリケーションを構築するための完璧な出発点を提供します。Our Livewire starter kit provides the perfect starting point for building Laravel applications with a Laravel Livewire[https://livewire.laravel.com] frontend.

Livewireは、PHPだけでダイナミックでリアクティブなフロントエンドUIを構築するパワフルな手法です。主にBladeテンプレートを使用し、ReactやVueのようなJavaScript駆動のSPAフレームワークのシンプルな代替を探しているチームに最適です。Livewire is a powerful way of building dynamic, reactive, frontend UIs using just PHP. It's a great fit for teams that primarily use Blade templates and are looking for a simpler alternative to JavaScript-driven SPA frameworks like React and Vue.

Livewireスターターキットは、Livewire、Tailwind、Flux UIコンポーネントライブラリを利用しています。The Livewire starter kit utilizes Livewire, Tailwind, and the Flux UI[https://fluxui.dev] component library.

スターターキットのカスタマイズStarter Kit Customization

ReactReact

Reactスターターキットは、Inertia2、React19、Tailwind4、およびshadcn/uiで構築しています。すべてのスターターキットと同様に、バックエンドとフロントエンドのコードはすべてアプリケーション内に存在し、フルカスタマイズが可能です。Our React starter kit is built with Inertia 2, React 19, Tailwind 4, and shadcn/ui[https://ui.shadcn.com]. As with all of our starter kits, all of the backend and frontend code exists within your application to allow for full customization.

フロントエンドのコードの大部分は、resources/jsディレクトリにあります。アプリケーションの外観や動作をカスタマイズするために、自由にコードを変更できます。The majority of the frontend code is located in the resources/js directory. You are free to modify any of the code to customize the appearance and behavior of your application:

resources/js/
├── components/    # 再利用可能なReactコンポーネント
├── hooks/         # Reactのフック
├── layouts/       # アプリケーションのレイアウト
├── lib/           # ユーティリティ機能と設定
├── pages/         # ページコンポーネント
└── types/         # TypeScript定義

追加のshadcnコンポーネントをリソース公開するには、まず公開したいコンポーネントを探してください。次に、npxを使用してコンポーネントを公開します。To publish additional shadcn components, first find the component you want to publish[https://ui.shadcn.com]. Then, publish the component using npx:

npx shadcn@latest add switch

この例のコマンドは、Switchコンポーネントをresources/js/components/ui/switch.tsxへリソース公開します。コンポーネントを公開したら、どのページでも使用できます。In this example, the command will publish the Switch component to resources/js/components/ui/switch.tsx. Once the component has been published, you can use it in any of your pages:

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

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

export default MyPage;

利用可能なレイアウトAvailable Layouts

Reactスターターキットには、「サイドバー」レイアウトと「ヘッダ」レイアウトの２つの異なる主要レイアウトを用意してあり、選択できます。デフォルトはサイドバーレイアウトですが、アプリケーションのresources/js/layouts/app-layout.tsxファイルの一番上にインポートしているレイアウトを変更すれば、ヘッダレイアウトへ切り替えられます。The React starter kit includes two different primary layouts for you to choose from: a "sidebar" layout and a "header" layout. The sidebar layout is the default, but you can switch to the header layout by modifying the layout that is imported at the top of your application's resources/js/layouts/app-layout.tsx file:

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

サイドバー別型Sidebar Variants

サイドバーレイアウトには３つの異なる別型があります。デフォルトのサイドバー別型、「inset」別型、「floating」別型です。resources/js/components/app-sidebar.tsxコンポーネントを修正し、一番好きなレイアウトを選択してください。The sidebar layout includes three different variants: the default sidebar variant, the "inset" variant, and the "floating" variant. You may choose the variant you like best by modifying the resources/js/components/app-sidebar.tsx component:

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

認証ページレイアウト別型Authentication Page Layout Variants

Reactスターターキットに含まれている、ログインページや登録ページなどの認証ページには、３種類のレイアウトバリエーションがあります。「simple」、「card」、「split」です。The authentication pages included with the React starter kit, such as the login page and registration page, also offer three different layout variants: "simple", "card", and "split".

認証レイアウトを変更するには、アプリケーションのresources/js/layouts/auth-layout.tsxファイルの先頭にインポートしているレイアウトを変更します。To change your authentication layout, modify the layout that is imported at the top of your application's resources/js/layouts/auth-layout.tsx file:

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

VueVue

Vueスターターキットは、Inertia2、Vue3 Composition API、Tailwind、およびshadcn-vueを使用して構築しています。他のスターターキットと同様に、バックエンドとフロントエンドのコードはすべてアプリケーション内に存在し、フルカスタマイズ可能です。Our Vue starter kit is built with Inertia 2, Vue 3 Composition API, Tailwind, and shadcn-vue[https://www.shadcn-vue.com/]. As with all of our starter kits, all of the backend and frontend code exists within your application to allow for full customization.

フロントエンドのコードの大部分は、resources/jsディレクトリにあります。アプリケーションの外観や動作をカスタマイズするため、自由にコードを変更してください。The majority of the frontend code is located in the resources/js directory. You are free to modify any of the code to customize the appearance and behavior of your application:

resources/js/
├── components/    # 再利用可能なVueコンポーネント
├── composables/   # Vueコンポーネント／フック
├── layouts/       # アプリケーションレイアウト
├── lib/           # ユーティリティ機能と設定
├── pages/         # ページコンポーネント
└── types/         # TypeScript定義

追加のshadcnコンポーネントをリソース公開するには、まず公開したいコンポーネントを探してください。次に、npxを使用してコンポーネントを公開します。To publish additional shadcn-vue components, first find the component you want to publish[https://www.shadcn-vue.com]. Then, publish the component using npx:

npx shadcn-vue@latest add switch

この例のコマンドは、Switchコンポーネントをresources/js/components/ui/switch.tsxへリソース公開します。コンポーネントを公開したら、どのページでも使用できます。In this example, the command will publish the Switch component to resources/js/components/ui/Switch.vue. Once the component has been published, you can use it in any of your pages:

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

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

利用可能なレイアウトAvailable Layouts

Reactスターターキットには、「サイドバー」レイアウトと「ヘッダ」レイアウトの２つの異なる主要レイアウトを用意してあり、選択できます。デフォルトはサイドバーレイアウトですが、アプリケーションのresources/js/layouts/AppLayout.vueファイルの一番上にインポートしているレイアウトを変更すれば、ヘッダレイアウトへ切り替えられます。The Vue starter kit includes two different primary layouts for you to choose from: a "sidebar" layout and a "header" layout. The sidebar layout is the default, but you can switch to the header layout by modifying the layout that is imported at the top of your application's resources/js/layouts/AppLayout.vue file:

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

サイドバー別型Sidebar Variants

サイドバーレイアウトには３つの異なる別型があります。デフォルトのサイドバー別型、「inset」別型、「floating」別型です。resources/js/components/AppSidebar.vueコンポーネントを修正し、一番好きなレイアウトを選択してください。The sidebar layout includes three different variants: the default sidebar variant, the "inset" variant, and the "floating" variant. You may choose the variant you like best by modifying the resources/js/components/AppSidebar.vue component:

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

認証ページレイアウト別型Authentication Page Layout Variants

Vueスターターキットに含まれている、ログインページや登録ページなどの認証ページには、３種類のレイアウトバリエーションがあります。「simple」、「card」、「split」です。The authentication pages included with the Vue starter kit, such as the login page and registration page, also offer three different layout variants: "simple", "card", and "split".

認証レイアウトを変更するには、アプリケーションのresources/js/layouts/AuthLayout.tsxファイルの先頭にインポートしているレイアウトを変更します。To change your authentication layout, modify the layout that is imported at the top of your application's resources/js/layouts/AuthLayout.vue file:

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

LivewireLivewire

Livewireスターターキットは、Livewire3、Laravel Volt、Tailwind、Flux UIで構築されています。他のスターターキットと同様に、バックエンドとフロントエンドのコードはすべてアプリケーション内に存在し、フルカスタマイズが可能です。Our Livewire starter kit is built with Livewire 3, Tailwind, and Flux UI[https://fluxui.dev/]. As with all of our starter kits, all of the backend and frontend code exists within your application to allow for full customization.

LivewireとVoltLivewire and Volt

フロントエンドのコードの大部分は、resources/jsディレクトリにあります。アプリケーションの外観や動作をカスタマイズするために、自由にコードを変更できます。The majority of the frontend code is located in the resources/views directory. You are free to modify any of the code to customize the appearance and behavior of your application:

resources/views
├── components            # 再利用可能なLivewireコンポーネント
├── flux                  # カスタマイズ済みFluxコンポーネント
├── livewire              # Livewireページ
├── partials              # 再利用可能なBladeの部分ファイル
├── dashboard.blade.php   # 認証済みユーザーのダッシュボード
├── welcome.blade.php     # ゲストユーザーのウエルカムページ

旧来のLivewireコンポーネントTraditional Livewire Components

フロントエンドのコードはresouces/viewsディレクトリにあり、app/LivewireディレクトリにはLivewireコンポーネントと対応するバックエンドロジックを置きます。The frontend code is located in the resouces/views directory, while the app/Livewire directory contains the corresponding backend logic for the Livewire components.

利用可能なレイアウトAvailable Layouts

Livewireスターターキットには、「サイドバー」レイアウトと「ヘッダ」レイアウトの２つの異なる主要レイアウトを用意してあり、選択できます。デフォルトはサイドバーレイアウトですが、アプリケーションのresources/js/layouts/app.blade.phpファイルのレイアウトを変更すれば、ヘッダレイアウトへ切り替えられます。The Livewire starter kit includes two different primary layouts for you to choose from: a "sidebar" layout and a "header" layout. The sidebar layout is the default, but you can switch to the header layout by modifying the layout that is used by your application's resources/views/components/layouts/app.blade.php file. In addition, you should add the container attribute to the main Flux component:

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

認証ページレイアウト別型Authentication Page Layout Variants

Livewireスターターキットに含まれている、ログインページや登録ページなどの認証ページには、３種類のレイアウトバリエーションがあります。「simple」、「card」、「split」です。The authentication pages included with the Livewire starter kit, such as the login page and registration page, also offer three different layout variants: "simple", "card", and "split".

認証レイアウトを変更するには、アプリケーションのresources/js/layouts/auth.blade.phpファイルで使用しているレイアウトを変更します。To change your authentication layout, modify the layout that is used by your application's resources/views/components/layouts/auth.blade.php file:

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

WorkOS AuthKit認証WorkOS AuthKit Authentication

デフォルトでは、React、Vue、Livewireのスターターキットはすべて、Laravelの組み込み認証システムを利用し、ログイン、登録、パスワードリセット、メール認証などを提供します。それに加え、各スターターキット向きに、WorkOS AuthKit搭載バージョンも提供しています。By default, the React, Vue, and Livewire starter kits all utilize Laravel's built-in authentication system to offer login, registration, password reset, email verification, and more. In addition, we also offer a WorkOS AuthKit[https://authkit.com] powered variant of each starter kit that offers:

認証プロバイダーとしてWorkOSを使用するには、WorkOSアカウントが必要です。WorkOSは、月間アクティブユーザー数１００万人までのアプリケーションに無料で認証を提供しています。Using WorkOS as your authentication provider requires a WorkOS account[https://workos.com]. WorkOS offers free authentication for applications up to 1 million monthly active users.

アプリケーションの認証プロバイダとしてWorkOS AuthKitを使用するには、laravel new経由で新しいスターターキット搭載アプリケーションを作成する際に、WorkOSオプションを選択します。To use WorkOS AuthKit as your application's authentication provider, select the WorkOS option when creating your new starter kit powered application via laravel new.

WorkOSスターターキットの設定Configuring Your WorkOS Starter Kit

WorkOSを使用するスターターキットで新しいアプリケーションを作成したら、アプリケーションの.envファイルへ、WORKOS_CLIENT_ID、WORKOS_API_KEY、WORKOS_REDIRECT_URL 環境変数を設定する必要があります。これらの変数はあなたのアプリケーション用に、WorkOSダッシュボードが提供した値と一致する必要があります。After creating a new application using a WorkOS powered starter kit, you should set the WORKOS_CLIENT_ID, WORKOS_API_KEY, and WORKOS_REDIRECT_URL environment variables in your application's .env file. These variables should match the values provided to you in the WorkOS dashboard for your application:

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

AuthKit認証メソッドの設定Configuring AuthKit Authentication Methods

WorkOS利用のスターターキットを使用する場合、アプリケーションのWorkOS AuthKit設定で「電子メール+パスワード」認証を無効にし、ユーザーがソーシャル認証プロバイダー、パスキー、「Magic Auth」、SSO経由でのみ認証できるようにすることをお勧めします。これにより、アプリケーションはユーザーパスワードの処理を完全に避けることができます。When using a WorkOS powered starter kit, we recommend that you disable "Email + Password" authentication within your application's WorkOS AuthKit configuration settings, allowing users to only authenticate via social authentication providers, passkeys, "Magic Auth", and SSO. This allows your application to totally avoid handling user passwords.

AuthKitセッションタイムアウトの設定Configuring AuthKit Session Timeouts

さらに、WorkOS AuthKitセッションの非アクティブタイムアウトをLaravelアプリケーションで設定しているセッションタイムアウトのしきい値（通常２時間）に合わせて設定することをお勧めします。In addition, we recommend that you configure your WorkOS AuthKit session inactivity timeout to match your Laravel application's configured session timeout threshold, which is typically two hours.

Inertia SSRInertia SSR

ReactとVueのスタータキットはInertiaのサーバサイドレンダリング機能と互換性があります。あなたのアプリケーション用にInertia SSR互換バンドルをビルドするには、build:ssrコマンドを実行します。The React and Vue starter kits are compatible with Inertia's server-side rendering[https://inertiajs.com/server-side-rendering] capabilities. To build an Inertia SSR compatible bundle for your application, run the build:ssr command:

npm run build:ssr

使いやすいように、composer dev:ssrコマンドも用意しています。このコマンドは、アプリケーションのSSR互換バンドルをビルドした後、Laravel開発サーバとInertia SSRサーバを起動し、Inertiaのサーバサイドレンダリングエンジンを使ってアプリケーションをローカルでテストできるようにします。For convenience, a composer dev:ssr command is also available. This command will start the Laravel development server and Inertia SSR server after building an SSR compatible bundle for your application, allowing you to test your application locally using Inertia's server-side rendering engine:

composer dev:ssr

コミュニティがコミュニティが保守するスターターキットCommunity Maintained Starter Kits

Laravelインストーラを使用して新しいLaravelアプリケーションを作成する場合、Packagistで利用可能なコミュニティが保守しているスターターキットを--usingフラグで指定できます。When creating a new Laravel application using the Laravel installer, you may provide any community maintained starter kit available on Packagist to the --using flag:

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

スターターキットの作成Creating Starter Kits

作成したスターターキットを他の人が利用できるようにするには、Packagistで公開する必要があります。スターターキットは、.env.exampleファイルで必要な環境変数を定義し、インストール後に必要なコマンドはスターターキットのcomposer.jsonファイルのpost-create-project-cmd配列に記述します。To ensure your starter kit is available to others, you will need to publish it to Packagist[https://packagist.org]. Your starter kit should define its required environment variables in its .env.example file, and any necessary post-installation commands should be listed in the post-create-project-cmd array of the starter kit's composer.json file.

良くある質問Frequently Asked Questions

どうやってアップグレードするのですか？How do I upgrade?

どのスターターキットも、次のアプリケーションのための確かな出発点を与えてくれます。コードを完全に把握し、微調整やカスタマイズを行い、思い描いたとおりにアプリケーションを構築できます。ただし、スターターキット自体を更新する必要はありません。Every starter kit gives you a solid starting point for your next application. With full ownership of the code, you can tweak, customize, and build your application exactly as you envision. However, there is no need to update the starter kit itself.

メール認証を有効にするには？How do I enable email verification?

App/Models/User.phpモデルのMustVerifyEmailインポートのコメントを外し、モデルでMustVerifyEmailインターフェイスを実装すれば、メール認証を追加できます。Email verification can be added by uncommenting the MustVerifyEmail import in your App/Models/User.php model and ensuring the model implements the MustVerifyEmail interface:

<?php

namespace App\Models;

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

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

登録後、ユーザーは認証メールを受け取ります。ユーザーのメールアドレスが認証されるまで特定のルートへのアクセスを制限するには、ルートへverifiedミドルウェアを追加します。After registration, users will receive a verification email. To restrict access to certain routes until the user's email address is verified, add the verified middleware to the routes:

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

lightbulb Note: スターターキットのWorkOS版を使用する場合、電子メール認証は必須でありません。[!NOTE]Email verification is not required when using the WorkOS[#workos] variant of the starter kits.

メールテンプレートほどうやって変更するの？How do I modify the default email template?

デフォルトのメールテンプレートをカスタマイズして、アプリケーションのブランディングに合わせたい場合もあると思います。このテンプレートを変更するには、次のコマンドを使用してアプリケーションへメールビューをリソース公開する必要があります。You may want to customize the default email template to better align with your application's branding. To modify this template, you should publish the email views to your application with the following command:

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

これにより、resources/views/vendor/mailにいくつかファイルを生成します。これらのファイルやresources/views/vendor/mail/themes/default.cssファイルを変更すれば、デフォルトのメールテンプレートの外観を変更することができます。This will generate several files in resources/views/vendor/mail. You can modify any of these files as well as the resources/views/vendor/mail/themes/default.css file to change the look and appearance of the default email template.