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
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
490
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
930
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
140
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
4k
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
5
3.6k
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
560
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Documentation Writing (for coders)
carmenintech
75
5k
Done Done
chrislema
185
16k
Typedesign – Prime Four
hannesfritz
42
2.8k
Writing Fast Ruby
sferik
629
62k
Thoughts on Productivity
jonyablonski
70
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Faster Mobile Websites
deanohume
310
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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/