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

1php artisan help preset
2Usage:
3  preset <type>
4
5Arguments:
6  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 でプロジェクトを作成します。

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

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

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

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

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

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

1$ php artisan package:discover

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

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

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

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

1$ php artisan serv

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

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

preset

ようやく preset です。

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

1$ php artisan preset react

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

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

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

1$ npm install && npm run dev

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


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

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

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

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

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

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

preset がやっていること

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

package.json

1"devDependencies": {
2-  "vue": "^2.1.10"
3+  "react": "^15.4.2",
4+  "react-dom": "^15.4.2"
5    :
6}

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

webpack.mix.js

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

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

Example.js

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

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

 1import React, { Component } from 'react';
 2import ReactDOM from 'react-dom';
 3
 4export default class Example extends Component {
 5    render() {
 6        return (
 7            <div className="container">
 8                <div className="row">
 9                    <div className="col-md-8 col-md-offset-2">
10                        <div className="panel panel-default">
11                            <div className="panel-heading">Example Component</div>
12
13                            <div className="panel-body">
14                                Im an example component!
15                            </div>
16                        </div>
17                    </div>
18                </div>
19            </div>
20        );
21    }
22}
23
24if (document.getElementById('example')) {
25    ReactDOM.render(<Example />, document.getElementById('example'));
26}

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

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

おわりに

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

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

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


PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応

竹澤 有貴,栗生 和明,新原 雅司,大村 創太郎
出版社:ソシム  発売日:2018-09-26

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。