// コード例 1: プリミティブのコピー vs オブジェクトの参照共有
 
// プリミティブ: 値がコピーされる
let a = 42;
let b = a;      // b は 42 の独立したコピーを持つ
b = 100;
console.log(a); // 42 (a は影響を受けない)
 
// オブジェクト: 参照が共有される
let obj1 = { name: "Alice", scores: [90, 85, 92] };
let obj2 = obj1;          // obj2 は同じオブジェクトを参照
obj2.name = "Bob";
console.log(obj1.name);   // "Bob" (obj1 も影響を受ける)
 
// 参照の切断: 新しいオブジェクトを代入
obj2 = { name: "Charlie", scores: [70, 80] };
console.log(obj1.name);   // "Bob" (obj1 は元のオブジェクトを参照し続ける)
 
// 浅いコピー: スプレッド演算子
let obj3 = { ...obj1 };
obj3.name = "Dave";
console.log(obj1.name);   // "Bob" (プリミティブプロパティは独立)
obj3.scores.push(100);
console.log(obj1.scores); // [90, 85, 92, 100] (ネストされた配列は共有!)
 
// 深いコピー: structuredClone (推奨)
let obj4 = structuredClone(obj1);
obj4.scores.push(200);
console.log(obj1.scores); // [90, 85, 92, 100] (影響を受けない)

// コード例 2: オブジェクトのライフサイクル追跡
 
function demonstrateLifecycle() {
  // Phase 1: New Space に割り当て
  const shortLived = { type: "temporary", data: new Array(100) };
  // → shortLived は New Space (Semi-Space A) に配置される
 
  // Phase 2: 関数終了で shortLived は到達不能に
  // → 次の Scavenge で回収される (New Space 内で完結)
 
  // Phase 3: 長寿命オブジェクトは Old Space へ昇格
  const cache = new Map();
  for (let i = 0; i < 10000; i++) {
    cache.set(i, { value: i * 2, label: `item-${i}` });
  }
  // → cache と内部オブジェクトは複数回の Scavenge を生き延び
  //   Old Space (Old Pointer Space) へ昇格 (promotion)
 
  return cache; // cache は呼び出し元で参照され続ける
}
 
// グローバルスコープで保持 → GCルートから到達可能
const globalCache = demonstrateLifecycle();
 
// 明示的に参照を切る → GC対象になる
// globalCache = null;

// コード例 3: Hidden Class とメモリ効率
 
// 良い例: 同一の Hidden Class を共有
function createPoint(x, y) {
  // 全てのオブジェクトが同じ順序でプロパティを持つ
  return { x: x, y: y };
}
 
const points = [];
for (let i = 0; i < 10000; i++) {
  points.push(createPoint(i, i * 2));
}
// → 10000個のオブジェクトが1つの Hidden Class を共有
// → メモリ効率が良い (Hidden Class は1つだけ)
 
// 悪い例: 異なる Hidden Class が大量生成される
const badPoints = [];
for (let i = 0; i < 10000; i++) {
  const p = {};
  if (i % 2 === 0) {
    p.x = i;
    p.y = i * 2;
  } else {
    p.y = i * 2;  // プロパティ追加順が異なる!
    p.x = i;
  }
  badPoints.push(p);
}
// → 2種類の Hidden Class が生成される
// → インラインキャッシュのミスが発生し、プロパティアクセスが低速化
 
// 最悪の例: delete による Hidden Class の退化
const obj = { a: 1, b: 2, c: 3 };
delete obj.b;
// → Hidden Class が「辞書モード (slow mode)」に退化
// → ハッシュテーブルベースのルックアップになり低速化
// 対策: delete の代わりに undefined を代入する
// obj.b = undefined; // Hidden Class を壊さない

// コード例 4: GC停止時間の測定
 
// Performance API を使ったGC停止時間の間接測定
function measureGCPauses(durationMs = 5000) {
  const pauses = [];
  let lastTime = performance.now();
  const threshold = 5; // 5ms 以上の停止をGCと推定
 
  const intervalId = setInterval(() => {
    const now = performance.now();
    const elapsed = now - lastTime;
 
    if (elapsed > threshold) {
      pauses.push({
        timestamp: now,
        duration: elapsed.toFixed(2) + "ms",
        likely: elapsed > 50 ? "Major GC" : "Minor GC"
      });
    }
    lastTime = now;
  }, 1);
 
  setTimeout(() => {
    clearInterval(intervalId);
    console.table(pauses);
    console.log(`検出された停止: ${pauses.length}回`);
  }, durationMs);
}
 
// 使用例:
// measureGCPauses(10000); // 10秒間監視

// アンチパターン 1: 暗黙のグローバル変数
 
function processData(items) {
  // "use strict" がない場合、result がグローバル変数になる
  result = items.map(item => item.value * 2); // var/let/const がない!
 
  // さらに危険: this が window を指すケース
  this.accumulatedData = new Array(100000).fill(0);
  // → window.accumulatedData としてグローバルに残り続ける
}
 
// 対策: strict mode + 適切な変数宣言
"use strict";
 
function processDataSafe(items) {
  const result = items.map(item => item.value * 2); // ブロックスコープ
  return result;
}

// アンチパターン 2: SPA でのタイマーリーク
 
class DataPollingWidget {
  constructor(endpoint) {
    this.endpoint = endpoint;
    this.data = null;
 
    // 問題: コンポーネント破棄時にクリアされない
    this.intervalId = setInterval(async () => {
      const response = await fetch(this.endpoint);
      this.data = await response.json(); // 大量のデータを蓄積
      this.render();
    }, 5000);
  }
 
  render() {
    // UIの更新処理
  }
 
  // 修正: 明示的なクリーンアップメソッド
  destroy() {
    clearInterval(this.intervalId);
    this.intervalId = null;
    this.data = null;
  }
}
 
// React での正しいパターン
function useDataPolling(endpoint, intervalMs = 5000) {
  const [data, setData] = React.useState(null);
 
  React.useEffect(() => {
    const controller = new AbortController();
 
    const poll = async () => {
      try {
        const response = await fetch(endpoint, {
          signal: controller.signal
        });
        const json = await response.json();
        setData(json);
      } catch (err) {
        if (err.name !== "AbortError") {
          console.error("Polling error:", err);
        }
      }
    };
 
    const id = setInterval(poll, intervalMs);
    poll(); // 初回即時実行
 
    // クリーンアップ: アンマウント時に確実に停止
    return () => {
      clearInterval(id);
      controller.abort();
    };
  }, [endpoint, intervalMs]);
 
  return data;
}

// 問題のあるパターン: リスナーが蓄積する
class ScrollTracker {
  constructor() {
    this.positions = [];
 
    // 問題: 匿名関数なので removeEventListener できない
    window.addEventListener("scroll", () => {
      this.positions.push({
        y: window.scrollY,
        time: Date.now()
      });
    });
  }
}
 
// 修正版 1: 名前付き関数 + removeEventListener
class ScrollTrackerFixed {
  constructor() {
    this.positions = [];
    this.handleScroll = this.handleScroll.bind(this);
    window.addEventListener("scroll", this.handleScroll);
  }
 
  handleScroll() {
    this.positions.push({ y: window.scrollY, time: Date.now() });
  }
 
  destroy() {
    window.removeEventListener("scroll", this.handleScroll);
    this.positions = [];
  }
}
 
// 修正版 2: AbortController による一括管理 (推奨)
class ScrollTrackerModern {
  constructor() {
    this.positions = [];
    this.abortController = new AbortController();
 
    window.addEventListener("scroll", () => {
      this.positions.push({ y: window.scrollY, time: Date.now() });
    }, { signal: this.abortController.signal });
 
    window.addEventListener("resize", () => {
      this.positions = []; // リサイズ時にリセット
    }, { signal: this.abortController.signal });
 
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) this.flush();
    }, { signal: this.abortController.signal });
  }
 
  flush() {
    // サーバーに送信するなどの処理
    this.positions = [];
  }
 
  destroy() {
    // 全てのリスナーを一括解除
    this.abortController.abort();
    this.positions = [];
  }
}

// エッジケース 1: eval が存在するとクロージャの最適化が無効化される
 
function createProcessor() {
  const hugeBuffer = new ArrayBuffer(100 * 1024 * 1024); // 100MB
  const metadata = { created: Date.now(), type: "buffer" };
 
  // hugeBuffer を使わないが、eval があるため全変数がキャプチャされる
  return function process(code) {
    // eval が存在すると、V8 はどの変数が使われるか静的に判定できない
    // そのため、スコープ内の全変数を保持してしまう
    return eval(code); // hugeBuffer も保持される!
  };
}
 
// 対策: クロージャのスコープを明示的に制限する
function createProcessorFixed() {
  const hugeBuffer = new ArrayBuffer(100 * 1024 * 1024);
  const result = processBuffer(hugeBuffer);
 
  // hugeBuffer を使い終わったら、別スコープで関数を作成
  return createCallback(result);
}
 
function createCallback(processedResult) {
  // このクロージャは processedResult のみをキャプチャ
  return function() {
    return processedResult;
  };
}

// エッジケース 2: 複数クロージャが同一スコープを共有する場合
 
function setupHandlers() {
  const largeData = new Array(1000000).fill("data");
  const config = { debug: true };
 
  // handler1 は largeData を使う
  const handler1 = () => {
    console.log(largeData.length);
  };
 
  // handler2 は largeData を使わない
  // しかし、V8 の実装によっては handler1 と同じ Context オブジェクトを共有
  // → largeData への参照が handler2 にも残る可能性がある
  const handler2 = () => {
    console.log(config.debug);
  };
 
  // handler1 を破棄しても handler2 が生きていれば
  // largeData が解放されない可能性がある
  return { handler1, handler2 };
}
 
// 対策: 関数を別々のスコープで定義する
function setupHandlersSafe() {
  const handler1 = createHandler1();
  const handler2 = createHandler2();
  return { handler1, handler2 };
}
 
function createHandler1() {
  const largeData = new Array(1000000).fill("data");
  return () => console.log(largeData.length);
}
 
function createHandler2() {
  const config = { debug: true };
  return () => console.log(config.debug);
}

// コード例 5: Detached DOM の検出と修正
 
// 問題のあるコード
class CardList {
  constructor(container) {
    this.container = container;
    this.cards = [];
    this.listeners = new Map();
  }
 
  addCard(data) {
    const card = document.createElement("div");
    card.className = "card";
    card.innerHTML = `
      <h3>${data.title}</h3>
      <p>${data.description}</p>
      <button class="delete-btn">削除</button>
    `;
 
    const deleteBtn = card.querySelector(".delete-btn");
    const handler = () => this.removeCard(card);
    deleteBtn.addEventListener("click", handler);
 
    // 問題: cards 配列とリスナーMap に参照を保持
    this.cards.push(card);
    this.listeners.set(card, { element: deleteBtn, handler });
 
    this.container.appendChild(card);
  }
 
  removeCard(card) {
    this.container.removeChild(card);
    // ここで cards 配列から除去しないと Detached DOM リーク!
  }
 
  // 修正版: 完全なクリーンアップ
  removeCardFixed(card) {
    // 1. イベントリスナーの解除
    const listenerInfo = this.listeners.get(card);
    if (listenerInfo) {
      listenerInfo.element.removeEventListener("click", listenerInfo.handler);
      this.listeners.delete(card);
    }
 
    // 2. 配列からの除去
    const index = this.cards.indexOf(card);
    if (index !== -1) {
      this.cards.splice(index, 1);
    }
 
    // 3. DOM からの除去
    card.remove();
  }
 
  // 全体のクリーンアップ
  destroy() {
    // 全カードのクリーンアップ
    for (const card of [...this.cards]) {
      this.removeCardFixed(card);
    }
    this.cards = [];
    this.listeners.clear();
    this.container = null;
  }
}

// console.log によるリーク
function processLargeData() {
  const data = generateHugeDataset(); // 数十MBのデータ
 
  console.log("Processing data:", data); // DevTools がdata を保持!
 
  const result = transform(data);
 
  // data は本来ここで GC 対象になるべきだが、
  // console.log が参照を保持し続ける
 
  return result;
}
 
// 対策 1: 本番環境ではログを除去
// webpack / vite の設定で console.log を strip
 
// 対策 2: 必要な情報のみをログ出力
function processLargeDataFixed() {
  const data = generateHugeDataset();
 
  console.log("Processing data, size:", data.length); // サイズのみ
 
  const result = transform(data);
  return result;
}
 
// 対策 3: 条件付きロギング
const IS_DEV = process.env.NODE_ENV === "development";
 
function debugLog(label, data) {
  if (IS_DEV) {
    console.log(label, typeof data === "object" ? JSON.stringify(data).slice(0, 200) : data);
  }
}

