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
1k
riverpod_graph 活用術
2023/12/08 に開催された YOUTRUST x ゆめみ Flutter LT会@渋谷 #4 の登壇資料です
masssun
December 10, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
300
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
CSC509 Lecture 04
javiergs
PRO
0
300
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
570
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
EMこそClaude Codeでコード調査しよう
shibayu36
0
200
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
290
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
600
AI Agent 時代的開發者生存指南
eddie
3
1.9k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Thoughts on Productivity
jonyablonski
70
4.9k
Making Projects Easy
brettharned
120
6.4k
Practical Orchestrator
shlominoach
190
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Scaling GitHub
holman
463
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
For a Future-Friendly Web
brad_frost
180
10k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
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 のテストを書く負担が少し減る • 見やすい依存関係図を生成するためにディレクトリ戦略を考える必要があ る まとめ