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
290
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
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
3
1.1k
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
520
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
240
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
140
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
140
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
210
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1.1k
Wasmのエコシステムを使った ツール作成方法
askua
0
170
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Applications with DynamoDB
mza
96
6.7k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Designing Experiences People Love
moore
142
24k
Code Review Best Practice
trishagee
72
19k
Thoughts on Productivity
jonyablonski
70
4.9k
Code Reviewing Like a Champion
maltzj
526
40k
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/