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公式 プロパティを使用した子コンポーネントへのデータの受け渡し とおなじ )
  

背景

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

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

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

かといって、アロー関数やクラスを使えない世界に戻るのはいやなので、ES6で書きたいしな・・と思っていたところ、Sprocketsのdocumentに ES6 Supportという文字列を発見。これは！と思い、ES6が使えるかどうかを試したらさくっとできました。簡単。

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

環境

• Rails 6 (with Sprockets 4)（Sprockets 4はdefault設定で入ります！）

コード

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

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公式 プロパティを使用した子コンポーネントへのデータの受け渡しそのままです。

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でいいやとも思うので追求しなかった）