Slide 1
Slide 1 text
Reactで
リプレースして
爆速になったので
ちょっと仕組み公開
Slide 2
Slide 2 text
About me
● Yoshitaka Terazawa
● Twitter/Qiita: @locol23
● 株式会社◯る◯び
● Frontend Engineer
● React界隈で活動
○ Meetupスタッフ、翻訳PJ参加等
● k8s勉強中
● 最近気になる
○ Apple AirPods Pro
Slide 3
Slide 3 text
About me
kusumoto-t
● 株式会社ぐ◯な◯
● Java：5年（struts1世代）
● PHP：3年
● Python：6ヶ月
● TypeScript：6ヶ月
● Node.js：4ヶ月
● Go勉強中...
● qiita:https://qiita.com/kusumoto-t ↑嫁が描いてくれた
決してこんな描ける能力はない
Slide 4
Slide 4 text
「大人のレストランガイド」
https://nikkei.gnavi.co.jp/
Slide 5
Slide 5 text
SpeedCurve結果
1.0s
リプレースで3秒から1秒に！
Slide 6
Slide 6 text
構成
● Next.js
● React
● Redux
● TypeScript
Next.jsで
SSR
BFF
Backend
API
SPA
Slide 7
Slide 7 text
今日言いたい事
Slide 8
Slide 8 text
データ設計の話
キャッシュの話
Slide 9
Slide 9 text
データ設計の話
Slide 10
Slide 10 text
銀座でお店を探そう
Slide 11
Slide 11 text
銀座でお店を探そう
{
restaurants: {
list: [
{
id: ‘id1’,
area: ‘銀座’,
name: 'ポトフ専門店'
},
{
id: ‘id2’,
area: ‘銀座’,
name: 'トムヤムクン専門店'
}
],
},
}
銀座の検索結果を取得
Slide 12
Slide 12 text
やっぱり新宿で探そう
Slide 13
Slide 13 text
やっぱり新宿で探そう
{
restaurants: {
list: [
{
id: ‘id3’,
area: ‘新宿’,
name: 'ボルシチ専門店'
},
{
id: ‘id4’,
area: ‘新宿’,
name: 'クラムチャウダー専門店'
}
],
},
}
新宿の検索結果を取得
Slide 14
Slide 14 text
良いお店がないから
銀座でやっぱり探そう
Slide 15
Slide 15 text
良いお店がないから
銀座でやっぱり探そう
{
restaurants: {
list: [
{
id: ‘id1’,
place: ‘銀座’,
name: 'ポトフ専門店'
},
{
id: ‘id2’,
place: ‘銀座’,
name: 'トムヤムクン専門店'
}
],
},
}
銀座の検索結果を取得
Slide 16
Slide 16 text
良いお店がないから
銀座でやっぱり探そう
{
restaurants: {
list: [
{
id: ‘id1’,
place: ‘銀座’,
name: 'ポトフ専門店'
},
{
id: ‘id2’,
place: ‘銀座’,
name: 'トムヤムクン専門店'
}
],
},
}
銀座の検索結果を取得
同じデータを
再取得していて無駄！
Slide 17
Slide 17 text
データの
正規化で解決！
Slide 18
Slide 18 text
データの正規化
● データを使い回ししやすい形で保存すること
○ 取得済みデータを使いまわし、APIコール数削減
● 詳しくはRedux公式「Normalizing State Shape」参照
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#normalizing-state-shape
Slide 19
Slide 19 text
銀座でお店を探そう
Slide 20
Slide 20 text
銀座でお店を探そう
{
areas: {
銀座: ['id1', 'id2'],
},
restaurants: {
id1: { id: 'id1', name: 'ポトフ専門店' },
id2: { id: 'id2', name: 'トムヤムクン専門店' }
}
},
銀座の検索結果を取得
Slide 21
Slide 21 text
やっぱり新宿で探そう
Slide 22
Slide 22 text
やっぱり新宿で探そう
{
areas: {
銀座: ['id1', 'id2'],
新宿: [‘id3’, ‘id4’]
},
restaurants: {
id1: { id: 'id1', name: 'ポトフ専門店' },
id2: { id: 'id2', name: 'トムヤムクン専門店' },
id3: { id: 'id3', name: 'ボルシチ専門店' },
id4: { id: 'id4', name: 'クラムチャウダー専門店' }
}
},
新宿の検索結果を取得
Slide 23
Slide 23 text
良いお店がないから
銀座でやっぱり探そう
Slide 24
Slide 24 text
良いお店がないから
銀座でやっぱり探そう
{
areas: {
銀座: ['id1', 'id2'],
新宿: [‘id3’, ‘id4’]
},
restaurants: {
id1: { id: 'id1', name: 'ポトフ専門店' },
id2: { id: 'id2', name: 'トムヤムクン専門店' },
id3: { id: 'id3', name: 'ボルシチ専門店' },
id4: { id: 'id4', name: 'クラムチャウダー専門店' }
}
},
銀座の検索結果は
取得済みなので再利用
Slide 25
Slide 25 text
良いお店がないから
銀座でやっぱり探そう
銀座の検索結果は
取得済みなので再利用
Slide 26
Slide 26 text
キャッシュの話
Slide 27
Slide 27 text
Varnish Cache
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
加速！
暇だなぁ...
Slide 30
Slide 30 text
加速！
暇だなぁ...
サーバA サーバB
Slide 31
Slide 31 text
加速！
暇だなぁ...
早えな
Slide 32
Slide 32 text
でも気をつけて！！
Slide 33
Slide 33 text
ニホンゴ ワカリマセン
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
公式みてね❤
Slide 36
Slide 36 text
まとめ
Slide 37
Slide 37 text
今回はデータ設計とキャッシュ設計について
紹介しましたが、より詳細な点や、
お話できていない他の取り組みもありますので、
懇親会でお話出来ればと思います！
Slide 38
Slide 38 text
We’re hiring!!
フロントエンド募集してま
す！
https://corporate.gnavi.co.jp/recruit/