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

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

  • 公開日
  • 更新日
  • カテゴリ：Laravel
  • タグ：PHP,Laravel,React,JavaScript,Webpack
LaravelにReactを導入する。Vue.js→Reactへスカフォールド切り替え

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

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

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

Contents

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

まとめ

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

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

Author

rito

  • Backend Engineer
  • Tokyo, Japan
  • PHP 5 技術者認定上級試験　認定者
  • 統計検定 3 級