Rails + ES6 + Marionette.js

# (追記) 注意

この方法で Marionette.js のアプリケーションを実装していると、参照の問題が発生し、AppRouter が起動しないなどの不具合に遭遇しました。
Marionette.js が参照している Backbone と `import Backbone from 'backbone';` した Backbone がそれぞれ別のオブジェクトを参照してしまっているようです。

そのため結局は Gem browserify-rails を使う方法を諦め、
npm で Gulp と Browserify をインストールして、それらで ES6 をトランスパイルする方法に切り替えました。

この記事は残しておきますが、個人的には以下の方法は **非推奨** とさせてください。

# はじめに

**Marionette.js、Module 廃止するってよ。**

[Marionette.Module](http://marionettejs.com/docs/v2.4.3/marionette.module.html) に以下の記述がありました。

> Marionette.Module is deprecated, and is scheduled to be removed in the next major release of the library. Instead
of Marionette.Module, you should use AMD/CommonJS/ES6 for modularity. A Marionette.Module shim is available if necessary after its removal.

せっかくなので ES6 の module が使いたいですね。

# 目的
Rails で Marionette.js を ES6 で書くため環境を構築する。

# 手順

## 01. Gem browserify-rails のインストール

今回肝となるのが [browserify-rails](https://github.com/browserify-rails/browserify-rails) という Gem です。
この Gem を使うことで Rails に [Browserify](http://browserify.org/) の機能を導入できます。さらに [Babelify](https://github.com/babel/babelify) (Browserify 用の Babel 変換ライブラリ) を併用することで ES6 のトランスパイルも行えます。

まずは Gemfile に browserify-rails を追加して `bundle install` しましょう。

```:Gemfile
gem 'browserify-rails', '~> 1.5.0'
```

```
$ bundle install
```

次に application.rb に以下の行を追加します。

```config/application.rb
config.browserify_rails.commandline_options = '-t babelify'
```

## 02. 各種 JavaScript パッケージのインストール

package.json を手動で作成するか `npm init` で作成するかで方法を分けています。

### 方法 1

package.json を手動で作成して `npm install` します。

```package.json
{
  "name": "",
  "description": "",
  "license": "MIT",
  "engines": {
    "node": "^4.1.1"
  },
  "repository": {},
  "dependencies": {
    "babelify": "^6.3.0",
    "backbone": "^1.2.3",
    "backbone.marionette": "^2.4.3",
    "browserify": "^11.2.0",
    "browserify-incremental": "^3.0.1"
  }
}
```

```
$ npm install --save
```

ちなみに [browserify-incremental](https://www.npmjs.com/package/browserify-incremental) は、ファイルの更新を監視して差分だけビルドするためのライブラリです。

### 方法 2

package.json を手動で作成せずに `npm init` で package.json を作成した後で `npm install` します。

```
$ npm init
$ npm install browserify browserify-incremental babelify backbone backbone.marionette --save
```

## 03. application.coffee (application.js) の編集

まず Marionette.Application を起動するだけのコードを ES6 で書きます。

```app/assets/javascripts/backbone/app.js
'use strict';

import Marionette from 'backbone.marionette';

let App = new Marionette.Application();

App.on('start', () => {
  alert('Marionette.Application has launced!');
});

App.start();
```

次に app/assets/javascripts/application.coffee (application.js) を以下のように編集します。

```app/assets/javascripts/application.coffee
#= require jquery
#= require jquery_ujs

$ -> require('./backbone/app')
```

Sprockets で require するものは最小限にとどめ、基本的に node_modules から require あるいは import するようにします。

これで完成です。

## 04. 動作確認

後は適当なコントローラを実装して Rails を起動し、http://localhost:3000/ にアクセスしてみましょう。
alert が表示されれば成功です。

<img width="532" alt="スクリーンショット 2015-10-23 10.39.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/6697/4933ca1e-0f15-239a-38a9-76e13cac639c.png">

# まとめ

今回は browserify-rails を導入して ES6 で記述した Marionette.Application が起動するところまで確認しました。
複雑な設定無しで ES6 の開発ができるのはとても便利ですね。

# 参考

* [React.js を使いたい Rails おじさんが JavaScript ライブラリをそれっぽく管理しながら入門する](http://ppworks.hatenablog.jp/entry/2015/08/10/212937)
* [Getting started with Browserify and Marionette.js](
http://www.pabloanabalon.com/blog/getting-started-browserify-marionette)