スターターキット

スターターキットは、新しいアプリの「出だしの部分」を先に作っておいてくれる雛形です。利用者の登録とログインに必要なルート（URL と処理の結びつけ）、コントローラー、ビュー（画面の見た目を書いたファイル）が、はじめから入っています。ログインの部分には Laravel Fortify という部品が使われています。

使うかどうかは自由です。キットを使わず、新しい Laravel を入れて、ゼロから自分で作ることもできます。

スターターキットでアプリを作る#

まず、PHP と Laravel のコマンド（Laravel インストーラー）を入れます。PHP と Composer がすでにあるなら、Composer で Laravel インストーラーを入れられます。

composer global require laravel/installer

次に、Laravel インストーラーで新しいアプリを作ります。途中で、使いたいスターターキットを選ぶ質問が出ます。

laravel new my-app

作ったあとは、画面の部品を NPM（JavaScript の部品を入れる道具）で入れて、開発用サーバーを動かします。

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

サーバーが動いたら、ブラウザで http://localhost:8000 を開くとアプリが見えます。

選べるスターターキット#

React#

Inertia を使って、React で画面を作るアプリの出だしです。Inertia を使うと、ルーティングとコントローラーはいつもどおりサーバー側（Laravel）に書きながら、1ページで動く（シングルページの）React のアプリを作れます。React で作る画面、作りやすい Laravel の裏側、変換の速い Vite を、組み合わせて使えます。

Svelte#

Inertia を使って、Svelte で画面を作るアプリの出だしです。考え方は React のキットと同じで、Svelte の画面の力と、Laravel の裏側と、Vite を組み合わせられます。

Vue#

Inertia を使って、Vue で画面を作るアプリの出だしです。考え方は React のキットと同じです。

Livewire#

Laravel Livewire で画面を作るアプリの出だしです。Livewire は、PHP だけで、動きのある画面（状態が変わると表示も変わる画面）を作る方法です。Blade（Laravel のテンプレートの書き方）を中心に使うチームに向いています。React・Svelte・Vue のような JavaScript のフレームワークよりも、簡単な方法がほしいときに選びます。

スターターキットを自分の形に直す#

どのキットも、裏側と画面のコードがすべてアプリの中に入っています。だから、自由に直せます。

React を直す#

React のキットは、Inertia 3、React 19、Tailwind 4、shadcn/ui で作られています。画面のコードのほとんどは resources/js にあります。見た目も動きも、自由に変えられます。

resources/js/
├── components/    # 何度も使う React の部品
├── hooks/         # React のフック
├── layouts/       # アプリのレイアウト
├── lib/           # 便利な関数と設定
├── pages/         # ページの部品
└── types/         # TypeScript の型の定義

shadcn の部品を足したいときは、先に足したい部品を探し、npx で取り出します。

npx shadcn@latest add switch

この例では、Switch の部品が resources/js/components/ui/switch.tsx に取り出されます。取り出したあとは、どのページからでも使えます。

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

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

export default MyPage;

使えるレイアウト（React）#

主なレイアウトは、「サイドバー」と「ヘッダー」の2つです。既定はサイドバーです。ヘッダーに変えるには、resources/js/layouts/app-layout.tsx の先頭で読みこむレイアウトを変えます。

// 変える前（サイドバー）
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

// 変えたあと（ヘッダー）
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

サイドバーの種類（React）#

サイドバーのレイアウトには、3つの種類があります。既定の sidebar、inset、floating です。好きなものを、resources/js/components/app-sidebar.tsx の部品で選びます。

<Sidebar collapsible="icon" variant="sidebar">  ← 変える前
<Sidebar collapsible="icon" variant="inset">    ← 変えたあと

ログイン画面のレイアウトの種類（React）#

ログインや登録の画面にも、simple・card・split の3つのレイアウトがあります。変えるには、resources/js/layouts/auth-layout.tsx の先頭で読みこむレイアウトを変えます。

// 変える前（simple）
import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

// 変えたあと（split）
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Svelte を直す#

Svelte のキットは、Inertia 3、Svelte 5、Tailwind、shadcn-svelte で作られています。画面のコードのほとんどは resources/js にあります。

resources/js/
├── components/    # 何度も使う Svelte の部品
├── layouts/       # アプリのレイアウト
├── lib/           # 便利な関数・設定・Svelte のルーンのモジュール
├── pages/         # ページの部品
└── types/         # TypeScript の型の定義

