はじめに
この記事では、Laravel のプロジェクト作成から開発サーバーの起動までの手順を macOS と Laravel 13 で記載します。フロントエンドには React を使います。
開発環境
- OS：macOS 26.6.2（25G83）
- エディタ：VSCode
- PHP：8.5.0
- Composer：2.8.12
- Laravel インストーラ：5.32.0
- Laravel：13.35.0
- Node.js：24.21.0（LTS）
- React：19.3.0
- TypeScript：5.9.3
PHP と Laravel インストーラのインストール
Laravel のプロジェクト作成には、次の3つを使います。
| ツール | 役割 |
|---|---|
| PHP | Laravel を実行する言語処理系 |
| Composer | PHP のパッケージ管理ツール。npm の PHP 版にあたる |
| Laravel インストーラ |
laravel new コマンドでプロジェクトを作成するツール |
公式ドキュメントの php.new のコマンドで、3つをまとめてインストールします。ターミナルで次のコマンドを実行します。
/bin/bash -c "$(curl -fsSL https://php.new/install/mac/8.5)"
php.new は、3つを ~/.config/herd-lite/bin に配置します。このフォルダへの PATH の設定は、~/.zshrc などに追記されます。インストール後、ターミナルを開き直します。
php -v
composer -V
laravel --version
3つのコマンドでバージョンが表示されれば完了です。
PHP 8.5.0 (cli) (built: Nov 20 2025 09:57:13) (NTS clang 15.0.0)
Copyright (c) The PHP Group
Built by Beyond Code for php.new
Zend Engine v4.5.0, Copyright (c) Zend Technologies
with Zend OPcache v8.5.0, Copyright (c), by Zend Technologies
Composer version 2.8.12 2025-09-19 13:41:59
PHP version 8.5.0 (/Users/moritayasushi/.config/herd-lite/bin/php)
Run the "diagnose" command to get more detailed diagnostics output.
Laravel Installer 5.32.0
Node.js のインストール
Laravel は、CSS と JavaScript のビルドに Vite を使います。公式ドキュメントは、このビルド用に Node.js と npm のインストールを求めています。php.new では Node.js が入らないため、LTS 版を別にインストールします。
プロジェクトの作成
プロジェクトを作成するフォルダで、次のコマンドを実行します。example-app がプロジェクト名です。
laravel new example-app
実行すると、インストーラが質問を2つ表示します。この記事では次のように回答します。
| 質問 | 回答 | 回答の意味 |
|---|---|---|
| Do you want to use a starter kit? | No | 認証画面つきのスターターキットを使わない |
| Which frontend stack do you want to build on? | React | 画面を React で書く |
React の選択時、インストーラは認証画面のない React 用スターターキット（laravel/blank-react-starter-kit）からプロジェクトを作成します。
DB、テストフレームワーク、Laravel Boost、npm の実行は、インストーラが質問せずに既定値で設定します。実行結果に表示される処理は次のとおりです。
| 処理 | 内容 |
|---|---|
| Running database migrations | SQLite のファイル database/database.sqlite にテーブルを作成する |
| Setting up Pest | テストフレームワークに Pest を設定する |
| Fixing test code style | Laravel のコード整形ツール Pint で、tests フォルダのコードの書式を修正する |
| Setting up frontend dependencies with npm |
npm install と npm run build を実行する |
| Setting up Laravel Boost for AI assisted coding | AI エージェントに Laravel 固有の情報とツールを提供する Laravel Boost が入る |
┌ Do you want to use a starter kit? ───────────────────────────┐
│ No │
└──────────────────────────────────────────────────────────────┘
┌ Which frontend stack do you want to build on? ───────────────┐
│ React │
└──────────────────────────────────────────────────────────────┘
• Creating Laravel application
✔ Application initialized
• Running database migrations
✔ Database migrated
• Setting up Pest
✔ Pest initialized
• Fixing test code style
✔ Test code style fixed
• Setting up frontend dependencies with npm
✔ Assets built
• Setting up Laravel Boost for AI assisted coding
✔ Boost initialized
┌ Application ready ───────────────────────────────────────────┐
│ You can start your local development using: │
│ │
│ 1. cd example-app │
│ 2. composer run dev │
│ │
│ New to Laravel? Check out our documentation. │
│ │
│ Build something amazing! │
└──────────────────────────────────────────────────────────────┘
マイグレーションは、テーブルの作成や変更を PHP のコードで記述し、コマンドで DB に反映する仕組みです。
React の画面の場所
作成したプロジェクトは、React のページの表示に Inertia を使います。Inertia は、Laravel のルーティングとコントローラーから React のページコンポーネントを表示するライブラリです。
| ファイル | 内容 |
|---|---|
routes/web.php |
Route::inertia('/', 'welcome') で、/ に welcome ページを割り当てる |
resources/views/app.blade.php |
Inertia が最初のアクセスで返す HTML。app.tsx とページの .tsx を読み込む |
resources/js/app.tsx |
Inertia の React アプリを起動する |
resources/js/pages/welcome.tsx |
/ で表示する React のページコンポーネント |
resources/js/actions、resources/js/routes、resources/js/wayfinder
|
Wayfinder が Laravel のルートとコントローラーから自動生成する TypeScript の関数。.gitignore の対象 |
React のページは resources/js/pages に TypeScript（.tsx）で書きます。ルートを定義するファイルは routes/web.php です。resources/js/routes は、Wayfinder が生成したファイルを置くフォルダです。
Wayfinder は、Laravel のルートの URL を TypeScript の関数で取得するためのパッケージです。React のコードに URL の文字列を書く必要がありません。Laravel 側でルートを変えても、Vite の実行時に関数が作り直されます。npm run build と npm run dev の実行時に、Vite のプラグインがファイルを生成します。
開発サーバーの起動
作成したプロジェクトのフォルダに移動し、開発用のプロセスを起動します。
cd example-app
composer run dev
composer run dev は、次のプロセスを同時に起動します。
| プロセス | 実行するコマンド | 役割 |
|---|---|---|
| server | php artisan serve |
http://localhost:8000 でアプリを配信する |
| queue | php artisan queue:listen |
キューに入れた処理（メール送信など）を実行する |
| vite | npm run dev |
Vite の開発サーバーで、CSS と JavaScript の変更をブラウザに反映する |
| logs | php artisan pail |
アプリのログをターミナルに表示する |
artisan は Laravel 付属のコマンドラインツールです。マイグレーションの実行やファイルの生成に使います。
ブラウザで http://localhost:8000 を開きます。welcome.tsx の「Let's get started」の画面が表示されれば、起動は成功です。
logs のプロセスは、PHP に pcntl 拡張がある場合だけ起動します。php -m の一覧に pcntl がなければ、起動するのは残りの3つです。
まとめ
この記事では、macOS での Laravel 13 と React のプロジェクト作成から開発サーバーの起動までの手順について記載しました。PHP、Composer、Laravel インストーラは php.new のコマンドでまとめてインストールしました。React の画面は、インストーラで React を選ぶと Inertia 経由で表示されます。