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
React導入時の苦労話とこれからについて
Search
Hiroki Yamamoto
May 23, 2017
Programming
4
6.8k
React導入時の苦労話とこれからについて
2017/5/23 ヒカラボ 「大規模サービスがリスクをとってまでモダンな開発環境にリプレイスした理由~ここだけの苦労話や手法を交えお話します~ 」での発表資料です。
Hiroki Yamamoto
May 23, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
190
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Discover Metal 4
rei315
2
140
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
860
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Featured
See All Featured
It's Worth the Effort
3n
185
28k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Rails Girls Zürich Keynote
gr2m
95
14k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Six Lessons from altMBA
skipperchong
28
3.9k
The Language of Interfaces
destraynor
158
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
3FBDUಋೖ࣌ͷۤ࿑ ͱ͜Ε͔Βʹ͍ͭͯ גࣜձࣾΤχάϞ ࢁຊߒو ώΧˑϥϘ
BUYMA について ファッション系のCtoC ECサービス 海外の出品者と国内の購入者をつなぐ https://www.buyma.com/
• サービス開始から10年以上 • PHP & Rails (移行中) • コミットログ見るとすごい古いのがある
アジェンダ • React導入の経緯 • 導入時の辛み • 非SPAなReact • レガシーブラウザ対応 •
ビルド高速化 • これからの課題
3FBDUಋೖͷܦҢ
React導入の経緯 • お問い合わせ機能リプレース案件 • チームはエンジニア3人 + α • 超レガシーなPHP ⇢
Rails + React
技術スタック • React • Redux • Babel • Webpack •
Gulp • Rails(API)
ಋೖ࣌ͷਏΈ
• 大規模なサービスに部分的に取り入れる際の知見が少 ない • React領域と非React領域のデータ連携 • レガシーブラウザ対応がつらい • IE9 •
Androidの標準ブラウザ
非SPAなReact
非SPAなReact ϔομʔ α Π υ ό ʔ 3FBDUྖҬ
React領域と非React領域の連携 ϔομʔ α Π υ ό ʔ 3FBDUྖҬ ͬͪ͜Ͱ ͷมߋΛ
React領域と非React領域の連携 ϔομʔ α Π υ ό ʔ 3FBDUྖҬ ͑Δ ͑Δ
例えば… • 未読メッセージ数 • メッセージを読み終わったら未読数を減らしたい! • 既読にする、未読に戻す機能で増減させたい!
Redux Middleware + jQuery で解決
• データのフェッチや更新アクションで処理を挟み込む • APIの返り値で未読数を受け取る • ついでにStoreも更新する K2VFSZͰඇ 3FBDUྖҬΛߋ৽ 4UPSFΛߋ৽͢Δ ΞΫγϣϯΛൃߦ
• Middlewareに処理を隔離できた • jQueryはできれば使いたくなかった
レガシーブラウザ対応 • 基本はBabelでES5にトランスパイルしている • だがES5が動かないブラウザがある • というか Android4.0標準ブラウザ ← こいつ
のこと
対応しなければならない辛い理由 お問い合わせ以外の機能ではレガシーブラウザでも動く。 BUYMAでは商品購入⇢出品者と購入者の問い合わせ⇢ 取引完了というフローなので、問い合わせが出来ないと取 引完了までのフローが止まってしまう。
どう対応したか • 必要最低限の問い合わせ機能を揃えた非Reactページ (通称:普通ページ)を用意 • ブラウザを判定して普通ページにリダイレクト
ブラウザ判定部分 • ES5のAPIや関数が存在しない • API実行してエラーになる
反省点 • 予めどのブラウザをサポートするかビジネス側と合意を 取るべきだった • リリース後に発覚して急いで実装した • セキュリティ面でもレガシーすぎるブラウザはサービス 全体でシャットアウトすべき
ϏϧυߴԽ
エントリーポイントの増加 お問い合わせ機能以外にもWebpackが使用されることが 増え、エントリーポイントが増加している
エントリーポイントの増加
ビルド所要時間: 11秒
解決方法 • WebpackDllPlugin • HappyPack
WebpackDllPlugin
WebpackDllPlugin • 予め外部モジュールを別のBundleとして切り出す • メインのBundleはDllReferencePluginで参照 • https://github.com/webpack/docs/wiki/list-of- plugins#dllplugin
WebpackDllPlugin • 予めビルドしておくことで毎回ビルドしなくて済むためビ ルド時間が短縮できる! • サイズの大きいライブラリを共通ファイルとして切り出せ るのでトータルのファイルサイズが小さくなる! (CommonChunkPluginと同様の効果)
HappyPack
HappyPack • ビルド高速化用プラグイン • 複数のワーカースレッドでビルドする • 変更されたファイルのみビルドする • https://github.com/amireh/happypack
ビルド所要時間: 6秒 結果!
ࠓޙͷ՝
• エントリーポイント増加 • ライブラリのバージョン追従
エントリーポイントの増加 • 今後もエントリーポイントは増え続ける • ビルド高速化にも限度 • ドメインごとに分割してビルドする? • デプロイが複雑化しそう •
webpack.config.jsの管理が大変そう
ライブラリのバージョン追従 • 愚直に上げていくしか無い • 誰かやるだろうでは誰もやらない • 強い気持ちと仕組みが必要
ײ
• 古き良き片手間JavaScriptの時代は終 わった • フロントエンドの専門家が必要とされる時 代
We are hiring!