DOM ExplorerとCode Graphは、コードベース全体をインタラクティブな依存関係グラフとして表示します。Webプロジェクトでは、実際のDOM要素と、それが引き起こす動作との対応も表示します。

DOM Explorer & Code Graph

コード依存関係グラフ

Code Graphは、プロジェクト内のファイルを、importで結ばれたノードとして可視化します。ファイルはimportのパターンに基づいて自動的にコミュニティにクラスタリングされるため、手作業で線を引かなくても、自然なモジュールの境界が一目でわかります。

• God nodes — 依存関係の数が不釣り合いに多いファイル。分割の良い候補です。
• Dead code — 入ってくるエッジがない（どこからもimportされていない）ファイル。削除しても安全である可能性が高いものです。
• Circular dependencies — 互いにimportし合っているファイルのグループ。リファクタリングを複雑にします。

data-aitm属性とは

Webプロジェクトでは、AITMはさらに、すべてのインタラクティブな要素（ボタン、入力、コンテナ）に付けたdata-aitm="MODULE.ELEMENT"属性を通じて、実際のDOM要素をマッピングします。このコードは、目に見える要素を、コード内のその動作 — ハンドラー関数、遷移先のルート、呼び出されるAPI — および、その動作を文書化したBehavioral Contractと結び付けます。

クリックから効果までのチェーン

data-aitmを持つ要素がdata-actionも持つ場合、AITMはクリックによってどのような効果が生じるか — モーダルを開く、画面遷移する、APIを呼び出す、ソケットイベントを発行する — を追跡します。こうした「click → effect」のチェーンは、ファイル依存関係グラフとは別のマップを構成します。AIはUI要素に触れる前にこれを読み、変更を加える前にその影響範囲を把握します。

自己修復するE2Eセレクター

すべてのdata-aitmコードは、現在のDOMセレクターとともにデータベースに保存されているため、E2Eテストは壊れやすいCSS/XPathセレクターの代わりに、安定したコードで要素を検索できます。DOM構造が変わった場合、マップは次回のPipeline実行時に自動的に再解決されるので、クラス名が変わったりタグが移動したりしただけでテストが壊れたままになることはありません。