RitoLabo

LaravelにReactを導入する。Vue.js→Reactへスカフォールド切り替え

  • 公開：
  • 更新：
  • カテゴリ： PHP Laravel
  • タグ： PHP,Laravel,React,JavaScript,Webpack,5.5,Build,NPM,Vue,Frontend,5.6

これまでLaravel5では、フロントエンド開発においてJavaScript側にVue.jsをベーシックとして提供していましたが、5.5からはReact.jsも選択できるようになりました。

ちなみに、これまでもReact.jsに限らずVue.js以外のjsフレームワークは手動で導入可能でした。5.5以降はスカフォールド（scaffold）といって、簡単に言えば「必要な環境を整えてくれる機能」にて、Reactの導入が可能になった、という事になります。

ということで、今回はLaravelをインストール後、VueではなくReactを導入し、開発を開始できるまでを行っていきます。

アジェンダ
  1. 開発環境
  2. Reactのスカフォールドへ変更する
  3. 依存パッケージをインストールする
  4. サンプルコードを用意してReactの動作を確認する
    1. Reactファイルの確認
    2. viewの作成
    3. ルーティングの作成
    4. コントローラの作成
    5. ビルド設定
    6. ビルドを実行する
    7. 動作確認

開発環境

今回の開発環境に関しては以下の通りです。

  • Linux CentOS 7
  • Apache 2.4
  • PHP 7.1/7.2
  • Laravel

Laravelのバージョンに関しては5.6/5.5にて動作確認済みです。

Laravelのルートディレクトリを「laravel/」とします。

尚、今回はLaravel Mix(Webpack)でのビルドが出来る事が前提です。まだ導入していない場合は、以下を参考に導入してください。
Laravel Mix(Webpack)を導入しsassやJavaScriptをビルド、minifyする

Reactのスカフォールドへ変更する

laravelはデフォルトではVueのスカフォールドとなっていますので、これをReactへ切り替えます。

laravelルートディレクトリへ移動し、以下のartisanコマンドを叩きVueのスカフォールドをReactのスカフォールドへ変更します。 

# laravelルートディレクトリへ移動
cd /path/to/laravel

# artisanコマンドでVueのスカフォールドをReactのスカフォールドへ変更する
php artisan preset react

# 実行結果
[demo@localhost laravel]$ php artisan preset react
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

切り替えが完了したら、切り替わったか確認してみます。 まずはresourcesディレクトリ（laravel/resources）のファイル構成を見てみます。

実行前resourcesディレクトリ 

resources
├── assets
│   ├── js
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   ├── components
│   │   │   └── Example.vue
│   └── sass
│       ├── app.scss
│       └── _variables.scss

実行後resourcesディレクトリ 

resources
├── assets
│   ├── js
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   ├── components
│   │   │   └── Example.js
│   └── sass
│       ├── app.scss
│       └── _variables.scss

「Example.vue」が「Example.js」に換わっています。後で解説しますが、vueファイルがreactのjsファイルに変更されています。

次に、package.json（laravel/package.json）を確認します。

実行前package.json 

"devDependencies": {
    "axios": "^0.17",
    "bootstrap": "^4.0.0",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.7"
}

実行後package.json 

"devDependencies": {
    "axios": "^0.17",
    "babel-preset-react": "^6.23.0",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "popper.js": "^1.12",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
}

上記はver5.6でのファイル内容ですが、それぞれのバージョンは導入時期によってもちろん異なります。しかしながら、導入されているパッケージは5.5も5.6も同じものになります。

依存パッケージ指定がvueのものからreactに変更になっています。reactからbabelまで、至れり尽くせりです。スカフォールド、素晴らしい。

依存パッケージをインストールする

vueからreactへ切り替えられた事を確認できたので、次はreactで開発を行うために、必要な依存パッケージをインストールします。

reactを導入する場合は、ビルドの為にbabelなどの導入も必要なのですが、先ほど確認したpackage.jsonに基本的に必要なパッケージは全て記述されていましたので、後はただコマンドを叩くだけです。これが、5.5以降でReactがスカフォールドとして提供された事による恩恵の一つです。

npmにて以下インストールコマンドを叩きます。 

