コンテンツへスキップ

スターターキット

イントロダクション

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

これらのスターターキットをご自由にお使いいただけますが、必須ではありません。Laravelの新しいコピーをインストールするだけで、自由にアプリケーションをゼロから構築できます。どちらの方法でも、きっと素晴らしいものが出来上がるでしょう！

スターターキットを使用したアプリケーションの作成

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

1composer global require laravel/installer

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

1laravel new my-app

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

1cd my-app
2npm install && npm run build
3composer run dev

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

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

React

Reactスターターキットは、Inertiaを使用してReactフロントエンドを備えたLaravelアプリケーションを構築するための、堅牢でモダンな出発点を提供します。

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

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

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やVueのようなJavaScript駆動のSPAフレームワークに代わる、よりシンプルなものを探しているチームに最適です。

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

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

React

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

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

1resources/js/
2├── components/    # Reusable React components
3├── hooks/         # React hooks
4├── layouts/       # Application layouts
5├── lib/           # Utility functions and configuration
6├── pages/         # Page components
7└── types/         # TypeScript definitions

追加のshadcnコンポーネントを公開するには、まず公開したいコンポーネントを見つけます。次に、npxを使用してコンポーネントを公開します。

1npx shadcn@latest add switch

この例では、コマンドはSwitchコンポーネントをresources/js/components/ui/switch.tsxに公開します。コンポーネントが公開されたら、どのページでも使用できます。

 1import { Switch } from "@/components/ui/switch"
 2 
 3const MyPage = () => {
 4  return (
 5    <div>
 6      <Switch />
 7    </div>
 8  );
 9};
10 
11export default MyPage;

利用可能なレイアウト

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

1import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; 
2import AppLayoutTemplate from '@/layouts/app/app-header-layout';

サイドバーのバリエーション

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

1<Sidebar collapsible="icon" variant="sidebar"> 
2<Sidebar collapsible="icon" variant="inset">

認証ページレイアウトのバリエーション

Reactスターターキットに含まれるログインページや登録ページなどの認証ページには、「simple」、「card」、「split」の3つの異なるレイアウトバリエーションも用意されています。

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

1import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; 
2import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Vue

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

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

1resources/js/
2├── components/    # Reusable Vue components
3├── composables/   # Vue composables / hooks
4├── layouts/       # Application layouts
5├── lib/           # Utility functions and configuration
6├── pages/         # Page components
7└── types/         # TypeScript definitions

追加のshadcn-vueコンポーネントを公開するには、まず公開したいコンポーネントを見つけます。次に、npxを使用してコンポーネントを公開します。

1npx shadcn-vue@latest add switch

この例では、コマンドはSwitchコンポーネントをresources/js/components/ui/Switch.vueに公開します。コンポーネントが公開されたら、どのページでも使用できます。

1<script setup lang="ts">
2import { Switch } from '@/Components/ui/switch'
3</script>
4 
5<template>
6    <div>
7        <Switch />
8    </div>
9</template>

利用可能なレイアウト

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

1import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; 
2import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

サイドバーのバリエーション

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

1<Sidebar collapsible="icon" variant="sidebar"> 
2<Sidebar collapsible="icon" variant="inset">

認証ページレイアウトのバリエーション

Vueスターターキットに含まれるログインページや登録ページなどの認証ページには、「simple」、「card」、「split」の3つの異なるレイアウトバリエーションも用意されています。

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

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

Livewire

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

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

1resources/views
2├── components            # Reusable Livewire components
3├── flux                  # Customized Flux components
4├── livewire              # Livewire pages
5├── partials              # Reusable Blade partials
6├── dashboard.blade.php   # Authenticated user dashboard
7├── welcome.blade.php     # Guest user welcome page

利用可能なレイアウト

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

1<x-layouts.app.header>
2    <flux:main container>
3        {{ $slot }}
4    </flux:main>
5</x-layouts.app.header>

認証ページレイアウトのバリエーション

Livewireスターターキットに含まれるログインページや登録ページなどの認証ページには、「simple」、「card」、「split」の3つの異なるレイアウトバリエーションも用意されています。

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

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

WorkOS AuthKit認証

デフォルトでは、React、Vue、およびLivewireスターターキットはすべて、Laravelの組み込み認証システムを利用して、ログイン、登録、パスワードリセット、メール検証などを提供します。さらに、WorkOS AuthKitを利用した各スターターキットのバリエーションも提供しており、以下のような機能を提供します。

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

認証プロバイダーとしてWorkOSを使用するには、WorkOSアカウントが必要です。WorkOSは、月間アクティブユーザー数が100万人までのアプリケーションに対して無料の認証を提供しています。

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

WorkOSスターターキットの設定

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

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

AuthKit認証メソッドの設定

WorkOSベースのスターターキットを使用する場合、アプリケーションのWorkOS AuthKit設定で「メールアドレス＋パスワード」認証を無効にすることをお勧めします。これにより、ユーザーはソーシャル認証プロバイダー、パスキー、「Magic Auth」、およびSSOを介してのみ認証できるようになります。これにより、アプリケーションはユーザーのパスワードを完全に扱わなくて済みます。

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

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

よくある質問

アップグレード方法は？

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

メール認証を有効にするには？

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

 1<?php
 2 
 3namespace App\Models;
 4 
 5use Illuminate\Contracts\Auth\MustVerifyEmail;
 6// ...
 7 
 8class User extends Authenticatable implements MustVerifyEmail
 9{
10    // ...
11}

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

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

WorkOSバリアントのスターターキットを使用する場合、メール認証は不要です。

デフォルトのメールテンプレートを変更するには？

デフォルトのメールテンプレートを、アプリケーションのブランディングに合わせてカスタマイズしたい場合があるでしょう。このテンプレートを変更するには、次のコマンドでメールビューをアプリケーションに公開する必要があります。

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

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

Laravelは最も生産的な方法です
ソフトウェアを構築、デプロイ、監視します。

製品

パッケージ

リソース