Help us understand the problem. What is going on with this article?

VueやReactでコンポーネントやモジュールの依存関係を把握する

More than 1 year has passed since last update.

はじめに

なんかこのコンポーネント誰に依存されているかわかんないの、変更した時不安(´;ω;`)
って声があったので、コンポーネント間の依存関係を出すツールを調べて使ってみました。
結果かなり良かったです。

madge

DEMO

DEMO

概要

madgeはtsconfigやwebpackの設定を与えて、何をさせるのか指定します。
例えば、依存グラフをsvgで出力させたり、vg形式で出力させたりできます。
また、循環依存があるファイルリスト、依存されているのが1つ以上あるリスト、逆にどれにも依存されていないリストを出したりできます。
cliで軽くやるのからnodeでフルコントロールもできるのでかなり細かい事ができ、例えばこのモジュールはここからしか依存させないなどの設定をCIやエディターに簡単に組み込ませたりできます。(例:クリーンアーキテクチャーが持つポリシーの1つである、レイヤーを通り越して依存するの禁止等が簡単に実現できます。

React

一応jsxはtypescriptが標準サポートしているので、jsx間の依存は簡単に見れる。
graph.jpg

ちょっとボリュームのあるこのリポジトリの依存!
も出してみる。
graph.jpg
見やすくてかなり良い感じだと思います!

Vue

https://github.com/pahen/madge/issues/122
vueファイル間の依存を出したかったんですが、それはまだできないっぽいです(´;ω;`)

dependency-cruiser

dependency-cruiserは標準でvueの依存グラフを出せますし、madgeと同じように循環依存検知等色々できます。
また、出力はdot言語なので、dot言語のレイアウトエンジンを調整すればいろいろできます。

こちらのリポジトリをサンプルに依存グラフを出します。
https://github.com/kahirokunn/book-management

これがサンプルです
CreateBookForm_dependencygraph.jpg

特定コンポーネント単位なら割といけますね。

ちなみにデフォルト設定で全部出すとめっちゃカオスです
叩いたコマンドはこれです

$ depcruise --webpack-config ./node_modules/@vue/cli-service/webpack.config --exclude "^node_modules" --output-type dot src | dot -T jpg > dependencygraph.jpg && open ./dependencygraph.jpg

dependencygraph.jpg

レイアウトエンジンに関してはこちらの記事を見ていただきたいです
http://melborne.github.io/2013/04/02/graphviz-layouts/

デフォルトレイアウトエンジンはdotで、あまり見やすくないですね。。。
自分の好みはneatoです。
こんな感じになります。

dependencygraph.jpg

まぁカオスには変わりないですが、まだまし、、、?なのかなって(´;ω;`)

まとめ

現状の依存グラフのエコシステムだとこの辺までできるようです。
もしもっとこういうのもあってこうできるよ!とか、いろいろありましたら教えていただけると幸いです。

参考資料

https://qiita.com/rubytomato@github/items/51779135bc4b77c8c20d#edge
http://melborne.github.io/2013/04/02/graphviz-layouts

phper-oop
ペチオブはオブジェクト指向ワーキンググループです。様々なエンジニアの方に参加頂いております。
https://phper-oop.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした