Laravel＋Reactとは？

この記事では、バックエンド技術である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 dev

Laravel UIは認証関連機能の雛型を提供するLaravel公式のライブラリです。「composer」はPHPのライブラリの依存関係を管理するツールであり、「require」をつけて実行することでライブラリを追加することができます。

また、上記で使われているartisan（アーティザン）はPHP用のコマンドラインインターフェースの1種です。PHPアプリケーション上で様々なコマンドを実行することができます。

シングルページ用のphpファイルを残し、他は除外

シングルページアプリケーション化のため、サーバーサイドで出力するPHPファイルを1つに絞ります。今回はLaravelのプロジェクト開始時に作成される「app.blade.php」を出力することにします。「resources/views」フォルダ配下にはapp.blade.phpファイルのみがある状態とし、ファイル内には下記を記載してください。


<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->

    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->

    <link rel="dns-prefetch" href="//fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body>

    <div id="app">

    </div>

</body>

</html>

resources/js/components/Example.jsを修正

・app.blade.phpの「id=”app”」部分に、Exampleコンポーネントをレンダリングするよう修正します。 getElementById部分を下記コードに修正してください。

if (document.getElementById('app')) {

    ReactDOM.render(<Example />, 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]

関連記事:

Laravel＋React＋Next.jsを使う方法 Laravel-AdminLTEとlivewireインストール １）Laravel入門 ２）Laravelのインストール(XAMPP編) ３）Laravelのバージョン確認 ４）Hello World(Laravelの起動) ５）artisanコマンドの使い方（Laravel） ６）MVCモデルとは（Laravel） ７）掲示板サイトの作成（Laravel） ECサイト構築例 React.js Redux Next Next.jsの詳しい説明（React.js入門＆実践） Laravel-AdminLTEインストール React.js入門 React.js-LPサンプル React.js-Todoサンプル React.js-Loginサンプル React.js-Modalサンプル まだMVCで消耗してるの？〜React x Djangoで始める今時Web開発〜 第二版 Next.js環境構築 Next.jsとは？ TypeScript入門
,,,,