読者です 読者をやめる 読者になる 読者になる

無駄と文化

実用的ブログ

Laravel5 ベースのプロジェクトに React が爆速で導入できた話

Laravel React gulp.js

f:id:todays_mitsui:20160121230347p:plain


ここ3ヵ月ほどプライベートで Laravel 5.2 を使ってみています。
この度、バックエンドを Laravel、フロントエンドを React で Web アプリを組んでみようかと思い立ち、初めて React を導入してみました。

『下準備が面倒かもな...』とか思ってたんですが、Laravel Elixir のおかげで爆速で React を導入することができました。


この記事は React 導入記事ではありますが、React 入門記事ではありません。React で "Hello, world!" を表示するところまでの内容です。


Laravel Elixir

Laravel には Laravel Elixir と呼ばれる gulp.js タスク群が標準で付属しています。
Laravel で構築しているプロジェクトならば、Sass や CoffeeScript のコンパイルのために別途セットアップが必要になることはありません。

... とはいえ、
さすがに Node.js や npm, gulp.js などが導入済みであることは前提なんですけどね。
それらの導入が済んでいない人は、以下のよく分かる記事を参照しつつ、npm i -g gulp くらいまでは済ませておいてください。

blog.mudatobunka.org


さて、Laravel Elixir で実行できるタスクは以下のとおり、

  • Less コンパイル
  • Sass コンパイル
  • css ファイルの結合
  • CoffeeScript コンパイル
  • Browserify で js ファイル生成
  • Babel コンパイル
  • js ファイルの結合

React を使うのに必要なのは Browserify と Babel くらいなので、必要なものは揃っていますね。
Laravel Elixir があれば事前準備はグッと簡単になります。


React のインストールから "Hello, world!" まで

では、ステップを追って React で "Hello, world!"を表示させるまでをやってみましょう。


1. 必要なパッケージのインストール

React の公式サイトを見ると npm でパッケージを揃える方法がオススメされているので、これをそのままやります。

必要なパッケージは、
react, react-dom, babelify, babel-preset-react, babel-preset-es2015, babel-preset-react
です。

$ npm install --save react react-dom babelify babel-preset-react
$ npm install --save babel-preset-es2015 babel-preset-react --no-bin-links


babel-preset-es2015 と babel-preset-react について公式サイトでは全く言及されていないんですが、babel6 からはパッケージが細かく分割されるようになったから別途インストールが必要とのことです。

詳しくは以下を参照してください。

http://qiita.com/kamijin_fanta/items/e8e5fc750b563152bbcf


2. gulpfile.js を記述

続いて gulpfile.js に Browserify を使いたい旨を記述します。


gulpfile.js

var elixir = require('laravel-elixir');

elixir(function(mix) {
  mix.browserify('app.js');
});

なんと、これだけです。
簡単すぎかよ...。


3. React のコードを用意

React 公式の "Hello, world!" をそのまま使います。

コンパイル前の js は resources/assets/js/ に置くのがデフォルトですね。ファイル名は app.js で。


resources/assets/js/app.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);


4. Browserify コンパイルを実行

$ gulp

これだけでコンパイルが走ります。

開発中にファイル保存のたびにコンパイルを走らせたい場合は、

$ gulp watch

として watch しましょう。


これにて、resources/assets/js/app.js を元にして public/js/app.js にコンパイル済みのファイルが入ります。


5. HTML を用意

実際に表示させる HTML を用意します。
これも、React 公式のサンプルをそのままです。

あくまでも React の導入記事なので、Laravel 本体の機能は使いません。プレーンな HTML です。 public/react-example/ ディレクトリに置きましょう。


public/react-example/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
</head>
<body>
  <div id="example"></div>
  <script src="/js/app.js"></script>
</body>
</html>


6. 表示させて確認

全ての準備が整ったので実際に表示させてみます。
Laravel Artisan コマンドに簡易ローカルサーバーの機能がコレを使います。

プロジェクトルートディレクトリで、

$ php artisan serve

でサーバーが立ち上がります。


ブラウザで http://localhost:8000/react-example/ にアクセスしてみてください。

f:id:todays_mitsui:20160121230406p:plain

"Hello, world!" の文字が表示されたでしょうか?
デベロッパーツールなどで要素を覗いてみると、新たに <h1> が生成されて挿入されているのが見えますね。


まとめ

今回は "Hello, world!" までですが、思った以上に簡単に導入できたので拍子抜けしました。

特に npm と Browserify と gulp.js の連携が設定済みなのがめちゃくちゃ便利ですね。
必要なパッケージは npm install して、require() して、Browserify するだけで使えるので必要パッケージの管理から完全に開放されます。

個人的には、フロントのパッケージ管理を bower ではなく npm でやれるのも好印象ですね。


フロントエンドフレームワークの導入までも激簡単にしてくれる Laravel と Laravel Elixir すごい、という紹介でした。


私からは以上です。