概要
Sprockets 4ならES6もつかえるよ。開発環境構築楽ちんだし、さくっとjavascript書きたい & SPAをやらないなら、Sprocketsおすすめ。
利点
docker-composeの構成がすごいシンプルになるので開発環境構築でつまずくことないのが最大の利点。
（web-dev-server、ちょこちょこはまるので苦手）
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
- こんなかんじの画面が表示されます ( 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' を追加する
module SprocketsEs6
class Application < Rails::Application
config.assets.paths << Rails.root.join('node_modules') # これを追加
manifest に ES6を追加
以下の2行を追加する。javascriptsフォルダ配下にjavascriptを書いている場合。
javascriptを違うフォルダで書いている場合は、それぞれ追加してください 。
//= link_directory ../javascripts .js
//= link_directory ../javascripts .es6
Vueをインストール
以下のコマンド （docker なら docker-compose exec web yarn add vue ）を打つ。
yarn add vue
package.jsonにvueが追加されます。
{
"dependencies": {
"vue": "^2.6.11"
}
}
Vue動作確認
Vue公式 プロパティを使用した子コンポーネントへのデータの受け渡しそのままです。
<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' %>
//= 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でいいやとも思うので追求しなかった）