// コード例 6: WeakMap によるメモリ安全なキャッシュ
 
// 問題: Map を使うと、キーオブジェクトが他で不要になっても解放されない
class UnsafeCache {
  constructor() {
    this.cache = new Map();
  }
 
  compute(obj) {
    if (this.cache.has(obj)) {
      return this.cache.get(obj);
    }
    const result = expensiveComputation(obj);
    this.cache.set(obj, result);
    return result;
  }
  // obj がどこでも不要になっても、this.cache が参照を保持 → リーク
}
 
// 修正: WeakMap を使うとキーが GC されたとき自動的にエントリが削除される
class SafeCache {
  constructor() {
    this.cache = new WeakMap();
  }
 
  compute(obj) {
    if (this.cache.has(obj)) {
      return this.cache.get(obj);
    }
    const result = expensiveComputation(obj);
    this.cache.set(obj, result);
    return result;
  }
  // obj が他のどこからも参照されなくなれば、エントリも自動削除
}
 
// 実践例: DOM要素に関連データを紐付ける
const elementData = new WeakMap();
 
function attachData(element, data) {
  elementData.set(element, data);
  // element が DOM から除去され、他の参照もなくなれば
  // data も自動的に GC される
}
 
function getData(element) {
  return elementData.get(element);
}

// コード例 7: WeakRef を使ったサイズ制限なしキャッシュ
 
class WeakCache {
  constructor() {
    this.cache = new Map(); // key: string, value: WeakRef<Object>
    this.registry = new FinalizationRegistry((key) => {
      // オブジェクトがGCされたら、Mapからエントリを削除
      const ref = this.cache.get(key);
      if (ref && ref.deref() === undefined) {
        this.cache.delete(key);
        console.log(`Cache entry "${key}" was cleaned up by GC`);
      }
    });
  }
 
  set(key, value) {
    // 既存のエントリがあれば FinalizationRegistry から登録解除
    const existingRef = this.cache.get(key);
    if (existingRef) {
      this.registry.unregister(existingRef);
    }
 
    const ref = new WeakRef(value);
    this.cache.set(key, ref);
 
    // GC時の通知を登録 (unregister用のトークンとして ref を使用)
    this.registry.register(value, key, ref);
  }
 
  get(key) {
    const ref = this.cache.get(key);
    if (!ref) return undefined;
 
    const value = ref.deref();
    if (value === undefined) {
      // すでにGCされている → エントリを削除
      this.cache.delete(key);
      return undefined;
    }
    return value;
  }
 
  get size() {
    // 実際の生存エントリ数 (GC済みは含まない)
    let count = 0;
    for (const [key, ref] of this.cache) {
      if (ref.deref() !== undefined) {
        count++;
      } else {
        this.cache.delete(key);
      }
    }
    return count;
  }
}
 
// 使用例
const imageCache = new WeakCache();
 
async function loadImage(url) {
  let image = imageCache.get(url);
  if (image) {
    console.log("Cache hit:", url);
    return image;
  }
 
  console.log("Cache miss, loading:", url);
  image = await fetchAndDecodeImage(url);
  imageCache.set(url, image);
  return image;
}

// コード例 8: Explicit Resource Management (using 宣言)
 
class DatabaseConnection {
  #connection;
 
  constructor(url) {
    this.#connection = connect(url);
  }
 
  query(sql) {
    return this.#connection.execute(sql);
  }
 
  // Symbol.dispose を実装 → using 宣言で自動解放
  [Symbol.dispose]() {
    this.#connection.close();
    this.#connection = null;
    console.log("Connection disposed");
  }
}
 
// using 宣言: スコープ終了時に自動的に dispose が呼ばれる
async function fetchUserData(userId) {
  using db = new DatabaseConnection("postgres://localhost/mydb");
 
  const user = await db.query(`SELECT * FROM users WHERE id = ${userId}`);
  const orders = await db.query(`SELECT * FROM orders WHERE user_id = ${userId}`);
 
  return { user, orders };
  // ← ここで自動的に db[Symbol.dispose]() が呼ばれる
  // 例外が発生しても確実に呼ばれる (try-finally と同等)
}
 
// 非同期リソース用: Symbol.asyncDispose + await using
class StreamProcessor {
  #stream;
 
