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
riverpod_graph 活用術
Search
masssun
December 10, 2023
Programming
0
980
riverpod_graph 活用術
2023/12/08 に開催された YOUTRUST x ゆめみ Flutter LT会@渋谷 #4 の登壇資料です
masssun
December 10, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
120
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.1k
Is Xcode slowly dying out in 2025?
uetyo
1
250
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
110
WindowInsetsだってテストしたい
ryunen344
1
230
XP, Testing and ninja testing
m_seki
3
230
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
5つのアンチパターンから学ぶLT設計
narihara
1
160
NPOでのDevinの活用
codeforeveryone
0
760
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
C++20 射影変換
faithandbrave
0
560
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Rails Girls Zürich Keynote
gr2m
94
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Done Done
chrislema
184
16k
4 Signs Your Business is Dying
shpigford
184
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
GitHub's CSS Performance
jonrohan
1031
460k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
riverpod_graph 活用術 YOUTRUST x ゆめみ Flutter LT会@渋谷 #4
About me 👨 増山 洸輝 (masuyama koki) 🏢 株式会社サイバーエージェント 🛒
小売 DX をやってます @_masssun @masssun
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
• Provider / Widget 間の依存関係を可視化するためのツール ◦ (※ Work in progress)
• Text to Diagram (D2 / Mermaid) シンタックスで出力される • https://github.com/rrousselGit/riverpod/tree/master/packages/rive rpod_graph riverpod_graph とは
riverpod_graph とは
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
riverpod_graph 導入
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
riverpod_graph 使い方
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
• Markdown で出力し、VSCode で閲覧 riverpod_graph 活用術
• システムの全体像を把握しやすくする • 設計改善のヒントにする • Notifier のテストを書く際の補助ツールとして使う riverpod_graph 活用術
• システムの全体像を把握しやすくする • 設計改善のヒントにする • Notifier のテストを書く際の補助ツールとして使う riverpod_graph 活用術
Notifier のテストを書くときにツラいこと
Notifier のテストを書くときにツラいこと
• ref.watch している Provider をかき集めること ◦ build() 内のコードを丹念に追わなければならない Notifier のテストを書くときにツラいこと
• 依存関係図があれば、Provider をかき集めるコストを軽減できる Notifier のテストを書くときにツラいこと
• 全てのコードに対して実行するとカオスになる Notifier の依存関係図を生成するためのディレクトリ構成
• Feature-first? • Layer-first? Notifier の依存関係図を生成するためのディレクトリ構成
Notifier の依存関係図を生成するためのディレクトリ構成
• dart pub global run riverpod_graph lib/feature/order/core Notifier の依存関係図を生成するためのディレクトリ構成
• dart pub global run riverpod_graph lib/feature/order Notifier の依存関係図を生成するためのディレクトリ構成
• riverpod_graph によって Provider / Widget 間の依存関係図を生成するこ とができる • 依存関係図があることで
Notifier のテストを書く負担が少し減る • 見やすい依存関係図を生成するためにディレクトリ戦略を考える必要があ る まとめ