[Flutter]Flutterでの依存関係図の自動生成が便利だった件について

こんにちは。いせりゅーです😃

「視覚的に理解しやすく、効率的にコードの構造や流れを把握する」ということは開発においてとても助けになると思っています。特に複雑なアーキテクチャや多数のコンポーネントを持つフレームワーク、例えばFlutterのようなものを使用する場合、依存関係の把握は必須となりますが、把握をするのが難しかったり、時間がかかったりすると思います。

実際に、社会人になり研修課題をしている中でriverpod_graphを勉強し、それがとても便利だったので、アウトプットのために書いていこうと思いました。

riverpod_graphとは、

↑こちらから引用しています。

認識のミスがありましたら、コメントいただけると幸いです🙇

• riverpodの作成者が作成したツール
• providerとwidget間の相互作用のグラフを生成し、可視化できるもの
• 手順を踏むとと自動生成ファイルが生成される（今回は、graph.mdに生成する）
• グラフは、d2かMermaidのテキストからグラフへの構文を使用して生成できる。
  • d2とは、
    • 美しいダイアグラムを数分で作成できる。
    • カスタマイズが自由自在にできる。
  • Mermaidとは
    • JavaScriptベースの図作成およびグラフ作成ツール
    • Markdownにインスパイアされたテキスト定義をレンダリングし、ダイアグラムを動的に作成・変更する。

手順

１、プロジェクトに移動

cd <プロジェクト>

２、インストール（インストールしていない場合）

dart pub global activate -sgit https://github.com/rrousselGit/riverpod.git --git-path packages/riverpod_graph

３、生成する

dart pub global run riverpod_graph:riverpod_graph > graph.md

自動生成してみた

具体的にどんな依存関係図が作成されるかを見てみましょう。

自動生成された依存関係図は、現在、取り組んでいるゆめみの研修課題を参照することにしました。

リポジトリとしてはこちらとなります。

最後に

このような視覚的なサポートツールは、コードの「読みやすさ」という点で非常に大きな貢献をしてくれると僕は思います。

最後に、この記事を読んで、少しでもFlutterの開発が楽しく、効率的になる手助けになれば幸いです。もし、他にも便利なツールやテクニックを知っている方がいれば、ぜひコメントやフィードバックをお寄せください。

これからももりもりとインプットとアウトプットを頑張っていきます🤗

参考文献