  constructor(stream) {
    this.#stream = stream;
  }
 
  async [Symbol.asyncDispose]() {
    await this.#stream.close();
    console.log("Stream closed");
  }
}
 
async function processFile(path) {
  await using processor = new StreamProcessor(openFile(path));
  // ... 処理 ...
  // スコープ終了時に await processor[Symbol.asyncDispose]() が呼ばれる
}

// コード例 9: ブラウザ上でのメモリ使用量モニタリング
 
// Performance.memory API (Chrome 限定、非推奨傾向)
function getMemoryInfo() {
  if (performance.memory) {
    return {
      usedHeapMB: (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2),
      totalHeapMB: (performance.memory.totalJSHeapSize / 1024 / 1024).toFixed(2),
      limitMB: (performance.memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2),
      usagePercent: (
        (performance.memory.usedJSHeapSize / performance.memory.jsHeapSizeLimit) * 100
      ).toFixed(1)
    };
  }
  return null;
}
 
// より新しい API: performance.measureUserAgentSpecificMemory()
// Cross-Origin Isolation が必要 (COOP + COEP ヘッダー)
async function measureMemory() {
  if (performance.measureUserAgentSpecificMemory) {
    try {
      const result = await performance.measureUserAgentSpecificMemory();
      console.log("Total bytes:", result.bytes);
      for (const breakdown of result.breakdown) {
        console.log(
          `  ${breakdown.types.join(", ")}: ${(breakdown.bytes / 1024).toFixed(0)} KB`
        );
        if (breakdown.attribution.length > 0) {
          for (const attr of breakdown.attribution) {
            console.log(`    scope: ${attr.scope}`);
            if (attr.container) {
              console.log(`    container: ${attr.container.src}`);
            }
          }
        }
      }
      return result;
    } catch (e) {
      console.error("measureUserAgentSpecificMemory failed:", e);
    }
  }
  return null;
}
 
// 定期的なメモリ監視
class MemoryMonitor {
  constructor(options = {}) {
    this.intervalMs = options.intervalMs || 10000;
    this.warningThresholdMB = options.warningThresholdMB || 100;
    this.criticalThresholdMB = options.criticalThresholdMB || 200;
    this.history = [];
    this.timerId = null;
  }
 
  start() {
    this.timerId = setInterval(() => {
      const info = getMemoryInfo();
      if (!info) return;
 
      const entry = {
        timestamp: Date.now(),
        ...info
      };
      this.history.push(entry);
 
      // 警告判定
      const usedMB = parseFloat(info.usedHeapMB);
      if (usedMB > this.criticalThresholdMB) {
        console.warn(`[Memory CRITICAL] ${usedMB} MB used`);
        this.onCritical?.(entry);
      } else if (usedMB > this.warningThresholdMB) {
        console.warn(`[Memory WARNING] ${usedMB} MB used`);
        this.onWarning?.(entry);
      }
 
      // 上昇傾向の検出
      if (this.history.length >= 10) {
        const recent = this.history.slice(-10);
        const trend = this.calculateTrend(recent);
        if (trend > 0.5) { // 1サンプルあたり0.5MB以上の増加
          console.warn(`[Memory TREND] Increasing at ${trend.toFixed(2)} MB/sample`);
        }
      }
    }, this.intervalMs);
  }
 
  stop() {
    if (this.timerId) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  }
 
  calculateTrend(entries) {
    if (entries.length < 2) return 0;
    const first = parseFloat(entries[0].usedHeapMB);
    const last = parseFloat(entries[entries.length - 1].usedHeapMB);
    return (last - first) / (entries.length - 1);
  }
}

# ヒープサイズの明示的な設定
node --max-old-space-size=8192 server.js  # Old Space を 8GB に設定
node --max-semi-space-size=64 server.js   # Semi-Space を 64MB に設定
 
# V8 の GC フラグ
node --expose-gc server.js                # global.gc() を有効化
node --trace-gc server.js                 # GC イベントをログ出力
node --trace-gc-verbose server.js         # 詳細な GC ログ

// コード例 10: Node.js でのメモリ使用量監視
 
