riverpod_graph 活用術

2023/12/08 に開催された YOUTRUST x ゆめみ Flutter LT会@渋谷 #4 の登壇資料です

Transcript

1. riverpod_graph 活用術 YOUTRUST x ゆめみ Flutter LT会@渋谷 #4
2. About me 👨 増山 洸輝 (masuyama koki) 🏢 株式会社サイバーエージェント 🛒 小売 DX をやってます 　 @_masssun 　 @masssun
3. アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方 • riverpod_graph 活用術
4. アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方 • riverpod_graph 活用術
5. • Provider / Widget 間の依存関係を可視化するためのツール ◦ (※ Work in progress) • Text to Diagram (D2 / Mermaid) シンタックスで出力される • https://github.com/rrousselGit/riverpod/tree/master/packages/rive rpod_graph riverpod_graph とは
6. riverpod_graph とは
7. アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方 • riverpod_graph 活用術
8. riverpod_graph 導入
9. アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方 • riverpod_graph 活用術
10. riverpod_graph 使い方
11. アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方 • riverpod_graph 活用術
12. • Markdown で出力し、VSCode で閲覧 riverpod_graph 活用術
13. • システムの全体像を把握しやすくする • 設計改善のヒントにする • Notifier のテストを書く際の補助ツールとして使う riverpod_graph 活用術
14. • システムの全体像を把握しやすくする • 設計改善のヒントにする • Notifier のテストを書く際の補助ツールとして使う riverpod_graph 活用術
15. Notifier のテストを書くときにツラいこと
16. Notifier のテストを書くときにツラいこと
17. • ref.watch している Provider をかき集めること ◦ build() 内のコードを丹念に追わなければならない Notifier のテストを書くときにツラいこと
18. • 依存関係図があれば、Provider をかき集めるコストを軽減できる Notifier のテストを書くときにツラいこと
19. • 全てのコードに対して実行するとカオスになる Notifier の依存関係図を生成するためのディレクトリ構成
20. • Feature-first？ • Layer-first？ Notifier の依存関係図を生成するためのディレクトリ構成
21. Notifier の依存関係図を生成するためのディレクトリ構成
22. • dart pub global run riverpod_graph lib/feature/order/core Notifier の依存関係図を生成するためのディレクトリ構成
23. • dart pub global run riverpod_graph lib/feature/order Notifier の依存関係図を生成するためのディレクトリ構成
24. • riverpod_graph によって Provider / Widget 間の依存関係図を生成するこ とができる • 依存関係図があることで Notifier のテストを書く負担が少し減る • 見やすい依存関係図を生成するためにディレクトリ戦略を考える必要があ る まとめ