2025.06.25
記事の目次を開く
はじめに
自分の担当している業務ではFuelPHP+jQueryでの開発となっているのですが、
昨今の主流のフレームワークに触れてみようということでLaravelを、
またフロントエンドに関してもjQueryからReactへの移行ということで合わせて学習しています。
今回はLaravel・React導入からそれぞれを連携させた簡単な動作確認までを書いていきたいと思います。
環境構築
<主な環境>
・Laravel 12
・Breeze
Laravel公式が管理している認証機能キット
Inertia.jsを利用するために導入
・Inertia.js
VueやReactを利用したフロントエンドとの連携を円滑にできるJSライブラリ
Laravel側で取得したデータの受け渡しなどが楽になる
# Laravelのプロジェクト生成
composer create-project --prefer-dist "laravel/laravel=12.*" .
# Breezeのインストール
composer require laravel/breeze --dev
# 諸々のインストール(選択肢が出てきます)
php artisan breeze:install
# 選択肢(一例)
# - Which Breeze stack would you like to install?
# + React with Inertia
# - Would you like any optional features?(Spaceで複数選択)
# + Dark mode
# + Inertia SSR
# + TypeScript
# - Which testing framework do you prefer?
# + PHPUnit
php artisan migrate
npm install現状Laravelのフロントエンドビルドツールはviteになっているのでこちらも設定をしていきます
※vite : TypeScriptをJavaScriptへの変換(トランスパイル)を行うためのツール
Breezeをインストールした際に入っています
・src/vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
server: {
host: true,
hmr: {
host: 'localhost',
},
},
plugins: [
laravel({
publicDirectory: 'public',
input: 'resources/js/app.jsx',
ssr: 'resources/js/ssr.jsx',
refresh: true,
}),
react(),
],
});viteのために5173ポートを指定しておきます(下記コードはdocker-compose.yml)
services:
app:
build:
...
ports:
- 5173:5173viteを起動して起動時に表示されたURL(https://localhost:5173)にアクセスできれば完了です
npm run dev
簡単な処理の実装で連携確認
準備が出来たところで早速簡単な処理を作成していきたいと思います
・Http\Controller\TestController.php
Controller側では通常の「view()」ではなく「Inertia::render()」を用います
第一引数 : コンポーネント
第二引数 : プロパティ配列
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
class TestController extends Controller
{
public function index()
{
$data = [
'message' => 'テストメッセージ',
'testVals' => [
'text1' => '値1',
'text2' => '値2',
'text3' => '値3',
],
];
return Inertia::render('Hello', $data);
}
}・routes/web.php
ルーティングは通常通り
Route::get('/test', [TestController::class, 'index']);・resources/views/app.blade.php
Breezeが作成しているbladeテンプレート
「@inertia」部分にReact表示されます
<body class="font-sans antialiased">
@inertia
</body>・resources/js/Pages/Test.tsx
「@Inertia」で表示されるコンテンツはPagesフォルダ配下に置くのがデフォルトとなっています
TypeScriptなのでファイル拡張子はtsx
Controller(Laravel)側からのデータをReact側で受け取り、表示させています
import React from "react";
type Props = {
message: string,
testVals: {text1: string, text2: string, text3: string},
};
export default function Test ({message, testVals}: Props) {
// 軽くcss設定
const containerStyle = {
marginTop: "10px",
marginLeft: "10px",
};
const boxMessage = {
width: "300px",
height: "50px",
border: "1px solid #000",
marginBottom: "10px",
};
const boxArray = {
width: "100px",
height: "30px",
border: "1px solid #000",
backgroundColor: "#bcbcbc",
textAlign: "center",
marginBottom: "3px",
};
const list = Object.values(testVals).map((tv: string) => <li style={boxArray}>{tv}</li>);
return (
<div className="container mx-auto" style={containerStyle}>
<div className="message" style={boxMessage}>
<p>メッセージを表示します<br />{message}</p>
</div>
<div className="array">
<ul>
{list}
</ul>
</div>
</div>
);
};・結果表示
ファイルの中身を変更するとホットリロードにより即時に反映されたりします
最後に
今回紹介した領域の中では特に直接DOMを変更するjQueryから仮想DOMを扱うReactへの変化が大きく新鮮でした。
コンポーネント化やカスタムフックなど再利用性の高くなるようなコードが書ける点などは、
古いソースコードに付け足し付け足しで膨張したファイルの修正に悪戦苦闘した経験がある自分としては
大変魅力的でしたのでこれからも継続して学習を進めていきたいです。
また進捗がありましたらブログを書きたいと思います！