function printMemoryUsage(label = "") {
  const usage = process.memoryUsage();
  const formatMB = (bytes) => (bytes / 1024 / 1024).toFixed(2) + " MB";
 
  console.log(`=== Memory Usage ${label} ===`);
  console.log(`  rss:          ${formatMB(usage.rss)}`);        // OS から割り当てられた総メモリ
  console.log(`  heapTotal:    ${formatMB(usage.heapTotal)}`);   // V8 ヒープ合計
  console.log(`  heapUsed:     ${formatMB(usage.heapUsed)}`);    // V8 ヒープ使用量
  console.log(`  external:     ${formatMB(usage.external)}`);    // C++ オブジェクト (Buffer等)
  console.log(`  arrayBuffers: ${formatMB(usage.arrayBuffers)}`);// ArrayBuffer の合計
}
 
// rss vs heapUsed の違い
// rss (Resident Set Size): プロセスが使用している物理メモリ全体
//   → V8ヒープ + C++オブジェクト + ネイティブアドオン + スタック
// heapUsed: V8 が管理する JavaScript オブジェクトのメモリ
//   → rss の一部
 
// 使用例: 処理前後のメモリ差分を計測
async function measureMemoryImpact(fn) {
  // GCを強制実行してベースラインを安定化
  if (global.gc) global.gc();
 
  const before = process.memoryUsage();
  await fn();
 
  if (global.gc) global.gc();
 
  const after = process.memoryUsage();
 
  const delta = {
    rss: after.rss - before.rss,
    heapTotal: after.heapTotal - before.heapTotal,
    heapUsed: after.heapUsed - before.heapUsed,
    external: after.external - before.external,
  };
 
  const formatMB = (bytes) => {
    const mb = bytes / 1024 / 1024;
    return (mb >= 0 ? "+" : "") + mb.toFixed(2) + " MB";
  };
 
  console.log("Memory impact:");
  console.log(`  rss:       ${formatMB(delta.rss)}`);
  console.log(`  heapUsed:  ${formatMB(delta.heapUsed)}`);
  console.log(`  external:  ${formatMB(delta.external)}`);
 
  return delta;
}

// Buffer のメモリ特性の確認
function demonstrateBufferMemory() {
  printMemoryUsage("Before");
 
  // Buffer.alloc: external memory に割り当て
  const buf1 = Buffer.alloc(50 * 1024 * 1024); // 50MB
  printMemoryUsage("After Buffer.alloc(50MB)");
  // → external が増加、heapUsed はほぼ変わらない
 
  // 通常の配列: V8 ヒープに割り当て
  const arr = new Array(5 * 1024 * 1024).fill(0);
  printMemoryUsage("After Array(5M)");
  // → heapUsed が増加
}

// コード例 11: React コンポーネントでのメモリリーク対策
 
import { useState, useEffect, useRef, useCallback } from "react";
 
// アンチパターン: アンマウント後の state 更新
function LeakyComponent({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    // 問題: アンマウント後に setUser が呼ばれるとメモリリーク + 警告
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);
 
  return <div>{user?.name}</div>;
}
 
// 修正版: AbortController + クリーンアップ
function SafeComponent({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
 
    async function fetchUser() {
      try {
        const res = await fetch(`/api/users/${userId}`, {
          signal: controller.signal
        });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== "AbortError") {
          setError(err);
        }
      }
    }
 
    fetchUser();
 
    return () => {
      controller.abort(); // アンマウント時にリクエストをキャンセル
    };
  }, [userId]);
 
  if (error) return <div>Error: {error.message}</div>;
  return <div>{user?.name}</div>;
}
 
// WebSocket のクリーンアップ
function useWebSocket(url) {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef(null);
 
  useEffect(() => {
    const ws = new WebSocket(url);
    wsRef.current = ws;
 
    ws.onmessage = (event) => {
      setMessages(prev => {
        // メモリ制限: 最新1000件のみ保持
        const updated = [...prev, JSON.parse(event.data)];
        return updated.slice(-1000);
      });
    };
 
    ws.onerror = (error) => {
      console.error("WebSocket error:", error);
    };
 
    return () => {
      ws.close(); // アンマウント時に接続を閉じる
      wsRef.current = null;
    };
  }, [url]);
 
  const send = useCallback((data) => {
    wsRef.current?.send(JSON.stringify(data));
  }, []);
 
  return { messages, send };
}
 
