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
Yoshitaka Terazawa
November 01, 2019
Technology
0
730
Reactでリプレースして爆速になったのでちょっと仕組み公開
「大人のレストランガイド」をSSR+BFF(Next.js+React+Redux+TypeScript)で
リプレースした際の取り組みについて一部公開します
Yoshitaka Terazawa
November 01, 2019
Tweet
Share
More Decks by Yoshitaka Terazawa
See All by Yoshitaka Terazawa
Which is the best option for linting: Pre-commit or CI?
locol23
1
230
Introduction to React
locol23
0
54
Introduction to Scrum
locol23
0
280
ざっくりReact Fiberまとめ
locol23
0
250
Other Decks in Technology
See All in Technology
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
220
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
440
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
160
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
420
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
410
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Music & Morning Musume
bryan
46
6.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
Reactで リプレースして 爆速になったので ちょっと仕組み公開
About me • Yoshitaka Terazawa • Twitter/Qiita: @locol23 • 株式会社◯る◯び
• Frontend Engineer • React界隈で活動 ◦ Meetupスタッフ、翻訳PJ参加等 • k8s勉強中 • 最近気になる ◦ Apple AirPods Pro
About me kusumoto-t • 株式会社ぐ◯な◯ • Java:5年(struts1世代) • PHP:3年 •
Python:6ヶ月 • TypeScript:6ヶ月 • Node.js:4ヶ月 • Go勉強中... • qiita:https://qiita.com/kusumoto-t ↑嫁が描いてくれた 決してこんな描ける能力はない
「大人のレストランガイド」 https://nikkei.gnavi.co.jp/
SpeedCurve結果 1.0s リプレースで3秒から1秒に!
構成 • Next.js • React • Redux • TypeScript Next.jsで
SSR BFF Backend API SPA
今日言いたい事
データ設計の話 キャッシュの話
データ設計の話
銀座でお店を探そう
銀座でお店を探そう { restaurants: { list: [ { id: ‘id1’, area:
‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, area: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得
やっぱり新宿で探そう
やっぱり新宿で探そう { restaurants: { list: [ { id: ‘id3’, area:
‘新宿’, name: 'ボルシチ専門店' }, { id: ‘id4’, area: ‘新宿’, name: 'クラムチャウダー専門店' } ], }, } 新宿の検索結果を取得
良いお店がないから 銀座でやっぱり探そう
良いお店がないから 銀座でやっぱり探そう { restaurants: { list: [ { id: ‘id1’,
place: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, place: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得
良いお店がないから 銀座でやっぱり探そう { restaurants: { list: [ { id: ‘id1’,
place: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, place: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得 同じデータを 再取得していて無駄!
データの 正規化で解決!
データの正規化 • データを使い回ししやすい形で保存すること ◦ 取得済みデータを使いまわし、APIコール数削減 • 詳しくはRedux公式「Normalizing State Shape」参照 https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#normalizing-state-shape
銀座でお店を探そう
銀座でお店を探そう { areas: { 銀座: ['id1', 'id2'], }, restaurants: {
id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' } } }, 銀座の検索結果を取得
やっぱり新宿で探そう
やっぱり新宿で探そう { areas: { 銀座: ['id1', 'id2'], 新宿: [‘id3’, ‘id4’]
}, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' }, id3: { id: 'id3', name: 'ボルシチ専門店' }, id4: { id: 'id4', name: 'クラムチャウダー専門店' } } }, 新宿の検索結果を取得
良いお店がないから 銀座でやっぱり探そう
良いお店がないから 銀座でやっぱり探そう { areas: { 銀座: ['id1', 'id2'], 新宿: [‘id3’,
‘id4’] }, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' }, id3: { id: 'id3', name: 'ボルシチ専門店' }, id4: { id: 'id4', name: 'クラムチャウダー専門店' } } }, 銀座の検索結果は 取得済みなので再利用
良いお店がないから 銀座でやっぱり探そう 銀座の検索結果は 取得済みなので再利用
キャッシュの話
Varnish Cache
None
加速! 暇だなぁ...
加速! 暇だなぁ... サーバA サーバB
加速! 暇だなぁ... 早えな
でも気をつけて!!
ニホンゴ ワカリマセン
None
公式みてね❤
まとめ
今回はデータ設計とキャッシュ設計について 紹介しましたが、より詳細な点や、 お話できていない他の取り組みもありますので、 懇親会でお話出来ればと思います!
We’re hiring!! フロントエンド募集してま す! https://corporate.gnavi.co.jp/recruit/