Reactのコンポーネント間の結合関係(import, export)を可視化するアプリを作りました
コンポーネントの結合関係を可視化できるアプリを作りました。
2024/12.06現在、meta情報はtitleしか付与していない。
実際の画面
デフォルト画面
フォルダアップロード画面
フォルダ解析後
リポジトリはコードを多少綺麗にした後、貼ります。
開発のきっかけ
結合関係にあるコンポーネントを探すのを楽にしたいため作りました。
概要
解析したいディレクトリを選択・アップロードしたらフォルダを解析し、結合を調べて可視化します。基本的なimport、 exportに対応しているはずですので大体のReactのプロジェクトフォルダをアップロードしても動作すると思います。ファイルの総数は500以下までと制限を設けています。
グラフの座標計算アルゴリズムの実装は自分では実力不足だと感じたのでClaudeという生成AIを使用し実装してもらいました。結合関係にあるコンポーネントができるだけ近くに配置されるようになっています。また各コンポーネントのnodeは動かすことが可能なので結合関係を追跡することも可能です。
描画までの処理の流れ
- フォルダの解析
- ファイルの結合関係(import/export)を解析
- 各ノードの座標の計算
- データを生成
- 描画
技術スタック
- Next.js
- TaliwindCSS
- Vercel
- React Flow
Next.js
1ページアプリにはオーバースペックではありますが、App Routerに一刻も早く習得するために採用しました。
TailwindCSS
素のCSSを書くより簡単にスタイルを適用できるので採用。デメリットでよく挙がるクラスがとても長くなるのでそこが難点。クラス名を結合するライブラリを使用すると各種類ごとにクラス名が分割できるのでデメリットも克服可能。
Vercel
リポジトリを紐づけるだけで超簡単にアプリをデプロイできるため採用。独自のCI/CDも組んでくれる。
React Flow
Github Actionsのワークフローのマップのような各コンポーネント同士の結合が見やすいライブラリを探していてちょうどマッチしたので採用しました。色々なサービスでの採用実績もあるみたいです。
アプリの欠点
- フィルタリング機能がないので、結合関係のコンポーネントのみ表示などができない
- コンポーネント数が多いと画面外にはみ出すのでコンポーネントを探さないといけない
最後に
感想やエラーなどあればコメントに書いていただけると幸いです。
よろしくお願いいたします。