// IntersectionObserver のクリーンアップ
function useLazyLoad(ref) {
  const [isVisible, setIsVisible] = useState(false);
 
  useEffect(() => {
    const element = ref.current;
    if (!element) return;
 
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(element); // 一度表示されたら監視を停止
        }
      },
      { threshold: 0.1 }
    );
 
    observer.observe(element);
 
    return () => {
      observer.disconnect(); // クリーンアップ
    };
  }, [ref]);
 
  return isVisible;
}

// Vue 3 Composition API でのメモリ管理
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
 
export function usePolling(fetchFn, intervalMs = 5000) {
  const data = ref(null);
  const error = ref(null);
  let timerId = null;
  let abortController = null;
 
  async function poll() {
    abortController = new AbortController();
    try {
      data.value = await fetchFn({ signal: abortController.signal });
    } catch (err) {
      if (err.name !== "AbortError") {
        error.value = err;
      }
    }
  }
 
  onMounted(() => {
    poll();
    timerId = setInterval(poll, intervalMs);
  });
 
  onBeforeUnmount(() => {
    // 確実にクリーンアップ
    if (timerId) clearInterval(timerId);
    if (abortController) abortController.abort();
  });
 
  return { data, error };
}

// コード例 12: Puppeteer を使った自動メモリリーク検出
 
const puppeteer = require("puppeteer");
 
async function detectMemoryLeak(url, action, iterations = 10) {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
 
  await page.goto(url, { waitUntil: "networkidle0" });
 
  // ウォームアップ: 最初の数回は計測対象外
  for (let i = 0; i < 3; i++) {
    await action(page);
  }
 
  // GC を実行してベースラインを取得
  await page.evaluate(() => {
    if (window.gc) window.gc();
  });
 
  const memorySnapshots = [];
 
  for (let i = 0; i < iterations; i++) {
    await action(page);
 
    // GC を強制実行
    await page.evaluate(() => {
      if (window.gc) window.gc();
    });
 
    // メモリ使用量を記録
    const metrics = await page.metrics();
    memorySnapshots.push({
      iteration: i,
      jsHeapUsedSize: metrics.JSHeapUsedSize,
      jsHeapTotalSize: metrics.JSHeapTotalSize,
      documents: metrics.Documents,
      nodes: metrics.Nodes,
      jsEventListeners: metrics.JSEventListeners,
    });
  }
 
  await browser.close();
 
  // リーク判定: メモリが単調増加しているか
  const heapValues = memorySnapshots.map(s => s.jsHeapUsedSize);
  const firstHalf = heapValues.slice(0, Math.floor(heapValues.length / 2));
  const secondHalf = heapValues.slice(Math.floor(heapValues.length / 2));
 
  const avgFirst = firstHalf.reduce((a, b) => a + b, 0) / firstHalf.length;
  const avgSecond = secondHalf.reduce((a, b) => a + b, 0) / secondHalf.length;
 
  const leakDetected = avgSecond > avgFirst * 1.1; // 10%以上の増加
 
  return {
    leakDetected,
    snapshots: memorySnapshots,
    averageFirstHalf: (avgFirst / 1024 / 1024).toFixed(2) + " MB",
    averageSecondHalf: (avgSecond / 1024 / 1024).toFixed(2) + " MB",
    growth: ((avgSecond - avgFirst) / avgFirst * 100).toFixed(1) + "%",
  };
}
 
// 使用例:
// const result = await detectMemoryLeak(
//   "http://localhost:3000",
//   async (page) => {
//     await page.click("#open-modal");
//     await page.waitForSelector(".modal");
//     await page.click("#close-modal");
//     await page.waitForSelector(".modal", { hidden: true });
//   },
//   20
// );
// console.log("Leak detected:", result.leakDetected);

// 演習 1: 以下のコードのメモリリークを修正せよ
 
class ChatRoom {
  constructor() {
    this.messages = [];
    this.subscribers = [];
 
    // (A) リサイズハンドラ
    window.addEventListener("resize", () => {
      this.adjustLayout();
    });
 
    // (B) メッセージポーリング
    setInterval(async () => {
      const newMessages = await fetch("/api/messages").then(r => r.json());
      this.messages.push(...newMessages);
      this.render();
    }, 3000);
  }
 
  subscribe(callback) {
    this.subscribers.push(callback);
  }
 
  adjustLayout() {
    // レイアウト調整処理
  }
 
  render() {
    this.subscribers.forEach(cb => cb(this.messages));
  }
 
