ただのにっき

■ sprockets + rails-assetsを卒業して、npm + webpackへ移行

1年少々前、Webアプリのフロントエンド開発環境として暫定的にRails Assetsを使うことにしたのだけど、あれからjs界隈もしだいに落ち着いてきて*1、いろいろと勝ち組っぽいツールが決まってきた気がする。

そんなわけで、徐々にそっち方向へ移行してこうかな、と。とくにRails Assetsはサービス自体が終了の方向らしいので、まずはそのへんから。jsのパッケージマネージャとタスクランナーの勝ち組として、おれの観測範囲でみえてる感じだと:

• パッケージはpackage.jsonをnpmで管理するのが一番シンプル
• タスクランナーもnpmでいいよもう……という流れが強そう
• AltJSは使わずにES2015、ビルドにはWebpackとBabelの組み合わせ

ってところか? 少し前に話題になった「10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）」にだいたい同意だわ。

とりあえず自前のWebアプリの雛形用に作ってあるsinatra_skeletonをベースに改造。公式ドキュメントでよくわからんところは以下の記事を参考にした:

• タスクランナーを使わずに webpack だけでフロントエンド開発する方法
• Webpackでイチから作るReact.js開発環境

ローカル環境で動かすのはわりと簡単にいけたんだけど、これをHerokuに持っていくのに少し苦労した。具体的にはWebpackによるビルドを(ビルド後のファイルをリポジトリに入れることなく)、Heroku上で実行させたい。

まずは現状buildpackとしてheroku/rubyのみのところに、heroku/nodejsを追加:

  % heroku buildpacks:add heroku/nodejs

これに加えてpackage.jsonでは通常developに依存するように書くBabelやWebpack関連パッケージもぜんぶproductionに入れてしまうことで、これらが全部インストールされる。

あとはデプロイ後に「webpack -p」が実行されればいいんだけど、Herokuでこういうファイル生成系のアクションをするのはけっこうめんどい。一番スマートにやるのはwebpack用のbuildpackを作ることなんだけど(じっさいいくつか実装が公開されている)、そこまでの話じゃないよなぁと思ったので、こんなbin/run.shを書いて:

  #!/usr/bin/env bash
  npm run production
  bundle exec puma -C config/puma.rb

Procfileでこれを指定した:

  web: ./bin/run.sh

ひどい手抜きである。が、充分実用的だ。Webpackのビルドが遅いのでHeroku appの起動に時間がかかるのが難点だけど(←わりと問題だと思うが当面は気にしない方向)。

そんなわけで、雛形は移行できた。プルリクという形で作業内容が残るのは良いな。引き続き既存アプリを移行していこう。

なお、jQueryは主にAjaxのために使ってるけど、これは代替品を探さないと(axios?)。jQueryプラグインへの依存も徐々に減らして自前で実装するかね(Reactだとそれも簡単そう)。

残るはテストとUIだけど、それはおいおい。UI方面はBootstrapはもうやめて、Material DesignとCSS3使って自力でやった方がいい気がしてる。