shadcn-svelte の部品を足したいときは、先に足したい部品を探し、npx で取り出します。

npx shadcn-svelte@latest add switch

この例では、Switch の部品が resources/js/components/ui/switch/switch.svelte に取り出されます。

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

<div>
    <Switch />
</div>

使えるレイアウト（Svelte）#

React と同じく、「サイドバー」（既定）と「ヘッダー」があります。変えるには、resources/js/layouts/AppLayout.svelte の先頭で読みこむレイアウトを変えます。

// 変える前（サイドバー）
import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

// 変えたあと（ヘッダー）
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

サイドバーの種類（Svelte）#

sidebar（既定）・inset・floating の3つです。resources/js/components/AppSidebar.svelte で選びます。

<Sidebar collapsible="icon" variant="sidebar">  ← 変える前
<Sidebar collapsible="icon" variant="inset">    ← 変えたあと

ログイン画面のレイアウトの種類（Svelte）#

simple・card・split の3つです。resources/js/layouts/AuthLayout.svelte の先頭で読みこむレイアウトを変えます。

// 変える前（simple）
import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

// 変えたあと（split）
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

Vue を直す#

Vue のキットは、Inertia 3、Vue 3 の Composition API、Tailwind、shadcn-vue で作られています。画面のコードのほとんどは resources/js にあります。

resources/js/
├── components/    # 何度も使う Vue の部品
├── composables/   # Vue のコンポーザブル（フックにあたるもの）
├── layouts/       # アプリのレイアウト
├── lib/           # 便利な関数と設定
├── pages/         # ページの部品
└── types/         # TypeScript の型の定義

shadcn-vue の部品を足したいときは、先に足したい部品を探し、npx で取り出します。

npx shadcn-vue@latest add switch

この例では、Switch の部品が resources/js/components/ui/Switch.vue に取り出されます。

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

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

使えるレイアウト（Vue）#

「サイドバー」（既定）と「ヘッダー」があります。変えるには、resources/js/layouts/AppLayout.vue の先頭で読みこむレイアウトを変えます。

// 変える前（サイドバー）
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

// 変えたあと（ヘッダー）
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

サイドバーの種類（Vue）#

sidebar（既定）・inset・floating の3つです。resources/js/components/AppSidebar.vue で選びます。

<Sidebar collapsible="icon" variant="sidebar">  ← 変える前
<Sidebar collapsible="icon" variant="inset">    ← 変えたあと

ログイン画面のレイアウトの種類（Vue）#

simple・card・split の3つです。resources/js/layouts/AuthLayout.vue の先頭で読みこむレイアウトを変えます。

// 変える前（simple）
import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';

// 変えたあと（split）
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Livewire を直す#

Livewire のキットは、Livewire 4、Tailwind、Flux UI で作られています。画面のコードのほとんどは resources/views にあります。

resources/views
├── components            # 何度も使う部品
├── flux                  # 自分向けに直した Flux の部品
├── layouts               # アプリのレイアウト
├── pages                 # Livewire のページ
├── partials              # 何度も使う Blade の一部分
├── dashboard.blade.php   # ログインした人のダッシュボード
├── welcome.blade.php     # ログインしていない人のトップページ

使えるレイアウト（Livewire）#

「サイドバー」（既定）と「ヘッダー」があります。ヘッダーに変えるには、resources/views/layouts/app.blade.php で使うレイアウトを変えます。あわせて、Flux の main の部品に container という属性を付けます。

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

ログイン画面のレイアウトの種類（Livewire）#

simple・card・split の3つです。変えるには、resources/views/layouts/auth.blade.php で使うレイアウトを変えます。

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

認証（ログイン）のしくみ#

どのキットも、ログインまわりを Laravel Fortify に任せています。Fortify は、ログイン・登録・パスワードの再設定・メールアドレスの確認などの、ルート・コントローラー・処理を用意しています。

Fortify は、config/fortify.php で有効にしている機能に合わせて、次のルートを自動で登録します。

アプリにあるルートをすべて見たいときは、php artisan route:list を使います。

機能を入れたり外したりする#

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 のキットでは、止めた機能のルートを画面のコードから呼んでいる部分も、消す必要があります。たとえばメールアドレスの確認を止めたら、verification のルートを読みこんでいる部分を、React・Svelte・Vue の部品から消します。消す理由は、これらのキットが Wayfinder という道具を使っているからです。Wayfinder は、画面のコードからルートをまちがいなく呼べるように、変換（ビルド）のときにルートの定義を作ります。無くなったルートを呼んでいると、変換が失敗します。

