LaravelではじめるReact.jsのSPAアプリ開発 (1)
Laravelには強力なテンプレート言語であるBladeが存在していますが、世の中の大きな流れでViewをサーバーサイドではなくフロントエンドで行う形に移行しつつあります。
フロントエンドをJavaScriptで行い、同一画面で処理するアプリケーションのことをSPA（Single Page Application）と呼びます。
Laravelもそれらのトレンドに沿う形でフロントエンド技術を組み込む形で進化しています。
laravel/uiを利用することでReact（https://ja.reactjs.org/）またはVue.js(https://jp.vuejs.org/index.html)を気軽に組み込むことが出来ます。
本章では簡単なTodoアプリを作成する流れを通して、Laravelをバックエンドに、React.jsをフロントエンドに利用したアプリケーションの開発について解説していきます。
初心者向けでは無い内容かもしれませんが、フロントエンド開発含めた＋αの武器を身に着けたい人向けの入門的な位置と考えています。
本章は次の構成で進みます。
1. プロジェクトの準備とReactのコンポーネントの作成について
2. フロントエンド開発：ReactでTodoアプリの開発
3. バックエンド開発：LaravelでTodoアプリのAPIの開発
4. ReactとLaravelの通信部分の作成
◆
# プロジェクトの作成
まずはプロジェクトを作成します。プロジェクト名をreact_sampleとしています。
composer create-project laravel/laravel --prefer-dist react_sample "7.*"
cd react_sample
Bootstrapを利用するため、Laravel7を指定します。
バックエンドの開発時にデーターベースを利用するため、.envを編集してDBの接続情報を追加してください。
# Laravel/uiのセットアップ
Reactを利用するため、laravel/uiをインストールします。Laravel7系で利用するため、バージョン指定で「2.x」を指定します。
composer require laravel/ui:2.x
インストールが完了したら、セットアップを行います。laravel/uiはartisanにuiコマンドを追加するものです。
php artisan ui react
標準の認証機能を利用するためにlaravel/uiを使うことが多いですが、今回は不要なので「--auth」は不要です。もし標準の認証機能を使う場合は「--auth」をつけた状態でセットアップを行ってください。
laravel/uiのセットアップが無事完了したら、ビルドを行います。ビルドを行うにはNodeが必要となります。
npm install && npm run dev
必要なモジュールのインストールがあるため、少し時間がかかります。
「npm」コマンドが失敗する人はNodeのバージョンが古いまたはインストールが出来ていません。
記事執筆時のNodeのバージョンはv12.3.1でした。
無事ビルドが完了したら下記2ファイルが生成されます。
public/css/app.css
public/js/app.js
# ReactのExampleコンポーネントの確認
laravel/uiをセットアップした段階で、「resources/js/components/Example.js」にReact製の部品が作成されています。
Reactではこれらの部品を「コンポーネント」と呼びます。複数のコンポーネントを組み合わせながら画面を構成していくのがReactの基本となります。
自動生成されたExample.jsは次のようなファイルとなっています。
Example.js
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}では、Example.jsの中身を解説していきます。
ReactのコンポーネントはJavaScriptとHTMLを混ぜ込んだ「JSX」という言語で書かれています。JavaScriptとHTMLが混在した見たこともないコードとなっています。
import React from 'react';
import ReactDOM from 'react-dom';importはLaravelで相当するのは「use xxx\xxxx\xxx」です。ライブラリを使うことの宣言が書かれています。Reactのコンポーネントはこの2個が必要です。
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
export default Example;Exampleという関数が宣言されています。この関数がReactコンポーネントです。
Reactのコンポーネントはクラスで作成するもの、関数で作成するもの両方があります。どちらもメリット・デメリットがありますが、本章では関数での書き方を採用します。
returnより後ろに書かれているHTML部分が実際に描画される部分です。HTMLと微妙に違う点としてクラスを「className」と書く部分があります。
LaravelのBladeに相当する部分ですが、Reactのコンポーネントはロジックとテンプレートが混在するような形になっています。
「export default Example」の部分は外部からもExampleコンポーネントを使う、という部分です。今後コンポーネントを自作することになりますので、「export default」を書くのを忘れないようにしましょう。
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}Exampleコンポーネントを<div id="example"></div>に描画するという処理が書かれています。コンポーネント内にこのような処理を書くのはあまり正しい処理ではないので、あくまで例と考えてください。
Exampleコンポーネントは「npm run dev」によりすでにビルド済です。続いてこのReactアプリの起動を確認します。
# Reactアプリの起動
Example.jsには<div id="example"></div>に描画するというよりが書かれていた。新しくBladeテンプレートを作成し、Reactアプリを起動していきます。
Reactアプリを起動するapp.blade.phpを作成します。
resources/views/app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
</head>
<body>
<div class="container py-5">
<div id="example"></div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html><div id="example"></div>の中にReactアプリが展開されます。
routes/web.phpを編集し、welcome.blade.phpの代わりにこのapp.blade.phpを表示します。
Route::get('/', function () {
//return view('welcome');
return view('app');
});開発サーバーを起動し、動作を確認しましょう。
php artisan serve
ブラウザでトップページを開き、次のように表示されていればOKです。
表示されない場合はビルドが失敗しているので、「npm run dev」を再実行しましょう。
# Reactでの変数の出力
Bladeをつかって変数を出力するには「{{ $text }}」という記述しました。
Reactではどのように書くかというと、「{ text }」と書きます。非常に似ているので交互に編集していると混乱してしまいますね。注意しましょう。
Example.jsを次のように編集し、変数の出力を試してみましょう。
function Example() {
const title = "これはタイトルです";
const text = "これは本文です";
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">{ title }</div>
<div className="card-body">{ text }</div>
</div>
</div>
</div>
</div>
);
}jQueryなどでJavaScriptを書いていた人は変数の宣言部分に見慣れない「const」という記述があり、混乱するかもしれません。
JavaScriptは近年いくつかの機能追加があり、変数を「書き換え可能なもの」と「書き換え不可能なもの」に分けるための記法が追加されました。
書き換え不可能なものには「const」、書き換え可能なものには「let」を使います。
letの場合
let text = "あいうえお";
text = "かきくけこ";constの場合
const text = "あいうえお";
text = "かきくけこ"; //←これはエラーになる必要に応じてこれらを使い分けていきます。詳しく知りたい方は「ECMA2015」というキーワードで検索してみてください。
Reactのコンポーネントは修正だけでは更新されません。ビルドを行い変換を行う必要があります。
修正が終わりましたら、下記コマンドを実行してビルドを行いましょう。
npm run dev
※ ビルドには少し時間がかかります。
ビルドが終わったらブラウザで開いて動作を確認します。次のように表示されたら成功です。
ブラウザで開いても書き換わらない場合、ブラウザのキャッシュの可能性があります。
その場合はキャッシュを消してリロードする必要があります。たいていのブラウザの場合はスーパーリロードと呼ばれるキャッシュを消したリロード機能があります。
スーパーリロードの方法
Windows: Ctrl + Shift + R
Mac: ⌘ + Shift + R
Reactの開発ではこのキャッシュが影響することがあるため、スーパーリロードの方法は覚えておきましょう。
✅ まとめ
これでReactでの開発の準備が整いました。次項よりReactでTodoアプリの開発を進めていきます。
本項で解説した内容をまとめます。
・LaravelでReactを利用するにはlaravel/uiを利用すると簡単に出来る
・Reactは部品をコンポーネントと呼ぶ
・Reactのコンポーネントはresources/js/componentsに配置する
・ReactのコンポーネントはJSXで作られている
・HTMLと違いclassNameでクラス名を指定する
・Reactアプリケーションはビルド作業が必要となる
・スーパーリロードでキャッシュを消してリロードしよう
完成まで突っ走る意気込みです。サポートしていただけると非常に嬉しいです。応援よろしくお願いします。