Reactのコンポーネント間の結合関係(import, export)を可視化するアプリを作りました

コンポーネントの結合関係を可視化できるアプリを作りました。

2024/12.06現在、meta情報はtitleしか付与していない。

実際の画面

リポジトリはコードを多少綺麗にした後、貼ります。

結合関係にあるコンポーネントを探すのを楽にしたいため作りました。

解析したいディレクトリを選択・アップロードしたらフォルダを解析し、結合を調べて可視化します。基本的なimport、 exportに対応しているはずですので大体のReactのプロジェクトフォルダをアップロードしても動作すると思います。ファイルの総数は500以下までと制限を設けています。

グラフの座標計算アルゴリズムの実装は自分では実力不足だと感じたのでClaudeという生成AIを使用し実装してもらいました。結合関係にあるコンポーネントができるだけ近くに配置されるようになっています。また各コンポーネントのnodeは動かすことが可能なので結合関係を追跡することも可能です。

描画までの処理の流れ

1ページアプリにはオーバースペックではありますが、App Routerに一刻も早く習得するために採用しました。

素のCSSを書くより簡単にスタイルを適用できるので採用。デメリットでよく挙がるクラスがとても長くなるのでそこが難点。クラス名を結合するライブラリを使用すると各種類ごとにクラス名が分割できるのでデメリットも克服可能。

リポジトリを紐づけるだけで超簡単にアプリをデプロイできるため採用。独自のCI/CDも組んでくれる。

Github Actionsのワークフローのマップのような各コンポーネント同士の結合が見やすいライブラリを探していてちょうどマッチしたので採用しました。色々なサービスでの採用実績もあるみたいです。

感想やエラーなどあればコメントに書いていただけると幸いです。
よろしくお願いいたします。