Vue.jsコンポーネントの依存関係を可視化する「Voyager」の開発をはじめました

昨日、Vue.jsのコンポーネント依存関係を可視化するツール「Voyager」の開発をし始めました。
このツールは、Vue.jsプロジェクトのコンポーネント間の関係性を簡単に、インタラクティブに表示することを目指しています。

CodePenで動作確認できるようにしています。

codepen.io

このサンプルは、vue-element-adminに対して実行した場合の結果になります。

なぜ作り始めたのか？

大規模なVue.jsアプリケーションを開発していると、コンポーネント間の依存関係が複雑になってきます。
新しいメンバーがプロジェクトに参加した時や、リファクタリングを行う際に、この依存関係を把握するのは大変な作業です。

この課題を解決するため、コンポーネントの依存関係を視覚的に表現するツールがあれば便利だと考え、開発を始めました。

例えばこのようにPanThumbというコンポーネントを使っているコンポーネントは何があるのかを知れるようにするためのツールです。

既存のツールとの違い

Vue.jsのコンポーネント依存関係を可視化するツールは、すでに多く存在します。
しかし、それらには以下のような課題がありました。

  • 静的な画像出力のみで、インタラクティブな操作ができない
  • 大規模プロジェクトでの表示が煩雑になりやすい
  • リアルタイムな依存関係の探索が困難

Voyagerの特徴

Voyagerには以下のような特徴があります。

  • 🎨 美しく直感的なUI
  • 📊 シンプルな依存関係の解析
  • 🔍 Atomic Designベースの階層表示
  • 📁 ディレクトリ構造に基づいたグループ化
  • 🔄 インタラクティブな依存関係の探索機能

とはいっても、現状だとまだまだできていないことが多く、とりあえず可視化できるところだけ作成しています。

開発状況

現在は初期開発フェーズで、以下の機能を実装中です。

GitHubでプロジェクトは公開しているので、興味があればのぞいて見てください。

github.com

今後の展開

将来的には以下のような機能の追加を予定しています。

また、このツールはCLIツールとして展開していく予定なので、まずはそこを目ざいしていきたいですね。

ローカルで実行

現時点でもローカルで試すことはできるので簡単な手順について紹介します。

  1. voyagerをクローン
  2. asdf installなどでNode.jsをインストール
  3. pnpm install
  4. pnpm -r build && pnpm voyager ${PROJECT_DIR} --ignore "**/*.spec.{ts,js}"

このような手順を実行して成功すると、voyager-graph.html という単一で動作するHTMLファイルが出力されます。
これを閲覧すれば指定したプロジェクトを可視化することができます。

--ignore オプションで解析対象に含めないこともできるので適宜利用してください。
複数指定する場合には --ignore "**/*.spec.{ts,js}" "**/*.stories.ts" のように続けて定義すれば除外されます。

おわりに

まだ開発初期段階ですが、より良いVue.jsの開発体験を提供できるよう、機能を充実させていきたいと考えています。

興味を持っていただけた方は、GitHubをチェックしていただけると嬉しいです。
また、フィードバックやコントリビューションも大歓迎です！