利用者の登録とパスワード再設定を直す#

利用者が登録したりパスワードを再設定したりするとき、Fortify は app/Actions/Fortify にあるアクションのクラスを呼びます。

たとえば登録の処理を直したいときは、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'], // 足した行
        'password' => $this->passwordRules(),
    ])->validate();

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

2要素認証#

キットには、2要素認証（2FA。パスワードのほかに、もう1つの確認を加えること）が入っています。TOTP に対応した認証アプリ（時間でかわる数字を出すアプリ）で、利用者が自分のアカウントを守れます。config/fortify.php の Features::twoFactorAuthentication() で、はじめから有効です。

回数の制限#

回数の制限（レート制限）は、パスワードを何度も試して当てようとする攻撃（ブルートフォース）を防ぎます。ログインを何度も試されて、ログインの入口がいっぱいになるのも防ぎます。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());
});

チーム機能#

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 でログインする#

React・Svelte・Vue・Livewire のキットは、ふつうは Laravel に組みこまれた認証で、ログイン・登録・パスワードの再設定・メールアドレスの確認などをします。それとは別に、どのキットにも、WorkOS AuthKit という外のサービスを使うタイプがあります。こちらでは、次のものが使えます。

WorkOS を使うには、WorkOS のアカウントが必要です。公式ドキュメントによると、1か月に使う利用者が100万人までのアプリなら、認証は無料です。使いたいときは、laravel new で新しいアプリを作るときに、WorkOS の選択肢を選びます。

WorkOS のキットを設定する#

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 は、利用者がログアウトしたあとに移る場所です。

AuthKit の認証方法を設定する#

WorkOS のキットを使うなら、WorkOS AuthKit の設定で「メールとパスワード」の認証を無効にするのがおすすめです。ソーシャルログイン・パスキー・Magic Auth・SSO だけでログインさせれば、アプリで利用者のパスワードを一切扱わずに済みます。

AuthKit のセッションの時間切れを設定する#

また、WorkOS AuthKit の「何も操作しなくなってからセッションが切れるまでの時間」を、Laravel のアプリのセッションの時間切れの長さにそろえるのがおすすめです。Laravel の既定は、ふつう2時間です。

Inertia のサーバーサイドレンダリング#

React・Svelte・Vue のキットは、Inertia のサーバーサイドレンダリング（サーバーで先に画面を作ってから返す方法）に対応しています。サーバーサイドレンダリング用にファイルをまとめるには、build:ssr を動かします。

npm run build:ssr

便利な composer dev:ssr というコマンドもあります。サーバーサイドレンダリング用にファイルをまとめたあとで、Laravel の開発用サーバーと Inertia の SSR サーバー（サーバーサイドレンダリングをするサーバー）を両方立ち上げます。手元で、Inertia のサーバーサイドレンダリングを試せます。

composer dev:ssr

みんなが作ったスターターキット#

Laravel インストーラーで新しいアプリを作るときは、Packagist（PHP の部品の置き場）にある、コミュニティが作ったスターターキットも使えます。--using に名前を渡します。

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

自分でスターターキットを作る#

作ったキットを他の人が使えるようにするには、Packagist に公開します。キットが必要とする環境変数は .env.example に書き、インストールのあとに動かしたいコマンドは、キットの composer.json の post-create-project-cmd の配列に並べます。

よくある質問#

どうやってアップグレードするのか#

どのキットも、次のアプリの出だしになるしっかりした土台をくれます。コードはすべて自分のものなので、思いどおりに直して作れます。キット自体を更新する必要は、ありません。

メールアドレスの確認を有効にするには#

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');
});

標準のメールの見た目を変えるには#

アプリのブランドに合わせて、標準のメールの見た目を変えたいことがあります。そのときは、メールのビューを、次のコマンドでアプリに取り出します。

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

resources/views/vendor/mail にファイルがいくつかできます。これらのファイルと、resources/views/vendor/mail/themes/default.css を直すと、標準のメールの見た目を変えられます。

関連するページ#

• インストール
• 画面（フロントエンド）の作り方
• ログインのしくみ（認証）
• メールアドレスの確認
• 回数の制限（レート制限）