最新のWeb開発トレンドに乗り遅れていませんか？Laravel 12とReactの組み合わせは、高速かつ効率的なモダンWebアプリケーション開発の強力な基盤となります。しかし、環境構築は複雑そうに感じられ、最初の一歩でつまずいてしまうことも少なくありません。
本記事では、Laravel 12とReactを連携させた開発環境を、初心者の方でも迷わずスムーズに構築できるよう、具体的な手順とコード例を交えて徹底解説します。この記事を読めば、あなたは複雑な設定に悩むことなく、すぐに最新のモダンWebアプリケーション開発をスタートできるようになるでしょう！
なぜ今、Laravel12とReactの組み合わせが最強なのか？
Webアプリケーション開発において、バックエンドはLaravel、フロントエンドはReactという組み合わせは、高い生産性と拡張性を両立させるモダンな開発スタイルとして急速に普及しています。Laravel 12は、堅牢なバックエンド機能を提供しつつ、フロントエンドとの連携もスムーズに行えるように進化を続けています。一方、Reactはコンポーネントベースの思想で、複雑なUIも再利用性の高い部品として構築できるため、大規模なアプリケーション開発に適しています。
この二つのフレームワークを組み合わせることで、それぞれの得意分野を活かし、開発者はより効率的かつ高品質なアプリケーションを構築することが可能になります。特に、シングルページアプリケーション（SPA）の開発では、フロントエンドとバックエンドの役割を明確に分離することで、開発速度の向上とメンテナンス性の改善が期待できます。
モダン開発を始めるための前提準備
LaravelとReactの環境構築を始める前に、いくつかの開発ツールがシステムにインストールされている必要があります。主に、Node.js（npmを含む）、Composer、PHPがこれにあたります。
# Node.jsがインストールされているか確認
node -v
npm -v
# Composerがインストールされているか確認
composer -V
# PHPがインストールされているか確認
php -v
これらのツールがインストールされていない場合は、それぞれの公式ドキュメントを参照して最新版をインストールしておきましょう。
Laravel 12プロジェクトの初期セットアップ
まずはバックエンドとなるLaravel 12のプロジェクトを作成します。Composerを使って簡単にプロジェクトをセットアップできます。
新規Laravelプロジェクトの作成
ターミナルを開き、以下のコマンドを実行して新しいLaravelプロジェクトを作成します。「example-app」はあなたのプロジェクト名に置き換えてください。
composer create-project laravel/laravel example-app
cd example-app
データベース設定とマイグレーション
プロジェクトを作成したら、データベースの設定を行います。`.env`ファイルを開き、データベース接続情報を適切に設定してください。
# .envファイル編集後、以下のコマンドでマイグレーションを実行
php artisan migrate
これにより、Laravelが提供するデフォルトのテーブル（users, password_reset_tokensなど）がデータベースに作成されます。
React環境の導入とViteによる最適化
次に、フロントエンドであるReactをプロジェクトに導入し、Laravel 12で推奨されるViteを使って最適化します。
Reactと依存パッケージのインストール
プロジェクトのルートディレクトリで、npm（Node.jsパッケージマネージャー）を使ってReactとその関連パッケージをインストールします。
npm install react react-dom @vitejs/plugin-react
エンジニアReactをインストールしたら、次はViteの設定だよ。Viteは高速な開発サーバーとビルドツールで、特にモダンなJavaScript開発では必須になっているんだ。
デザイナーViteを使うと、何がそんなに便利なんですか？以前はWebpackとか使ってましたよね？
エンジニアViteはES Modulesネイティブなので、開発時のリロードが驚くほど速いんだ。設定もシンプルで、Reactのプロジェクトをすぐに立ち上げられるから、開発体験が格段に向上するよ。Webpackよりも手軽に使えるのが特徴だね。
Vite設定ファイルの変更 (`vite.config.js`)
ReactをViteで扱うために、`vite.config.js`ファイルを編集し、Reactプラグインを追加します。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; // Reactプラグインをインポート
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.jsx'], // .jsx拡張子を追加
refresh: true,
}),
react(), // Reactプラグインを追加
],
});
input配列に`resources/js/app.jsx`を追加し、`plugins`配列に`react()`を追加することがポイントです。
メインJavaScriptファイルのリネームと設定
Laravelのフロントエンドエントリーポイントである`resources/js/app.js`を`resources/js/app.jsx`にリネームし、Reactアプリケーションのルートコンポーネントをマウントするように変更します。
import './bootstrap';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './Components/App'; // 後ほど作成するAppコンポーネントをインポート
const appElement = document.getElementById('app');
if (appElement) {
ReactDOM.createRoot(appElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
}
`getElementById(‘app’)`で指定している要素は、後ほど作成するBladeファイル内に配置します。
最初のReactコンポーネントを作成
簡単なReactコンポーネントを作成し、動作確認ができるようにします。`resources/js/Components/App.jsx`というファイルを作成し、以下のコードを記述してください。
import React from 'react';
function App() {
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Hello from React!</h1>
<p>Laravel 12 & React 環境構築成功！</p>
</div>
);
}
export default App;
このコンポーネントがブラウザに表示されれば、Reactのセットアップは成功です。
Laravelでのルーティングとビューの設定
最後に、Laravel側でReactアプリケーションを読み込むためのルーティングとビューを設定します。
React用コントローラーの作成
Reactアプリケーションを表示するためのコントローラーを作成します。
php artisan make:controller ReactController
作成された`app/Http/Controllers/ReactController.php`を以下のように編集し、`react.blade.php`ビューを返すメソッドを追加します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ReactController extends Controller
{
public function index()
{
return view('react');
}
}
Webルーティングの定義 (`routes/web.php`)
`routes/web.php`ファイルを開き、`/react-app`にアクセスした際に、先ほど作成した`ReactController`の`index`メソッドが呼び出されるようにルートを定義します。
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ReactController; // コントローラーをインポート
Route::get('/', function () {
return view('welcome');
});
Route::get('/react-app', [ReactController::class, 'index'])->name('react-app'); // 新しいルートを追加
Reactを読み込むビューファイルの作成 (`resources/views/react.blade.php`)
`resources/views`ディレクトリに`react.blade.php`という新しいファイルを作成し、以下のコードを記述します。ここでViteアセットを読み込み、ReactアプリをマウントするHTML要素を配置します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 12 & React App</title>
@viteReactRefresh
@vite(['resources/css/app.css', 'resources/js/app.jsx'])
</head>
<body>
<div id="app"></div> <!-- Reactアプリがマウントされる場所 -->
</body>
</html>
`@viteReactRefresh`と`@vite`ディレクティブは、Viteが提供するアセットを読み込むためのLaravelのヘルパーです。`id=”app”`を持つ`div`要素が、Reactアプリケーションがレンダリングされる場所となります。
環境構築の最終確認とデモ
全ての準備が整いました。最後に開発サーバーを起動し、ブラウザで動作を確認しましょう。
開発サーバーの起動
LaravelとVite、それぞれ別のターミナルで開発サーバーを起動する必要があります。
# 1つ目のターミナルでLaravelの開発サーバーを起動
php artisan serve
# 2つ目のターミナルでViteの開発サーバーを起動
npm run dev
`npm run dev`を実行すると、ViteがフロントエンドのビルドとHMR（Hot Module Replacement）機能を提供し、ファイルの変更が即座にブラウザに反映されるようになります。
ブラウザでの動作確認
LaravelとViteのサーバーが正常に起動したら、ブラウザを開き、以下のURLにアクセスしてください。
`http://127.0.0.1:8000/react-app`
もし「Hello from React!」というメッセージが表示されていれば、Laravel 12とReactの連携環境構築は成功です！
エンジニアこれで、ブラウザで /react-app にアクセスすれば、Reactコンポーネントが表示されるはずだよ。ViteがバックグラウンドでReactの変更を検知して、リアルタイムにブラウザを更新してくれるから、開発がとてもスムーズになるんだ。
デザイナーすごい！これでバックエンドとフロントエンドが完全に連携して、それぞれの専門家が効率的に作業できますね！デザインの変更もすぐに反映されるから助かります。
まとめ
本記事では、Laravel 12とReactを連携させたモダンな開発環境を構築する手順を詳細に解説しました。この環境を整えることで、あなたは以下のベネフィットを得ることができます。
- 最新のLaravel 12とReactを組み合わせた、強力な開発基盤を確立できました。
- Viteを活用することで、高速な開発サーバーと効率的なフロントエンドビルドを実現できます。
- バックエンド（Laravel）とフロントエンド（React）の役割を明確に分離し、スケーラブルでメンテナンスしやすいアプリケーション開発が可能です。
- 複雑な環境構築に悩むことなく、すぐにモダンなWebアプリケーション開発をスタートできるようになります。
この手順で構築した環境を基盤として、ぜひあなた自身の創造性を発揮し、次世代のWebサービスを開発してください。今後の開発がよりスムーズで楽しいものになることを願っています！