# laravelルートディレクトリへ移動
cd /path/to/laravel

# npmで依存パッケージをインストールする
npm install

回線状況によっては少し時間がかかりますが、気長に待ちましょう。

ちなみに、Windows＆Vagrantで環境を構築している場合には、シンボリックリンク部分でエラーが発生するので、--no-bin-linksオプションを付けて実行してください。 

npm install --no-bin-links

インストールは完了しましたか？次に進みましょう。

サンプルコードを用意してReactの動作を確認する

ここからは、一通りサンプルコードを書いてReactを動かしてみます。

Reactファイルの確認

まずは、切り替え時に生成されたlaravel/resources/assets/js/components/Example.jsを開いて、中身を見てみます。 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-md-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">Example Component</div>

                            <div className="panel-body">
                                I'm an example component!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

ご丁寧にbootstrapまで使ってサンプルコードを書いてくれています。 ID名「example」に対しレンダリングを行っているようなので、これを元にview（Bladeファイル）を作成します。

viewの作成

laravel/resources/views/にreact_sample.blade.phpを作成し、以下の様に記述します。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React Sample</title>
</head>
<body>
<div id="example"></div>
<script src="{{asset('/js/app.js')}}"></script>
</body>
</html>

なんて事のないHTMLの記述ですが、ポイントは２つあります。 

<div id="example"></div>

先ほどReactファイルを確認した時に、ID名「example」に対しレンダリングを行っている記述があったので、divタグをID名「example」として記述しています。ご存知の通り、ここにReactで書いたスクリプトが展開されます。 

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

これからビルドして出力するjsファイルを指定しています。

ルーティングの作成

今回のデモンストレーション用にルーティングを追加します。 laravel/routes/web.phpに以下を追記します。 

Route::get('sample/react', 'SampleController@react');

http://xxxx.com/sample/react へのアクセス時に、 SampleControllerのreactメソッドを実行する。というものです。

コントローラの作成

次に、コントローラを作成します。 以下のartisanコマンドを叩いてTestコントローラを生成します。 

# laravelルートディレクトリへ移動
cd /path/to/laravel

# artisanコマンドでコントローラ作成
php artisan make:controller SampleController

# 実行結果
[demo@localhost laravel]$ php artisan make:controller SampleController
Controller created successfully.

生成が完了したら、laravel/app/Http/Controllers/SampleController.phpを開き、以下を記述します。 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleController extends Controller
{
  public function react()
  {
    return view('react_sample');
  }
}

単純にviewを返しているだけです。

ビルド設定

一連のファイルは作成が完了したので、ビルドの設定を行います。

「どのファイルを」「どの仕様で」「どこへ」ビルドを実行するかを記述するのはwebpack.min.jsになりますので、laravel/webpack.min.jsを開いて、以下を記述します。 

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.react('resources/assets/js/components/Example.js', 'public/js/app.js');

今回はデモなのでわかりやすいように余計なものは除去しています。
Reactの場合はjs()ではなくreact()で記述する必要があります。
また、第一引数はビルド対象のファイルで、第二引数は出力先になります。
両方とも、laravelルートディレクトリが基点となっています。

ビルドを実行する

設定が完了したら、ビルドを実行します。 以下のコマンドを叩きます。 

# laravelルートディレクトリへ移動
cd /path/to/laravel

# ビルド
npm run dev

# 実行結果
 DONE  Compiled successfully in 9994ms        07:34:56

     Asset    Size  Chunks                    Chunk Names
/js/app.js  711 kB       0  [emitted]  [big]  /js/app

動作確認

ビルドが完了したら、実際にブラウザからアクセスして、動作を確認してみます。

アクセスするURLはルーティングで設定した通り、以下のようになります。
http://YOUR-DOMAIN.com/test/react

ブラウザでReact動作確認

Reactによって出力された「Example Component I'm an example component!」が表示されました。 これで、Reactの切り替え・導入と動作を確認できました。

まとめ

作業は以上で完了となります。
スカフォールドにReactが追加された事によって、簡単にLaravelへReact.jsを導入する事ができました。 また、切り替え時にvueのソースも削除されるので便利ですね。

Laravel + React は、個人的にはかなり良いタッグだと思いますので、是非試してみてください。