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
1
450
20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話
株式会社出前館
October 27, 2022
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
incident_commander_demaecan__1_.pdf
demaecan
0
6
ClickHouse Cloud をオブザーバビリティ基盤の候補に選んだ理由
demaecan
0
67
出前館の“裏エース!?”─TPM(Tech PM)が現場に安心をデリバリー!
demaecan
0
220
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
270
これならできる!Kotlin・Spring・DDDを活用したAll in oneのマイクロサービス開発術
demaecan
2
700
出前館を支えるJavaとKotlin
demaecan
0
450
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
1
420
Yahoo!クイックマート管理画面でNext.js + static exportsを選んだ理由
demaecan
1
110
出前館アプリにおけるFlutterアプリ設計とそれを支えるCICD環境の進化
demaecan
0
1.2k
Other Decks in Technology
See All in Technology
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
120
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
310
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
130
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
3
820
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
120
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
690
How to achieve interoperable digital identity across Asian countries
fujie
0
140
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
1
170
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
4 Signs Your Business is Dying
shpigford
185
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Into the Great Unknown - MozCon
thekraken
40
2.1k
RailsConf 2023
tenderlove
30
1.2k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
A Tale of Four Properties
chriscoyier
161
23k
The Cult of Friendly URLs
andyhume
79
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Unsuck your backbone
ammeep
671
58k
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