7.2 Memoryパネル

Memoryパネルの概要

パネルを開く

F12 → Memoryタブ

プロファイルの種類

Heap Snapshot（ヒープスナップショット）

特定時点でのJavaScriptヒープメモリの完全なスナップショットを取得する。

スナップショットの取得

ビューの種類

列の意味（Summary）

スナップショットの比較

メモリリークを検出する最も効果的な方法。

比較の手順

比較ビューの列

Allocation Timeline

時系列でメモリ割り当てを記録し、いつ・どこでオブジェクトが作成されたかを追跡する。

記録の手順

タイムラインの読み方

• 青いバー: 割り当てられ、まだ存在するオブジェクト
• グレーのバー: 割り当て後、GCで回収されたオブジェクト

範囲の選択

タイムライン上で範囲をドラッグすると、その期間に割り当てられたオブジェクトだけを表示できる。特定の操作に関連するオブジェクトを絞り込むのに便利。

Allocation Sampling

サンプリングベースの軽量なプロファイリング。長時間の監視に適している。

特徴

• オーバーヘッドが小さい
• 本番環境に近い状態で計測可能
• 統計的なデータ（すべてのオブジェクトは記録されない）

ビュー

Detached DOM要素の検出

DOMから切り離されたがJavaScriptから参照されている要素。よくあるメモリリークの原因。

検出方法

よくある原因

// 悪い例：イベントリスナーがDOM要素への参照を保持
const button = document.getElementById('myButton');
button.addEventListener('click', function handler() {
  console.log('clicked');
});
button.remove(); // DOMから削除してもhandlerが参照を保持

// 良い例：削除前にイベントリスナーを解除
button.removeEventListener('click', handler);
button.remove();

Retainersパネル

オブジェクトを選択すると、下部のRetainersパネルに「何がそのオブジェクトを参照しているか」が表示される。リークの原因を追跡するのに使用。

よくあるメモリリークパターン

1. グローバル変数

// 悪い例：意図しないグローバル変数
function leak() {
  leaked = []; // varがないのでグローバル
  for (let i = 0; i < 1000000; i++) {
    leaked.push(new Array(1000));
  }
}

// 良い例：ローカル変数として宣言
function noLeak() {
  const local = [];
  // ...
}

2. クロージャ

// 悪い例：クロージャが大きなデータを保持
function createClosure() {
  const largeData = new Array(1000000);
  return function() {
    console.log(largeData.length); // largeDataへの参照を保持
  };
}

// 良い例：必要な情報だけを保持
function createClosure() {
  const largeData = new Array(1000000);
  const length = largeData.length;
  return function() {
    console.log(length);
  };
}

3. タイマー

// 悪い例：クリアされないタイマー
function startTimer() {
  setInterval(() => {
    // 何かの処理
  }, 1000);
}

// 良い例：タイマーをクリア
let timerId;
function startTimer() {
  timerId = setInterval(() => { /* ... */ }, 1000);
}
function stopTimer() {
  clearInterval(timerId);
}

4. イベントリスナー

// 悪い例：解除されないリスナー
window.addEventListener('resize', handleResize);

// 良い例：コンポーネント破棄時に解除
function cleanup() {
  window.removeEventListener('resize', handleResize);
}

5. Map/Setでのオブジェクトキー

// 悪い例：Mapがオブジェクトへの参照を保持
const cache = new Map();
function process(obj) {
  cache.set(obj, computeExpensiveValue(obj));
}

// 良い例：WeakMapを使用（GC可能）
const cache = new WeakMap();
function process(obj) {
  cache.set(obj, computeExpensiveValue(obj));
}

ガベージコレクション

手動でGCを実行

Memoryパネルのゴミ箱アイコン（Collect garbage）をクリック。スナップショット取得前に実行すると、より正確な状態を確認できる。

GCの確認

Performanceパネルで記録中、「Minor GC」「Major GC」のイベントを確認できる。頻繁なGCはパフォーマンスに影響する。

Performance Monitor

リアルタイムでメモリ使用量を監視するツール。

開き方

Ctrl+Shift+P → 「Show Performance Monitor」

監視できる項目