Laravel＋Reactとは？
LaravelにReactを導入し、シングルページ化する手順
本章では、既存のLaravelプロジェクトにReactを導入する手順を紹介します。本来、「リクエストに対してLaravelがJSONを返し、ReactがJSONをレンダリングしてWebページやアプリ画面を表示する」という構成が一般的なのですが、実現には別途API開発の知識が必要になってきます。そのため、今回はJSON連携部分に関しては割愛することにします。
導入後の動作確認では、Reactコンポーネントがブラウザで表示できたことまでを確認します。
UIパッケージ導入〜Reactインストール
Laravelプロジェクトに、Laravel UIパッケージを導入します。Laravelプロジェクトのルートディレクトリで、以下のコマンドを実行してください。
omposer require laravel/ui
php artisan ui react --auth
npm install
npm run devLaravel UIは認証関連機能の雛型を提供するLaravel公式のライブラリです。「composer」はPHPのライブラリの依存関係を管理するツールであり、「require」をつけて実行することでライブラリを追加することができます。
また、上記で使われているartisan（アーティザン）はPHP用のコマンドラインインターフェースの1種です。PHPアプリケーション上で様々なコマンドを実行することができます。
シングルページ用のphpファイルを残し、他は除外
シングルページアプリケーション化のため、サーバーサイドで出力するPHPファイルを1つに絞ります。今回はLaravelのプロジェクト開始時に作成される「app.blade.php」を出力することにします。「resources/views」フォルダ配下にはapp.blade.phpファイルのみがある状態とし、ファイル内には下記を記載してください。
resources/js/components/Example.jsを修正
・app.blade.phpの「id=”app”」部分に、Exampleコンポーネントをレンダリングするよう修正します。 getElementById部分を下記コードに修正してください。
if (document.getElementById('app')) {
ReactDOM.render(, document.getElementById('app'));
}これにより、Laravelが動いているWEBサーバはHTMLファイルのみを返し、フロント側でHTMLファイルをレンダリングするようになります。
routes/web.phpを修正
どのURLからもWEBサーバがapp.blade.phpを返すように修正します。 routes/web.phpに下記を追記してください。
Route::get('{any}', function () {
return view('app');
})->where('any','.*');
再度ビルド実行
・Laravelプロジェクトのルートディレクトリで、以下のコマンドを実行してください。
npm run dev
参考： LaravelプロジェクトにReact導入その1 -導入 & API連携編-
参考： Laravel9とReactをDockerで導入してみよう!
参考： [簡単]React x LaravelのSPAで作るチュートリアル①(環境構築編)
参考： [簡単]React x LaravelのSPAで作るチュートリアル②(ルーティング編)
参考： [簡単]React x LaravelのSPAで作るチュートリアル③(Reactで一覧テーブル編)~map()とコンポーネント分割~
参考： [簡単]React x LaravelのSPAで作るチュートリアル④(API取得してReactで一覧表示)
参考： [簡単]React x LaravelのSPAで作るチュートリアル⑤(新規登録機能)
参考： [簡単]React x LaravelのSPAで作るチュートリアル⑥(編集・削除機能)
参考： Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite]
