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
20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話
Search
株式会社出前館
October 27, 2022
Technology
0
270
20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話
株式会社出前館
October 27, 2022
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
プロダクト本部紹介資料
demaecan
0
750
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
26
出前館におけるFlutterの現在とこれから
demaecan
0
570
出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について
demaecan
1
890
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
demaecan
0
40
ITエンジニアの市場価値を高め続ける3つの方法
demaecan
0
590
出前館×ZHDのクイックコマースにおける協業事例〜リアルタイム在庫連携の裏側〜
demaecan
0
180
会社説明資料_最新版
demaecan
0
5.5k
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
demaecan
0
200
Other Decks in Technology
See All in Technology
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
反実仮想機械学習とは何か
usaito
PRO
6
1.7k
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
550
NLP2024 参加報告LT ~RAGの生成評価と懇親戦略~ / nlp2024_attendee_presentation_LT_masuda
taro_masuda
1
190
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
社内勉強会運営のコツ
senoo
6
1.1k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
680
Algyan イベント振り返り
linyixian
0
180
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
110
アプリがつくるNOT A HOTELブランド
hokuts
1
450
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
In The Pink: A Labor of Love
frogandcode
138
21k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Practical Orchestrator
shlominoach
181
9.7k
Being A Developer After 40
akosma
56
580k
Transcript
20年続いているサービスの 複雑な注文画面を GraphQLを使って改善した話 株式会社出前館・橋本茉利奈
橋本茉利奈 Hashimoto Marina 株式会社出前館 モバイルアプリエンジニア
None
出前館アプリ
注文画面
None
お届け時間
お届け時間 決済方法
お届け時間 決済方法 クーポン利用
お届け時間 決済方法 クーポン利用 LINEポイント
お届け時間 決済方法 クーポン利用 LINEポイント 特典の付与
お届け時間 決済方法 クーポン利用 LINEポイント 特典の付与 料金の再計算
お届け時間 決済方法 クーポン利用 LINEポイント 特典の付与 料金の再計算 めっちゃ切り替わる…😵
状態管理が大変…😵
状態管理が大変…😵 • 画面内に状態を管理しなければいけない要素が多い • 増え続ける決済パターン • ユーザ操作によって切り替わる注文情報 • ユーザへの許諾チェックボックスの表示制御 …etc
どうする…🤔
とにかくシンプルを目指す
RecoilをState管理に使ってみた • ねらい:State管理をできるだけシンプルにする • 要素をできるだけ細かく分解して管理する • Stateをどこからでも呼び出せる
screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method 依存関係が多すぎる…😵
screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method 頻繁に更新される…😵
screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method かえって複雑に…😵
どうする…🤔
状態を2種類にわける
Server Cache / Local State
Server Cache • サーバの情報を保持するキャッシュ • サーバとクライアントの情報の一致が常に保証されている • キャッシュの値がコンポーネントへリアクティブに作用する
Local State • クライアントでのユーザ操作による情報を管理するState • クライアントのみで一時的に保持している値を管理
screen Server Cache / Local State Server user input Server
Cache Local State
注文画面で実装する💪
注文画面で実装する💪 • Server Cache → Apollo Client のキャッシュを使う • Local
State → React useState を使う
screen 注文画面で実装する💪 Apollo Server (BFF) user input Apollo Client Cache
useState
注文画面で実装する💪 • Server Cache → Apollo Client のキャッシュを使う • Local
State → React useState を使う
Server Cache→ apollo client のキャッシュを使う • BFFのレスポンス情報自体を、Server Cacheとして保持する • BFF
(GraphQL) によって、1画面描画のためのリクエストが1回で 済むのでServer Cacheの状態管理が容易 • BFFのスキーマで型定義できる
注文画面で実装する💪 • Server Cache → Apollo Clientのキャッシュを使う • Local State
→ React useState を使う
Local State → React useState を使う • Server Cacheのおかげで、Localで独自に定義するStateを減らすこと ができる
screen Before... Recoil Server user input item info amount coupon
delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
screen After... Apollo Server (BFF) user input Apollo Client Cache
useState isEnabled address payment method
まとめ
まとめ • 注文画面は、出前館アプリの中でも状態管理が大変な画面のひとつ • まずRecoilで管理する方法を試したものの、膨大な量のStateを管 理しなければならず、大変なことに...
まとめ • そこで、画面で管理するStateをSever CacheとLocal Stateの2種類に 分類して管理することにした
まとめ • Server Cacheとして, Apollo Client のキャッシュを活用することで 、型安全で、かつシンプルにサーバ情報を保持できるようになった
まとめ • Server Cacheがあるおかげで、ユーザ操作によって更新がかかる StateのみをLocal Stateで管理すれば良くなった
None