Railsにfrontendディレクトリを導入しwebpackとVue.jsを導入しまた話になります。

1. 古き良きRailsプロジェクトに
wepbackとVue.jsを導入した話
Yuya Taki

2. self.inspect
[1] https://github.com/muramurasan/okuribito
➢ gemのロゴを書いたり・・・
➢ たまにQiitaの記事を書いたり・・・
➢ 新卒で某SIerに入社したのあと、渋谷のベン
チャー企業にてRuby on Railsを学び、2016年10
月エネチェンジに入社。
➢ なぜかPaypal、ベリトランス、SMBC、YDSなど決
済周り、請求周りを実装することが多い。
➢ 最近、ちょくちょくお客様先に行くこともあり。
Name : Yuya Taki
GitHub : yuyasat
Qiita : yuyasat
[1]
若輩者ですので、何卒優しくご教授いただけ
ればと思います。
（commitはしていない）
➢ 初めて勉強会で喋ります。
➢ フロントエンドとかあまり詳しくないで
す！

3. Web版（React.js実装）：
https://poject.herokuapp.com/
Android版（Java実装）：
https://play.google.com/store/apps/details?id=yuyasat.pojectandr
oid&hl=ja（PojectAndroidで検索）
※とりあえず動くクソコードなので大目にみて
self.inspect（frontendに関連して）
➢ React.jsで実装したゲーム
➢ ４色繋げると消える、まるで◯よぷ◯のようなゲーム
➢ 自動で落ちてこないので、自由に連鎖を組める（ 崩珠）
➢ まるで昭和のゲームのよう

4. enechangeとは
➢ 2016年電力自由化・2017年ガス自由化に伴い、電気代やガス代を比較でき
るサービスを運営。
➢ 比較だけでなく、申し込みも受け付けている。
https://enechange.jp/

5. enechange.jpで使われているVue.jsたち
https://enechange.jp/orders/tepco/preapply?o=1https://enechange.jp/try/input https://enechange.jp/gas
try/input preapply gas

6. enechangeのfrontend状況
➢ Railsデフォルトのasset pipelineに乗っかっている
➢ Javascript
○ jQuery
○ ライブラリなどは職人が手で置いていく
➢ CSS
○ sassc-rails
○ compass
■ cf. compass-railsが導入されたRailsにsassc-railsを導入する

7. webpack・Vue.js導入の経緯
➢ ５月頃、このプロジェクト発足前に、preapplyの仕様がそこそこ複雑なので、
enechangeのfrontendをどうしようかという議論を行った。
➢ 開発期間が短いこともあり、既存の基盤のままいくことになった。
➢ ８月末、preapplyのfrontendの開発に着手した当初、jQueryで実装しようと試
みた。
➢ やや複雑な仕様の中、４時間ぐらい粘ったところで、Vue.jsを使えばもっとシン
プルに実装できるのにという思いが強まる。
➢ 誰にも相談することなく、Vue.jsで実装を始める。

8. preapplyでの仕様
https://enechange.jp/orders/tepco/preapply?o=1
https://enechange.jp/orders/tepco/preapply?o=2
ガス単独申し込みの場合は、従量
電灯Bでは申し込めないのでエラー
を出す
ガス・電気セット申し込みの場合は、既
契約が従量電灯Bの場合は、「契約プラ
ンを変更する」にセット スタンダードSで電気の契約プラン
を変更しようとすると、エラーを出
す
etc...
jQueryでの実装に挫折した！
電気料金プランにはいろんな区分けが
ありまして・・・
・規制プラン
・自由化プラン（新規申込可）
・自由化プラン（新規申込不可）
・アンペアブレーカ契約
・主開閉器契約
・実量制契約
ガスに申し込むには、電気は自由化プ
ランじゃないといけなく・・・

9. slackで相談
simchangeで実績があるということと、 try/inputでもVue.jsを利用しようとしていた
こともあり、意外にすんなり受け入れられた！

10. Vue.jsをどうRailsに組み込んだか
➢ vuejs-rails（gem）を使う
○ JSライブラリ自体のバージョンに追いついていけるか不安
➢ Webpackerを使う
○ enechangeは残念ながらまだRails 4.2
○ webpackをラップしている。webpackの進歩についていけるか不安
➢ frontendのエコシステムを利用する
○ npmで管理
rails
└── frontend
├── config
│ ├── development.js
│ └── production.js
├── package.json
└── src
└── javascripts
└── このディレクトリ以下に jsファイルを置いて行く。
・digest付与
・minify
sprockets
app/assets/javascripts/packed/
2015.11.29 WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する
ゆるやかにsprocketsを利用

11. もっとsprocketsから離れることもできる
rails
└── frontend
├── config
│ ├── development.js
│ └── production.js
├── package.json
└── src
└── javascripts
└── このディレクトリ以下に jsファイルを置いて行く。
・digest付与
・minify
sprockets
webpack-manifest-plugin
webpack.optimize.UglifyJsPlugin()
app/assets/javascripts/packed/
➢ digest付与はwebpack-manifest-pluginでできるし、minifyもUglifyJsPlugin使えばできるから
sprocketsはもういらないのでは。。
➢ とはいえ、jsが不要なところもあるし、 cssの方はasset pipelineに乗っかるのが便利だから sprokets
とのお付き合いは絶やす必要はないか。。
[1] Webpacker を使わずに webpack で頑張る
[1]

12. トランスパイルしたjsファイルどうする問題
➢ 現状enechangeではcommitしてしまっている。
➢ 開発者（デザイナ含む）開発環境でコマンド叩けるならcommitしなくても良さそ
う。
➢ Docker使っていれば、起動オプション等で入れ込めば良い。
● EC2上でnginx、unicornなどで本番環境に近い形で構成で開発
● rails serverを使う（postgresql、python serverなど自力でlocalに構築）
● Dockerを使う
（参考）enechangeの３つの開発環境
全開発環境のDocker化や開発者のfrontend
のリテラシーが高まれば、commitしないよ
うにしていきたい。
[1] https://twitter.com/_yasaichi/status/827495684295122945
[1]

13. webpackerも使ってみた
➢ 冒頭の◯よぷ◯風自作ゲーム（React.js実装）でwebpacker
を使ってみた。
➢ ほぼjsのアプリですが、Railsエンジニアとしての足掻きで、
Railsにのっけてあった。
webpacker版 : https://poject.herokuapp.com/poject_webpacker
➢ webpackの知識は必要。
➢ webpack使えば良いのでは。
➢ 継続して意義を考えていきたい。

14. 資料
2017.06.23 Webpacker is installed（Misoca）
2015.11.29 WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する
2017.03.02 Webpacker を使わずに webpack で頑張る
2014.12.05 Sprockets再考 モダンなJSのエコシステムと Railsのより良い関係を探す
2016.06.08 Rails 4.2でSprocketsを捨ててwebpackに移行する
2016.12.13 もし、僕らのRailsにSprocketsがなかったら
2017.01.10 Rails & Webpackerでフロントエンド開発環境を整える
2017.01.19 Rails5.1から追加されると噂の Webpackerを使ってReact.jsを動かす。
2017.03.27 Webpackerを使ったRailsでのJavaScript開発（Cookpad）
2017.05.31 Roppongi.rb #3 "Rails x Frontend-Tech"（Roppingi.rb）
2017.05.22 Railsフロントエンド技術の今とこれから
webpacker
2017.02.27 Rails5.1から導入されるwebpacker.gemは本当にRailsのフロントエンド開発に福音をもたらすのか ?
2017.10.21 Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト
試案〜

15. ご静聴ありがとうございました。