概要

「遅くなった」「ブラウザが落ちる」「時間が経つとメモリ使用量が膨れ上がる」
こういった問題の多くは、**メモリの解放忘れ（リーク）**によって起こる。

JavaScriptでは手動でメモリ解放を行うことはできない。
代わりに、**ガベージコレクション（GC）**という仕組みが自動的に不要なメモリを解放してくれる。

だがこのGC、完全ではない。
正しく動作させるためには、“解放可能な状態”を自分で設計してやる必要がある。

本記事では、JavaScriptのメモリ管理の基本から、実務で発生しがちなメモリリークとその防止戦略までを解説する。

対象環境

JavaScript（ES5〜ES2023）  
ブラウザ / Node.js 両対応

GCのアルゴリズム（主要ブラウザ実装）：

Mark-and-Sweep（マーク＆スイープ）
1. ルート（グローバル変数・コールスタックなど）から到達可能なオブジェクトを「マーク」
2. それ以外の「到達不能なオブジェクト」をメモリからスイープ（除去）

let obj = {
  child: {
    name: 'toto'
  }
};

obj = null;

→ obj.child も到達不能になる → GCによって回収される

GCは「参照がある限りは解放しない」ため、
意図しない参照が残っていると、使っていないのにメモリを保持し続けることになる。

window.leak = createLargeObject(); // ❌ GCされない

→ ✅ 関数スコープ内で使い切る、グローバル汚染を避ける

function leak() {
  let large = new Array(1000000).fill('...');
  return () => console.log(large.length);
}
const f = leak();

→ large はずっと生き続ける

→ ✅ クロージャを使う場合は、本当に必要な変数だけを閉じ込める

const el = document.getElementById('btn');
el.addEventListener('click', () => {
  // リスナーがelを保持し続ける
});

→ ✅ removeEventListener を明示的に呼ぶ、もしくは AbortController を使う

setInterval(() => {
  // 無限ループで実行され続ける
}, 1000);

→ ✅ clearInterval() をコンポーネント破棄時に行う（SPAで重要）

const nodes = [];
document.querySelectorAll('*').forEach(node => nodes.push(node));

→ ✅ 必要なDOMだけをキャッシュし、不要になったら null に

const cache = new WeakMap();

function cacheData(obj, data) {
  cache.set(obj, data);
}

→ ✅ GC対象となるオブジェクトをキーにすれば、参照が切れると自動解放

JavaScriptのメモリは、自動管理されている。
だが「自動だから任せていい」わけではない。
任せられる状態を、意図して設計することが求められる。

目に見えない世界を制御するには、見える構造をコードとして設計するしかない。

メモリ管理とは、パフォーマンスチューニングではない。
持続可能なアプリケーション設計の基礎である。