  destroy() {
    // 何もしていない!
  }
}

// Node.js: --expose-gc フラグが必要
if (global.gc) {
  global.gc(); // Minor GC + Major GC を実行
} else {
  console.warn("GC is not exposed. Run with --expose-gc flag.");
}

// WeakMap が最適: DOM要素へのメタデータ付与
const tooltipData = new WeakMap();
 
function setTooltip(element, text) {
  tooltipData.set(element, { text, visible: false });
  // element がDOMから除去されGCされると、tooltipDataのエントリも自動消滅
}
 
// Map が最適: 文字列キーのキャッシュ
const apiCache = new Map();
 
function cacheResponse(url, data) {
  apiCache.set(url, { data, timestamp: Date.now() });
  // 明示的なサイズ管理が可能
  if (apiCache.size > 100) {
    const oldestKey = apiCache.keys().next().value;
    apiCache.delete(oldestKey);
  }
}

// ArrayBuffer: バッキングストアは external memory
const buffer = new ArrayBuffer(1024 * 1024); // 1MB
// → V8 ヒープ上には ArrayBuffer オブジェクト (~100 bytes)
// → external memory に 1MB の連続メモリブロック
 
// SharedArrayBuffer: 複数の Worker 間で共有可能
const shared = new SharedArrayBuffer(1024);
// → Web Worker 間でメモリを共有
// → Cross-Origin Isolation (COOP + COEP) が必要
 
// TypedArray: ArrayBuffer のビューであり、追加のメモリは消費しない
const view1 = new Uint8Array(buffer);       // buffer の全体を参照
const view2 = new Float64Array(buffer, 0, 128); // buffer の一部を参照
// → view1, view2 は同じ buffer のメモリを共有

// メインスレッド
const worker = new Worker("worker.js");
 
// コピー転送: データが複製される (元データは保持される)
const data = new Uint8Array(1024 * 1024);
worker.postMessage({ type: "process", data: data });
// → data のコピーが Worker に送られる (メモリが一時的に2倍)
 
// 所有権移転 (Transfer): ゼロコピーでデータを移動
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage({ type: "process", buffer: buffer }, [buffer]);
// → buffer の所有権が Worker に移転
// → メインスレッド側の buffer.byteLength は 0 になる (使用不可)
// → メモリの複製が発生しない

// 検出例: イベントリスナーの解除忘れ
class ComponentWithLeak {
  constructor() {
    this.data = new Array(10000).fill(0);
    // 問題: removeEventListener していない
    window.addEventListener('resize', this.handleResize.bind(this));
  }
  handleResize() { /* ... */ }
}
 
// Heap Snapshot の Retainers:
// GC root → Window → listeners → resize → Function → ComponentWithLeak → data
//                                                       ^^^^^^^^^^^^^^^^
//                                                       ここでリークが発生

function createProcessor() {
  const hugeData = new Array(1000000).fill(Math.random()); // 8MB
  const metadata = { size: hugeData.length, created: Date.now() };
 
  // 問題: metadata だけ使いたいのに、hugeData も一緒にキャプチャされる
  return function() {
    console.log(`Processed ${metadata.size} items`);
  };
}
 
const process = createProcessor();
// → hugeData は関数スコープ内で定義されているため、
//   返された関数がクロージャとしてキャプチャし続ける
//   (process が生きている限り 8MB が解放されない)

function createProcessor() {
  const hugeData = new Array(1000000).fill(Math.random());
  const size = hugeData.length; // プリミティブ値を抽出
  const created = Date.now();
 
  // hugeData はここでスコープを抜けるので GC 対象になる
 
  return function() {
    console.log(`Processed ${size} items at ${created}`);
  };
  // → クロージャは size と created だけをキャプチャ (16バイト程度)
}

class DataGrid {
  constructor(data) {
    this.data = data; // 大量のデータ
    this.renderCache = new Map();
 
    // 問題: アロー関数で this を暗黙的にキャプチャ
    document.getElementById('refresh-btn').addEventListener('click', () => {
      this.refresh(); // this.data も一緒にキャプチャされる
    });
  }
 
  refresh() {
    this.renderCache.clear();
    // ... 再描画処理
  }
 
  destroy() {
    // 問題: イベントリスナーが解除されていない
    // → this (と this.data) が解放されない
  }
}