JSの依存関係を視覚化できる「Madge」が便利すぎる

article-thumbnail

こんにちは、お読みいただきありがとうございます。 ケン(@gootablog)です。

仕事でVue.jsを書いています。jsを書くとimportrequireでライブラリや自分で書いたモジュールを使う機会がありますよね。

自分が参加しているプロジェクトでインポートしたファイルの依存関係を調べたいということがありました。

そのときに同僚がMadgeという依存関係を視覚化できるライブラリを教えてくれました。とても便利だったので紹介します。

(インストールなどの方法はMacでのやり方です)

「Madge」とは?

https://www.npmjs.com/package/madge

JSの依存関係をリスト化したり、視覚化できるライブラリです。

インストールしてコマンドを実行するだけで出力することができます。

インストール

グローバルにインストールします。

$ npm -g install madge

もし依存関係を画像で出力したい場合は以下をbrewコマンドでGraphvizというライブラリをインストールします。

$ brew install graphviz || port install graphviz

基本はCLIのコマンドで操作

JSファイルに書いて実行してもできますが、基本はCLIコマンドで事足りるかと思います。

試しにa~dまでファイルを作り適当に依存関係を書いてコマンドを実行してみます。

$ madge a.js

そうするとa.jsというファイルからそれぞれのファイルがどう読み込まれているかリストで出力されます。

依存関係をCLIから画像出力する

リスト化ではなく画像で見たい場合は以下のコマンドを実行

$ madge --image dependencies.svg a.js

a.jsを起点とした依存関係をdependencies.svgというファイル名で出力されます。

こんな感じ。依存関係が線で結ばれるのでどうつながってるかが一発でわかります。

視覚化できたら必要ない依存関係を解消していく

視覚化ができると必要ない箇所や改善できそうな箇所がわかるようになります。そうなったら地道に改善していくのみです。

業務でも同僚とこことここ同じモジュールをインポートしてるよねとか、ここはこうすればすっきりするしいいんじゃないなどの改善に向かえたのでよかったです。

参考になれば幸いです。

Madge

JavaScript Tech
Javascript Tech

関連記事