こんにちは、ソフトウェアエンジニアのやぎーです。
みなさんローカル開発環境の構築してますか。
ちょっとした検証や、思いつきでアプリを作ろうと思った時にサクッと作りたいことがあります。
しかし、設定やらエラーやらにつまづき、また時間ある時に...と挫折してしまう人も多いのではないでしょうか。
最新のLaravelでSailを使ってサクッと構築する手順を簡単にご紹介します。
環境
Laravel
PHPのフレームワーク。 バージョン11ではディレクトリ構成が変更されているのでご注意ください。
Inertia.js
フロントエンド・バックエンドを繋ぐためのアダプター。
Laravel用に調整されているが、Railsなどにも対応している。
React
JavaScript ライブラリ。
コンポーネントベースでSPA（Single Page Application）と相性が良い。
Vite
ビルドツール。
HMR(Hot Module Replacement)で修正分のみを適用してくれるため高速。
構築手順
Laravelインストール・起動
何はともあれ、まずはLaravel本体をインストールしていきます。
※Docker Desktopを使用します
プロジェクトを作成したいディレクトリに移動し、下記を実行します。
curl -s "https://laravel.build/inertia-react" | bash
本体のインストールが終わったら、sailを起動します。
cd inertia-react && ./vendor/bin/sail up -d
docker psでコンテナが起動していることを確認します。
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES d7a37822a7ba sail-8.3/app "start-container" 2 minutes ago Up 2 minutes 0.0.0.0:80->80/tcp, 0.0.0.0:5173->5173/tcp, 8000/tcp inertia-react-laravel.test-1 d2d689647a27 redis:alpine "docker-entrypoint.s…" 2 minutes ago Up 2 minutes (healthy) 0.0.0.0:6379->6379/tcp inertia-react-redis-1 e2960d4a5a25 mysql/mysql-server:8.0 "/entrypoint.sh mysq…" 2 minutes ago Up 2 minutes (healthy) 0.0.0.0:3306->3306/tcp, 33060-33061/tcp inertia-react-mysql-1 dd78e09916ab axllent/mailpit:latest "/mailpit" 2 minutes ago Up 2 minutes (healthy) 0.0.0.0:1025->1025/tcp, 0.0.0.0:8025->8025/tcp, 1110/tcp inertia-react-mailpit-1 d46113a1e304 getmeili/meilisearch:latest "tini -- /bin/sh -c …" 2 minutes ago Up 2 minutes (healthy) 0.0.0.0:7700->7700/tcp inertia-react-meilisearch-1 15c6cd20bd9f seleniarm/standalone-chromium "/opt/bin/entry_poin…" 2 minutes ago Up 2 minutes 4444/tcp, 5900/tcp inertia-react-selenium-1
起動が確認できたらマイグレーションを実行します。
sail php artisan migrate
http://localhostにアクセスするとwelcome画面が表示できるようになります。
ライブラリのインストール ひとまず最低限必要なものだけインストールします。
# Reactとvite関連 sail npm install @vitejs/plugin-react @inertiajs/react react-dom # Inertia sail composer require inertiajs/inertia-laravel
ファイル・設定 SPAとして動かすために必要な設定を行います。
Middlewareを追加
sail php artisan inertia:middleware
webのルーティングでmiddlewareが適用されるよう設定。
Laravel11からMiddlewareの指定方法が下記のように変更されていますので注意。
// bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class
]);
$middleware->api(prepend: []);
})Inertiaを使うようにbladeを変更
<!-- resources/views/app.blade.php --><!DOCTYPE html><html><head><metacharset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><title>Sample SPA</title> @viteReactRefresh @vite('resources/js/app.jsx') @inertia</head><bodystyle="margin: 0"> @inertia </body></html>
Inertiaを使うようにapp.jsxを変更
// resources/js/app.jsximport"./bootstrap";import{ createInertiaApp }from"@inertiajs/react";import{ createRoot }from"react-dom/client";createInertiaApp({resolve: name =>{const pages = import.meta.glob("./Pages/**/*.jsx",{eager:true});return pages[`./Pages/${name}.jsx`];},setup({ el, App, props }){createRoot(el).render(<App {...props}/>); }});
Pagesフォルダに表示するコンポーネントの作成
// resources/js/Pages/Index.jsxconst Index =()=>{return<>Index Page</>;};export default Index;
ルーティング設定
// routes/web.php
Route::inertia('/', 'Index');
ビルドを実行
sail npm run dev
配置したコンポーネントが表示されていれば完了です。
Laravel・Reactの接続
通常ですと、ここからLaravelにAPIを実装しReactから取得を行う実装が必要になると思いますが、Inertiaを使うことでReactへの接続がbladeっぽくできるようになります。
コントローラー
// app/Https/Controllers/SampleController.php <?phpnamespace App\Http\Controllers; use App\Models\SampleLists; use Illuminate\Http\Request; use Inertia\Inertia; class SampleController extends Controller {publicfunction index(Request $request){// サンプルデータが入ったtableから10件取得$sampleList= SampleLists::query()->limit(10)->get(); // Inertia::renderにコンポーネント名とデータを渡すreturn Inertia::render('Sample', ['sampleList'=>$sampleList, ]); }}
ルート設定
// routes/web.php <?phpuse Illuminate\Support\Facades\Route; Route::get('/sample', 'App\Http\Controllers\SampleController@index');
受け取ったデータを一覧で取得するコンポーネント
// resources/js/Pages/Sample.jsx// リスト作成const createList =(list)=>{return list.map(col =>{return<li key={`key-${col.id}`}>{col.value}</li> });}// Controllerで渡したデータをPropsで受け取れるconst Sample = ({ sampleList }) => { return (<><h2>サンプル一覧</h2><ul>{createList(sampleList)}</ul></>);};export default Sample;
Laravelで渡したデータが表示されればOKです。
まとめ
細かな設定はさておき、ローカル動作環境を用意する手順としてはかなり手軽ではないでしょうか。
Inertiaの登場で、Laravel・React間の接続がとても簡単に作れるようになり、SPAでの開発を行うハードルは以前より確実に低くなっているように感じます。
日々更新される情報をキャッチし、よりスピード感のある開発をしていきたいと思います！
最後までお読みいただきありがとうございました。
＼\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! /／