😄

JavaScript・TypeScriptを使用したプロジェクトで依存関係を可視化するツールを作った

2025/02/27に公開

 JavaScript・TypeScriptを使用したプロジェクトで依存関係を可視化するツールを作った
 概要
 開発理由プロジェクトでファイル数が増えてくると、どこで呼び出されているかを追っていくのが億劫になるのでそれを一瞬で解決できるようなものがほしくAIと共に作ってみました。

 RepreeReact Dependencies Treeをもじったのが由来

 トップ画像

 サイトURL
 Githubリポジトリコード汚い・page.tsxにべた書きはお許しください。

 機能・画面js・ts・jsx・tsxを抽出します。

 サイドバーサイドバーにはファイルの各種情報が表示されます。accordionコンポーネントを使用することで見たいファイルの情報のみ見れるようにしました。

 ノードの選択時ノードを選択すると選択されていることがわかるように色付きborder, アニメーションのある接続エッジを表示するようにしました。以下のサイトに感化されてオプションの意味とか調べながら何とか実装できました。

 関係のあるノードのみ表示ノードを選択した状態で👁ボタンをクリックすると、選択したノードとつながっているノードのみ表示することができます。つながっている全階層の全ノードを可視化することができます。

 ダークモードもうおなじみのダークモード。next-themeを使用することでさくっと実装可能。

 アップデートnode_modulesも表示できるようになりました
検索機能の実装

サイドバー、モバイルではヘッダーにある検索バーからノードを検索し、遷移する機能を実装しました。

 今後の展望現在はファイルのみつながりを表示するようになっているので、node_modulesから呼び出したモジュールも対象にできればいいなと思ってます。

 最後に改善点、感想などをお教え頂ければ幸いです。よろしくお願いいたします。