JavaScript はどのようにメモリを管理し、リークはどのように起こりますか？

Question

Accepted Answer

JavaScript は**自動ガベージコレクション**を使います。コレクタは**マーク・アンド・スイープ**アルゴリズムを使います。ルート（グローバルオブジェクト、現在のコールスタック）から始めて、**到達可能**なものをすべてマークし、到達不可能なものをすべて解放します。手動で `free()` することは決してありません — しかし、うっかり参照を生かし続けてリークを起こすことは*あります*。

## 4つの典型的なリーク源

```js
// 1. Unbounded globals / caches that never shrink
window.cache = window.cache || {};
window.cache[id] = bigObject; // grows forever

// 2. Forgotten event listeners
el.addEventListener("click", handler);
// must call el.removeEventListener("click", handler) when done

// 3. Forgotten timers
const id = setInterval(tick, 1000);
// must clearInterval(id)

// 4. Closures capturing large objects longer than needed
function outer() {
  const huge = new Array(1e6);
  return () => huge.length; // keeps `huge` alive as long as the closure lives
}
```

到達可能なあらゆる場所（グローバル、生きているリスナー、クロージャ、JS から依然として参照されている切り離された DOM ノード）からの参照は、オブジェクトが回収されるのを妨げます。

## リークの診断

```js
performance.memory; // rough heap size (Chrome)
// Chrome DevTools → Memory → take heap snapshots at two points and compare
```

アクションの前後でヒープスナップショットを取りましょう。「保持サイズ（retained size）」が着実に増えていれば、解放されていないものが明らかになります。

## オブジェクトを固定しないためのツール

```js
const meta = new WeakMap(); // keys are weakly held — GC can collect them
meta.set(domNode, data);    // doesn't prevent domNode from being garbage-collected
```

## なぜ重要なのか

長時間稼働するアプリ（SPA、Node サーバー）は、リークによってクラッシュしたり遅くなったりします。

修正方法は規律あるクリーンアップです — リスナー／タイマーを削除し、キャッシュに上限を設け（LRU）、残存する参照を避け、オブジェクトを生かし続けるべきでないメタデータには `WeakMap`/`WeakSet` を使いましょう。