JavaScriptのモジュール間依存関係を見える化したかった
JavaScriptを書いてると機能別にクラス（のようなもの）に分割して、かつファイルを分けて開発し、 ビルドのタイミングでgruntやgulpで結合なり何なりして一枚のファイルにする手法はいまや一般的だと思います。
そのおかげで私も結構、いやかなり細々と機能別にファイルを作って管理しています。 ファイルを分けると機能も意識も明確に分けて考えられる、ユニットテストもやりやすいですよね。
ところが。
依存関係は複雑化する一方
どの機能がどの機能に依存している（他の言語で言えばimport/requireして利用している）のかがわかりづらくなりがちです。 nodeなら明示的にrequireするのでまだ把握できますが、ブラウザ向け、さらに結合してしまう場合はとってもわかりづらくなってしまいます。
というわけで、これらの依存関係がどうなっているかを可視化するツールを作りました。
ysugimoto/js-dependency-visualizer
もともとはobjc-dependency-visualizerというObjective-Cの物があって、 それをJavaScript用にポートしたものです。偶然見つけて便利そうだなーって思って。
インストール方法
Githubに書きましたのでそちらを御覧ください。npmで入ります。
使い方とか
ファイル内に、依存関係を持つクラス名を@depend Fooといった感じにAnnotationとして書いておけば、依存関係があると認識します。 さらに、ファイル内に@class FooというAnnotationがあればクラス名として扱います。
あとはコマンドを実行するだけです。 プロジェクト内で使う場合はgruntタスクも準備してあります。
ysugimoto/grunt-js-dependency-visualizer
$ npm install grunt-js-dependency-visualizer --save-devとかしてください。タスクのサンプルもGithubに書いてあります。
サンプル
3つのシンプルなクラスの場合ですが、下記リンクにてどうぞ。
依存関係が複雑なやつでも試しましたがいい感じにふよふよ漂います。
まとめ
使いドコロは微妙かもしれません…が、ファイル数が多くなってきた時に、問題があった機能を特定した場合、可視化できていればコードの影響範囲がひと目で分かるかと。 （もちろん、そのような設計になっていることが前提ですが）少なくとも、自分の開発スタイルにとてもフィットしています。
あと、d3.jsを使ったコードを見ながらリライトしたので、少し詳しくなりました。SVGすごい。
ドキュメントも含めて、あらゆる手段で属人化やコードの全容把握はサポートすべきだと思っているので、こういう可視化ツールは少しでもその助けになるなら導入したいところです（現状は自己満足気味ですが）。
よろしければ一度お試しくださいませ。 現場からは以上です。