依存グラフ

依存グラフとは

依存グラフ (Dependency Graph) は、モジュール、パッケージ、サービス間の依存関係を有向グラフで表現したものである。webpack や Vite がバンドルを生成する際、import 文を辿って依存グラフを構築し、必要なモジュールだけをバンドルに含める。

依存グラフの用途

依存グラフの用途を以下にまとめる。

用途	ツール
バンドル生成	webpack, Vite, esbuild
Tree Shaking	未使用コードの除去
コード分割	動的 import でチャンクを分割
ビルド順序	Turborepo, Nx (モノレポ)
影響範囲分析	変更したモジュールに依存するテストだけ実行

import から依存グラフを構築

import から依存グラフを構築のコード例を示す。

// index.ts → App.tsx → Header.tsx
//                    → UserList.tsx → api.ts
//                                   → types.ts

// webpack / Vite がエントリーポイント (index.ts) から
// import を再帰的に辿って依存グラフを構築

index.ts
  └── App.tsx
        ├── Header.tsx
        └── UserList.tsx
              ├── api.ts
              └── types.ts

循環依存

循環依存のコード例を示す。

// ❌ 循環依存: A → B → A
// a.ts
import { b } from './b';
export const a = b + 1;

// b.ts
import { a } from './a';
export const b = a + 1;
// → 実行時に undefined になる

循環依存はバグの温床。ESLint の import/no-cycle ルールで検出する。

Tree Shaking

Tree Shaking のコード例を示す。

// utils.ts
export function add(a: number, b: number) { return a + b; }
export function multiply(a: number, b: number) { return a * b; } // 未使用

// main.ts
import { add } from './utils';
console.log(add(1, 2));

// バンドル結果: multiply は含まれない (Tree Shaking)

依存グラフで「どのエクスポートが実際に使われているか」を分析し、未使用コードを除去する。

モノレポでの依存グラフ

モノレポでの依存グラフを図で示す。

packages/
  ├── ui/        → shared に依存
  ├── api/       → shared に依存
  └── shared/    → 依存なし

ビルド順序: shared → ui, api (並列)

Turborepo や Nx は依存グラフに基づいてビルド順序を決定し、変更のないパッケージのビルドをスキップする。

npm の依存グラフ

npm の依存グラフの例を示す。

# 依存ツリーの表示
npm ls --all

# 脆弱性のある依存を表示
npm audit

さらに掘り下げるなら関連書籍が参考になる。