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
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.7k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.5k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
AIともっと楽するE2Eテスト
myohei
0
330
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
440
Team operations that are not burdened by SRE
kazatohiei
1
310
Porting a visionOS App to Android XR
akkeylab
0
420
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
610
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Making Projects Easy
brettharned
116
6.3k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Raft: Consensus for Rubyists
vanstee
140
7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Experiences People Love
moore
142
24k
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 のテストを書く負担が少し減る • 見やすい依存関係図を生成するためにディレクトリ戦略を考える必要があ る まとめ