react-railsでhello world!!をES6化


[reactjs - react-railsでhello world!! - Qiita](http://qiita.com/takayukishmz@github/items/54a6cf60b0c1d8003bd3) でやったhello worldをES6が使える状態に持って行くまでのメモ。

最終的な完成型はコチラ：[takayukishmz/react-rails-browserify-es6](https://github.com/takayukishmz/react-rails-browserify-es6)

# 今回やること

方法はいくつあるが、今回は以下。

- Babelを使ってES6をES5に変換
- browserifyを使ってnodeのmodule/requireを使えるようにする


# npmでパッケージ管理

gemで対応できることもありますが、まずはnpmから直接いれるバージョンでいく。

まずnpmがないと困るので入れる。

```
brew install npm
```


次にnpmの初期化で、npm initでもいいが今回はpackage.jsonを下記のように作成。

```:package.json
{
  "name": "something",
  "dependencies": {
    "react": "^0.13.3"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  },
  "devDependencies": {
    "babelify": "^6.3.0",
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "coffee-script": "^1.10.0",
    "glob": "^5.0.14",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.2.1",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "scripts": {
    "start": "gulp watch & rails s"
  }
}

```
個々のライブラリの説明はいったん省略。動くとこまでやってから個々で調べてみるとよい。


# gulpでビルドコマンドをつくる

## gulpとは

> The streaming build system 
[gulpjs/gulp](https://github.com/gulpjs/gulp)

とあるように、nodeのstreamをつかったビルドシステム。
gulp buildとかgulp watchとかtaskを作成できる。

## gulpfile作成


```coffeescript:gulpfile.coffee
gulp = require 'gulp'
babel = require 'gulp-babel'
browserify = require 'browserify'
source = require 'vinyl-source-stream'
glob = require 'glob'

gulp.task 'build', ->
  files = glob.sync './frontend/javascripts/**/*.{js,jsx,coffee}'
  browserify
    entries: files,
    debug: true
  .transform 'babelify'
  .bundle()
  .pipe source 'bundle.js'
  .pipe gulp.dest 'app/assets/javascripts/components'

gulp.task 'watch', ->
  gulp.watch('./frontend/javascripts/**/*.{js,jsx,coffee}', ['build'])

gulp.task 'default', ['build']
```

ざっくり説明するとbabelで6to5変換、browserifyでnodeのmoduleをクライアントでも使えるようにして、`frontend/javascripts/`以下のファイルを, `app/assets/javascripts/components`のbundle.jsファイルにコンパイルしている。

# jsxファイルをfrontend/javascript/components/以下に移動

```javascript:HelloWorld.jsx
'use strict';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
      </div>
    );
  }
}

window.HelloWorld = HelloWorld;

```


`class -- extends` や `method() {}`はES6記法。

window.HelloWorldと、グローバルに配置しているのは、

```ruby:index.html.erb
<%= react_component('HelloWorld') %>

```


react-railsの`react_component`ヘルパーを使ってrenderingしているため、そうしないとヘルパー内で参照できないから。ここはあんまりしっくり来ないけどとりあえずこれでいく。

# gulp buildでコンパル

もう準備はほぼ完了。

```
$ gulp build 
```


とコマンドを打つと

```
$ gulp build
[23:51:36] Requiring external module coffee-script/register
[23:51:38] Using gulpfile ~/work/react/react-rails-browserify-es6/gulpfile.coffee
[23:51:38] Starting 'build'...
[23:51:39] Finished 'build' after 1.38 s

```

となりビルド完了。app/assets/javascripts/components/bundle.jsにコンパイル後のコードが吐出される。多少まだ読める状態なので一度見てみるとes5でどう書かれるかわかっておもしろいかも。

# 確認

あとはいつもどおり

```
rails s
```
からの
```
open http://localhost:3000
```

で「Hello World!」 と見れたら終了。お疲れ様でした。


ちなみにbrowser-railsのgemを使ったバージョンも一応別ブランチで作成したので、ご参考まで。詳細は別途。

[takayukishmz/react-rails-browserify-es6 at browserify_rails](https://github.com/takayukishmz/react-rails-browserify-es6/tree/browserify_rails)


es6化といいつつ、es6の記述がほぼないですが、この環境下であれば使用可になってます。

# 参考

* [Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート](http://yachibit.hateblo.jp/entry/2015/05/22/011323)
* [RailsでReactを動かしてみる (browserify + watchify + reactify) - Qiita](http://qiita.com/ysm001/items/d07c4dcfe88793cd55b6)
* [RailsBrowserify/application.js at master · Tybi/RailsBrowserify](https://github.com/Tybi/RailsBrowserify/blob/master/app%2Fassets%2Fjavascripts%2Fapplication.js)
* [rails_react_alt_sample_blog/components.js at master · fertaku/rails_react_alt_sample_blog](https://github.com/fertaku/rails_react_alt_sample_blog/blob/master/app%2Fassets%2Fjavascripts%2Fcomponents.js)