Rails+webpackの落ち穂拾い @kuy / Yuki Kodama 2016/06/10 at Modern Web App LT!

自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ entrepedia（アントレペディア）の開発・運用 AWS, Ruby on Rails, JavaScript (React + Redux) ● redux-sagaで非同期処理と戦う ● Reduxでコンポーネントを再利用する ● Reduxのmiddlewareを積極的に使っていく ● ・・・など Qiita の記事 発表 ● なぜReduxを使うのか

Rails + webpack 構成への移行（2週間前） 一筋縄ではいかなかった ↑ 思ったよりしょぼいな・・・

妥協点 ● assetsのファイル数が多すぎて移行できる気がしない ● gemで提供されているjQuery、関連ライブラリどうしよう ● モバイル版のこと忘れてた これ、終わらないよ？

何が目的だったのか思い出す ● デプロイ時間の短縮 ● レガシーコードの駆逐 ● レガシーライブラリへの依存解消 ● フロントエンド向けの自動テストの導入

デプロイ時間の変化 Rails標準の構成：10分程度 browserify-rails導入：15分程度 Babel+React+Redux導入：45分程度

妥協点 ● assetsのファイル数が多すぎて移行できる気がしない ○ → 今後メンテナンスをする複雑な機能に絞って移行 ○ → 243個のJSファイルのうち187個のみ ○ → CSSと画像ファイルはほぼ移行せず ● gemで提供されているjQuery、関連ライブラリどうしよう ○ → jQuery UIとか可能な限り削除した ○ → 移行メリットの薄いものは放置現状維持 ● モバイル版のこと忘れてた・・・ ○ → pure.css + 最小限のJSを維持（超軽量）

デプロイ時間の変化 Rails標準の構成：10分程度 browserify-rails導入：15分程度 Babel+React+Redux導入：40分程度 webpack-rails導入：10分程度（最速 2分以内） 快適なデプロイ時間を取り戻した！ browserify-rails にお引き取りいただいた結果・・・

やっとこ落ち穂拾い

落ち穂拾い #1：I18n Reactコンポーネントの国際化どうしよう I18n.t(...) みたいなやつ使いたい ● Gemの i18n-js を試してみた ○ Middlewareレベルで特定JSファイルの読み込みを横取りしてヘルパーと localeデータを流し込む方式 ○ i18n.jsは読み込まれるけど、translations.jsがダメ ○ Rails Middlewareの処理順をカスタムしてる人にはつらい もっとシンプルなやり方でいいんじゃない？

落ち穂拾い #1：I18n chrome/webpack-rails-i18n-js-plugin を利用 ● ヘルパー関数は Gem の i18n-js のものを利用 ● やってることが単純なので最悪自作すればいい ● Gemを増やさずに済んだ webpackのビルドが走ったらlocaleファイルを読み込んで 共通bundleに追加してくれればいい（webpack側に寄せる）

落ち穂拾い #2：画像ファイルパス Reactコンポーネントでassetsの画像を表示したい image_tagを使いたい（ハッシュ付き） ● とりあえずは必要な画像パスだけscriptタグにJSONで書き出し ● localeファイルと同じ方法で解決できないか検討中 まだまだ俺たちの戦いは（ｒｙ

Thank you!