LaravelとReactとは？
Laravelとは、PHP言語の開発に役立つフレームワークの1つです。Microsoft製フレームワークである「.NET」チームにも参加していたTaylor Otwellが開発しており、2011年にリリースされました。LaravelはRuby on Railsのように手軽にアプリケーション開発を始めることが可能であり、PHPフレームワークのシェアとしては1位を誇っています。 【参考】：Laravel
一方、ReactはJavaScript言語のライブラリの1つです。メタ・プラットフォームズ社（旧Facebook社）により2013年にリリースされました。ReactはWEB開発におけるシングルページアプリケーション（以下、SPA）や、モバイルアプリケーションの開発に特化しています。 【参考】：React
本記事では、バックエンド技術であるLaravelと、フロントエンド技術であるReactを連携させるメリットや、連携時の手順について解説します。
LaravelにReactを導入し、シングルページ化する手順
本章では、既存のLaravelプロジェクトにReactを導入する手順を紹介します。本来、「リクエストに対してLaravelがJSONを返し、ReactがJSONをレンダリングしてWebページやアプリ画面を表示する」という構成が一般的なのですが、実現には別途API開発の知識が必要になってきます。そのため、今回はJSON連携部分に関しては割愛することにします。
導入後の動作確認では、Reactコンポーネントがブラウザで表示できたことまでを確認します。
UIパッケージ導入〜Reactインストール
Laravelプロジェクトに、Laravel UIパッケージを導入します。Laravelプロジェクトのルートディレクトリで、以下のコマンドを実行してください。
composer 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ファイルのみがある状態とし、ファイル内には下記を記載してください。
<!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
localhostにアクセスして、ブラウザに「Example Component」が出力されていることを確認してください。確認できれば、Reactを導入できています。
バックエンドとフロントエンドを分けるメリット
従来のWEBアプリケーション開発では、「ブラウザからのリクエストがあった際にDBからデータを取得し、適切な処理をした後ブラウザにHTMLを返却する」処理を1つのアプリケーションとして捉えていました。
一方で近年では、「バックエンド」「フロントエンド」といった呼び分けをして技術を細分化する傾向があります。バックエンドとは「サーバサイド」とも呼ばれ、フロントからのリクエストに応じてDBのデータを参照し、適切な処理を行う部分を指します。今回だとLaravelやPHPがここに当たります。
「フロントエンド」とはバックエンドから取得したデータをどのように画面に表示するかを担当する部分を指します。React.jsやVue.jsもその1つです。
本記事ではLaravel + Reactという「バックエンド」+「フロントエンド」構成でアプリケーションを作りましたが、この構成を用いるメリットについて以下で解説します。
バックエンドの再利用性が高まる
多くの場合、バックエンドとフロントエンドで担当領域を分けることで、バックエンド側のプロダクトはHTTPリクエストに対してレスポンスを返すAPIとして作成されます。これにより、画面の作りを意識することなく、サーバがデータのみを返すことができるようになります。
この場合、フロント側で表示方法を調整するだけで、1度作ったアプリケーションをPCやスマホなど別デバイスから利用可能にすることができます。
並行開発が可能になる
バックエンドとフロントエンドを分けて開発することで、別チームとして開発タスクを割り振り、並行開発が可能になります。結果として、1チームで開発した場合と比べてより効率的な開発が行える可能性が高いです。
デプロイサイクルが短くなる
従来のアプリ開発では、少し画面の見せ方が変更になるだけでも、バックエンド部分とフロントエンド部分を両方一気にデプロイする必要がありました。
一方、バックエンドとフロントエンドを分けることで、フロント側だけの修正をデプロイすることができるので、リリース期間を短く保つことができます。
Laravelのフロント技術としてReactを選ぶメリットは？
Laravelのバージョン5ではプロジェクト生成時にVue.jsのリソースが自動生成されます。Laravelのフロントエンド技術として、VueではなくあえてReactを選ぶメリットはあるのでしょうか。
結論として、LaravelとVue、LaravelとReactの相性に大きな差はありません。
そのため、ReactとVue、自分の得意な開発手法を選択していただいて問題ありません。敢えてVueではなくReactを用いる利点を下記に挙げておきます。スマホアプリ開発者としてのキャリアを考えている場合や、TypeScriptを書きたい開発者の方はReactを選択しても良いでしょう。
【Reactを用いる利点】 ・スマホアプリ開発言語「React Native」の習得に繋げやすい ・JSX（Javascriptの拡張言語）で記述するため、実行前に型付けによるエラーが検知できる ・TypeScriptがサポートされている
LaravelにReactを導入して、快適にSPAを作ろう
本記事では、Laravelプロジェクトにフロントエンド技術としてReactを導入する手順と、そのメリットを紹介してきました。また、VueではなくReactを選択した際のメリットに関しても解説しています。バックエンドとフロントエンドを分けて開発することで、あなたのチームの開発を効率化することができます。
LaravelとReactを使いこなして、より良いアプリケーション開発に繋げていきましょう。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
