🎯 はじめに
「この関数、どこから呼ばれてるんだっけ？」
「このクラス、実は誰にも使われてない説…？」
大規模プロジェクトで開発していると、コードの依存関係が ジャングル化 してきます。
ドキュメントを漁ったり grep するのも限界。頭のキャッシュもすぐ溢れて落ちます。
そこで作ったのが DepEye (Dependency Visualizer)。
VSCode上で依存関係を グラフ化して一望 できる拡張機能です。
動画
👉 Marketplaceはこちら
👀 DepEyeとは
DepEyeは、TypeScript/JavaScriptプロジェクトを解析し、クラスやメソッドの依存関係を インタラクティブなグラフ として可視化する拡張機能です。
できることはこんな感じ：
-
メソッドの依存関係 をグラフ表示
-
軽量モード（Active File + Open Tabs） から 全プロジェクト解析 まで切替可能
-
ノードやエッジをクリックして該当コードへジャンプ
グラフを 画像出力 して、SlackやNotionで簡単共有
「コードを木の根っこから枝葉まで覗ける拡張」＝だから DepEye です。
🤔 なぜ作ったのか
大規模開発で、実装が多岐に渡りすぎて追えない ことが多発していました。
-
新しい機能を作るたびに「この関数どこで使ってる？」調査に時間が溶ける
-
実装説明のたびに Miroで依存図を手書き → 正直しんどい
-
不要な関数やクラスが残ってしまうが、発見が難しい
「これ、VSCode上で完結できればよくない？」と思い立ち、DepEyeを開発しました。
結果、レビューや実装追跡の手間が激減し、不要コードの可視化にもつながっています。
🌲 DepEyeで見えてくること
① 共通化できそうな実装
依存グラフを眺めていると、
-
複数ファイルで似た処理が散らばっている
-
同じロジックをちょっと変えて使っている
といったパターンが浮き彫りになります。
「これ共通ユーティリティにできるのでは？」という発見に繋がります。
② 不要コードの発見
逆に、依存グラフで 孤立している関数やクラス は「誰からも呼ばれてない」可能性大。
リファクタリングで「消す／切り出す」判断がスムーズになります。
🛠 技術スタックと工夫
| 項目 | 採用技術／工夫 | メリット |
|---|---|---|
| AST解析 | ts-morph | 型を意識した解析ができ、JS/TS両対応 |
| グラフ描画 | React Flow | ズーム・パン・フォーカスが滑らか |
| 状態管理 | Zustand | 軽量・シンプルで高速 |
| パフォーマンス | インクリメンタル解析＋キャッシュ最適化 | 大規模プロジェクトでも落ちない..? |
| UI | Webviewにズーム／フィルタ／モード切替 | 開発フローを邪魔しない |
✍️ 作成の裏話
期間：約1週間
「気づいたら完成してた」レベルの集中開発。
新幹線でバイブコーディング
移動中にスマホからリモート接続して開発。
こちらの記事を参考にさせていただきました。
開発ルール
有名記事を参考に
QiitaやZennの知見をリスペクトしつつ、自分仕様に落とし込み。
📝 最後に
大規模開発での「依存ジャングル探検」に疲れている方、ぜひお試しください。
好評だと、また新幹線で怪しいコーディングを始めるかもしれません。