Sprockets 4 なら ES6書けるよ

# 概要
Sprockets 4ならES6もつかえるよ。開発環境構築楽ちんだし、さくっとjavascript書きたい & SPAをやらないなら、Sprocketsおすすめ。

# 利点
docker-composeの構成がすごいシンプルになるので開発環境構築でつまずくことないのが最大の利点。
（web-dev-server、ちょこちょこはまるので苦手）

```docker-compose.yml
version: '3'
services:
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
      - bundle_path:/usr/local/bundle:cached
    ports:
      - "3001:3000"
    environment:
      - BUNDLE_PATH=/usr/local/bundle
volumes:
  bundle_path:
    driver: local
```

# すぐに試したい方

```
docker-compose build
docker-compose run --rm web bin/setup
docker-compose run --rm web yarn install
docker-compose up -d
```

Open http://localhost:3001/

* こんなかんじの画面が表示されます ( Vue公式 [プロパティを使用した子コンポーネントへのデータの受け渡し](https://jp.vuejs.org/v2/guide/components.html#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E5%AD%90%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%B8%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E5%8F%97%E3%81%91%E6%B8%A1%E3%81%97) とおなじ )
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124445/86225ea4-0241-d4c0-0f37-bf04595a08d6.png)


# 背景
普段DockerでRailsアプリを開発しています。web-dev-serverをたてて、、、みたいなよくある構成を組むのですが、あれ、複雑すぎません？

SPAをつくるなら、気合い入れて頑張る価値もある。でも、jQueryでいいようなWebアプリだと、webpackerはtoo much。1からアプリを作る時は、必ずwebpackerにはまる。

個人的には、webpackerがRails初心者のJavascript嫌いを増やしているのではと思います。

かといって、アロー関数やクラスを使えない世界に戻るのはいやなので、ES6で書きたいしな・・と思っていたところ、Sprocketsのdocumentに [ES6 Support](https://github.com/rails/sprockets#es6-support)という文字列を発見。これは！と思い、ES6が使えるかどうかを試したらさくっとできました。簡単。

せっかくなので、ES6の導入記事を書きます。あと需要ありそうなので、Vueの導入もやったのそちらも参考になれば。

# 環境
* Rails 6 (with Sprockets 4)（Sprockets 4はdefault設定で入ります！）

# コード
https://github.com/junara/sprockets_es6

commit差分です。こちらがよりわかりやすいかと思います。
https://github.com/junara/sprockets_es6/commit/d17139a3ff662d308847c4710490ca051b912c0f

# 手順
以下の手順です。既に入っている箇所も思います（特に `assets pathに 'node_modules' を追加する` とか）。

適宜スキップしてください。

* babel-transpiler gemを入れる
* assets pathに 'node_modules' を追加する
* manifest に ES6を追加
* Vueをインストール
* Vue動作確認

## babel-transpiler gemを入れる
https://github.com/rails/sprockets#es6-support こちらを参考に行います。
以下を追加して、 bundle installする。

* Gemfile

```Gemfile
gem 'babel-transpiler'
```

## assets pathに 'node_modules' を追加する

```config/application.rb
module SprocketsEs6
  class Application < Rails::Application

    config.assets.paths << Rails.root.join('node_modules') # これを追加
```

## manifest に ES6を追加
以下の2行を追加する。javascriptsフォルダ配下にjavascriptを書いている場合。
__javascriptを違うフォルダで書いている場合は、それぞれ追加してください__ 。

```app/assets/config/manifest.js
//= link_directory ../javascripts .js
//= link_directory ../javascripts .es6
```

## Vueをインストール

以下のコマンド （docker なら `docker-compose exec web yarn add vue` ）を打つ。

```
yarn add vue
```

package.jsonにvueが追加されます。

```package.json
{
  "dependencies": {
    "vue": "^2.6.11"
  }
}
```

## Vue動作確認

Vue公式 [プロパティを使用した子コンポーネントへのデータの受け渡し](https://jp.vuejs.org/v2/guide/components.html#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E5%AD%90%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%B8%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E5%8F%97%E3%81%91%E6%B8%A1%E3%81%97)そのままです。

```app/views/home/home.html.erb
<div id="components-demo">
  <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
</div>
<%= javascript_include_tag 'home' %>
```

```app/assets/javascripts/home.es6
//= require vue/dist/vue
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

new Vue({
  el: '#components-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})
```

ポイントは
`//= require vue/dist/vue` でvueを読み込むところと
`<%= javascript_include_tag 'home' %>` でes6 javascriptファイルを読み込むところです。


以上です。

# （たぶん）できないこと
ためしてみて、動かなかった。

* import, export
   * `import User from './user.es6'` みたいなのができない。
   * `//= require ./user` で読み込んでください
* `.vue` ファイルが使えない
    * がりがり書くにはちょっとつらい
    * なお、Babel を設定すれば使えばできるのかも。（そこまで書くなら webpakckerでいいやとも思うので追求しなかった）