2017年8月30日に、待望の Laravel 5.5 がリリースされました。
5.1以来のLTSのため、たくさんの方が利用するのではないかと思います。

今回は新機能の preset を使って React.js を導入してみました。
その手順をご紹介いたします。

フロントエンドの preset について

まずはプリセットについて。
Laravel Newsでは次のコメントがありました。

When you are starting a new project, Laravel 5.5 provides Vue.js scaffolding by default. In Laravel 5.5 you can now pick from a few presets and remove all frontend scaffolding with the “preset” Artisan command in Laravel 5.5.

https://laravel-news.com/laravel-5-5

Laravel デフォルトは Vue.js 設定されていますが、 Laravel 5.5 より preset 機能が追加され、これが選択できるようになった、ということですね。

Usage

php artisan help preset
Usage:
  preset <type>

Arguments:
  type    The preset type (none, bootstrap, vue, react)
type 意味
react React.js を設定する
bootstrap Bootstrap を設定する
none Vue.js と Bootstrap のスキャフォールドを取り除く

新規プロジェクトに導入する

プロジェクトを New して React.js を導入してみます!

環境

  • macOS Sierra
  • PHP 7.0.X
  • Node.js 7.X
  • npm

プロジェクトの作成と起動

Composer でプロジェクトを作成します。

$ composer create-project laravel/laravel [project] 5.5

プロジェクトの作成が完了すると次のメッセージが表示されました。

You made a reference to a non-existent script @php artisan package:discover
You made a reference to a non-existent script @php artisan key:generate

プロジェクトのディレクトリに移動し、 .env の用意と暗号化キーを生成します。

$ cd [project]
$ cp .env.example .env
$ php artisan key:generate
$ Application key [base64:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX] set successfully.

Laravel 5.5 で導入されたパッケージのオートディスカバリを実行します。

$ php artisan package:discover

パッケージを発見すると次のように表示されます。

Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Package manifest generated successfully.

ここまでの手順を実行すると、Laravel を起動できます。

サーバを起動し、localhostにアクセスしてみましょう。

$ php artisan serv

次の画面が表示されました。

Laravel 5.5 初期画面
Laravel 5.5 初期画面

preset

ようやく preset です。

presetのコマンドはこれだけです。

$ php artisan preset react

処理が完了すると次の応答があります。

React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

指示に従ってnpmを実行します。

$ npm install && npm run dev

長時間待つとコンパイルが完了します。


次にテンプレートを修正して、 app.js をつなぎこみます。

[project]/resources/views/welcome.blade.php の BODY タグを次のようにします。

<body>
  <div id="example"></div>
  <script src="{{ elixir('js/app.js') }}"></script>
</body>

保存し、ブラウザをリロードすると問題なく表示されました。

React の表示のイメージ
React の表示のイメージ

画像が大変分かりにくいですが、React.js の挙動を確認することができました。

preset がやっていること

presetを実行すると、次のファイルなど書き換えるようです。

package.json

"devDependencies": {
-  "vue": "^2.1.10"
+  "react": "^15.4.2",
+  "react-dom": "^15.4.2"
    :
}

Vue.js のかわりに React.js を指定しています。

webpack.mix.js

- mix.js('resources/assets/js/app.js', 'public/js')
+ mix.react('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

Laravel-mix のコマンドも分かれているようですね。

Example.js

また、assets 以下にサンプルファイルが生成されています。

ファイルを覗いてみると、、、

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'));
}

あー、この JS の中に HTML を書く感じ、、、 React.js ですねー。

なおこのファイルの具体的なパスは次です。 [project]/resources/assets/js/components/Example.js

おわりに

以前は npm コマンドが通らず、 package.json を修正していたのですが、今回はトラブルなくあっという間に React.js の環境を整えることができました。

フレームワークが preset のような支援機能を充実してくれるのは大変嬉しいですね。

また、React.js の勉強で何か実装したくなってきました。

この記事は tomita@atuwebがお届けしました。

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

Ethan Brown
出版社:オライリージャパン  発売日:2017-01-20

Amazonで詳細を見る

2017年09月28日:画像のキャプションを設定
2017年09月09日:記事タイトルを一部変更