Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails+webpackの落ち穂拾い
Search
Yuki Kodama
June 10, 2016
Programming
0
1.8k
Rails+webpackの落ち穂拾い
Railsでwebpackによるビルド環境を整備した際の苦労話です。
Yuki Kodama
June 10, 2016
Tweet
Share
More Decks by Yuki Kodama
See All by Yuki Kodama
マイクロフロントエンドの現状確認
kuy
0
450
Reason
kuy
1
2.3k
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.6k
redux-sagaで副作用をコントロールする
kuy
4
1.6k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
570
Other Decks in Programming
See All in Programming
効率的な開発手段として VRTを活用する
ishkawa
0
140
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
PipeCDのプラグイン化で目指すところ
warashi
1
280
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Docker and Python
trallard
44
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
KATA
mclloyd
30
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
For a Future-Friendly Web
brad_frost
179
9.8k
Why Our Code Smells
bkeepers
PRO
336
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Transcript
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ファイルと同じ方法で解決できないか検討中 まだまだ俺たちの戦いは(ry
Thank you!