このページででてくるキーワードの公式ページです

rails
webpacker
foreman
jquery
yarn
ruby

それっぽいところを探してみましたが間違ってたらコメントください

webpacker(https://github.com/rails/webpacker) は webpackのヘルパーです
railsでwebpack を使いやすくしてくれます
既に々なところで解説されていますが、私も使ってみたので残しておきます

なんか流行ってるようなので一応かじっておこう
使用してる現場もチラホラ

私はjQueryぐらいしか使わないんですけど

手持ちの mac と windows 両方の環境で試してみました
すでにあるプロジェクトに導入するときのほうがつまづきそうなので
rails new した後にwebpackerを導入する感じで実施してます

1
2
3
4

$ sw_vers
ProductName:  Mac OS X
ProductVersion: 10.12.6
BuildVersion: 16G1314

1
2
3

windows 10 Home 64bit
vagrant 2.0.2
CentOS Linux release 7.5.1804 (Core)

公式によると

1
2
3
4
5

Prerequisites
  Ruby 2.2+
  Rails 4.2+
  Node.js 6.0.0+
  Yarn 0.25.2+

らしいので、これ以上になる環境を作っておきます
私の場合は

1
2
3
4
5
6
7
8

$ ruby -v
ruby 2.4.3p205 (2017-12-14 revision 61247) [x86_64-darwin16]
$ rails -v
Rails 5.2.0
$ yarn -v
1.7.0
$ node -v
v10.3.0

1
2
3
4
5
6
7
8

$ ruby -v
ruby 2.4.3p205 (2017-12-14 revision 61247) [x86_64-linux]
$ bin/rails -v
Rails 5.1.6
$ yarn -v
1.7.0
$ node -v
v6.14.2

上記の環境で以下手順が動作することを確認しています

1
2

$ rails new sample
$ cd sample

gem 'webpacker' をGemfileに追加して

1
2

$ bin/bundle
$ bin/rails webpacker:install

$ yarn add jquery

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> を
<%= javascript_pack_tag 'application' %> に置換

以下を追加してjQueryのグローバル変数を使用可能にします
global.$ = global.jQuery = require('jquery');

1
2

$ bin/rails g scaffold user name:string
$ bin/rails db:migrate

app/views/users/index.html.erb に

1
2
3
4
5

<script type="text/javascript">
  $(document).ready(function() {
    alert('foo').text());
  });
</script>

とか書いてみる

1
2

$ bin/rails s -b 0.0.0.0 -p 3000
$ bin/webpack-dev-server # 別のコンソールで

http://localhost:3000/users
foo ってアラートが出たら成功

Gemfile に gem 'foreman' を追加して
Rails.root/Procfile を作成し、以下のように記述します

1
2

rails: bin/rails s -b 0.0.0.0 -p 3000
webpack: bin/webpack-dev-server

1

$ bin/bundle exec foreman start

1
2

$ RAILS_ENV=production bundle exec rails assets:precompile
$ RAILS_ENV=production bundle exec rails webpacker:compile

vagrantなどの仮想環境を使用している場合、webpack-dev-server用の
hostとport設定が必要なコトがあります
ブラウザのコンソール上に「通信できねぇ」的なエラーが出ている場合は
そこを疑ってみるのも
私のVagrantfileは

1
2

config.vm.network "forwarded_port", guest: 3000, host: 3000 # rails server 
config.vm.network "forwarded_port", guest: 8881, host: 8881 # webpack-dev-server

としていたので config/webpacker.yml を以下のように設定しました

1
2
3

host: 0.0.0.0
port: 8881
public: 0.0.0.0:8881

やってしまえば手順も手数も大したことないのですが、初めて設定した時は結構時間がかかりました
私のような小規模サイトで「jQuery使いたいだけ」だとまったくありがたみはないですね:thinking:
jQuery公式からダウンロードする方法で充分です

公式に用意されている React,Angular,Vue などを使用した大規模サイトだと恩恵が受けられるのでしょうか
常に最新版を使用するようなオプションもあるようです
本番環境で使い込むにはきっちりコストをかけて学習した方が良さそうですね

「JQuery依存からの脱却」は別にいいんですけど、フロントとの依存関係 というかスパゲッティ度はさらに加速したと感じます
なんでサーバーサイドでこんなもん管理しなきゃならんのだ？と元Flash開発者は思いました。

また、webpackerがなくても環境作れるようにはしておきたいですね
フロントとバックの分断はこれからもっと進んでいくでしょうし
そうなれば環境はもっと小さく個別に自由に作れるようになるんじゃないかな

と、おもった。