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
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Docker and Python
trallard
44
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Navigating Team Friction
lara
187
15k
Embracing the Ebb and Flow
colly
86
4.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Statistics for Hackers
jakevdp
799
220k
A designer walks into a library…
pauljervisheath
207
24k
Being A Developer After 40
akosma
90
590k
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!