以下は、WeakMapを使って画像キャッシュを安全に扱うデモです。
一度読み込んだ画像をWeakMapに一時保存し、参照がなくなった画像は自動的にGC（ガベージコレクション）される仕組みをシミュレーションします。
コンセプト
- Map はキーを強参照する → メモリに残り続ける
- WeakMap はキーを弱参照 → 参照が切れると自動的に削除される
See the Pen WeakMap Image Cache Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>WeakMap 画像キャッシュデモ</title>
<style>
body { font-family: sans-serif; padding: 1em; }
img { width: 100px; margin: 5px; border-radius: 8px; box-shadow: 0 0 4px #ccc; }
.log { margin-top: 1em; background: #f9f9f9; padding: 10px; border-radius: 8px; }
</style>
</head>
<body>
<h2>WeakMap で画像キャッシュを管理</h2>
<button id="load">画像を読み込み</button>
<button id="release">参照を切る（GC対象に）</button>
<div id="preview"></div>
<div class="log" id="log"></div>
<script>
const cache = new WeakMap(); // 弱参照キャッシュ
let currentImage = null; // 現在の参照（保持中）
function log(msg) {
const el = document.getElementById('log');
el.innerHTML += msg + "<br>";
}
document.getElementById('load').onclick = () => {
const img = new Image();
img.src = "https://placekitten.com/150/150?" + Math.random();
img.onload = () => {
document.getElementById('preview').innerHTML = "";
document.getElementById('preview').appendChild(img);
cache.set(img, "キャッシュ済み");
currentImage = img;
log("✅ 画像を読み込み → WeakMap にキャッシュしました");
};
};
document.getElementById('release').onclick = () => {
if (currentImage) {
document.getElementById('preview').innerHTML = "";
log("🧹 画像の参照を切りました。GCで自動的に解放されます。");
currentImage = null;
} else {
log("（すでに参照なし）");
}
};
</script>
</body>
</html>
動作イメージ
- 「画像を読み込み」 ボタンを押すと
→ 画像が生成され、WeakMap にキャッシュされる。 - 「参照を切る」 を押すと
→ JS上の参照がなくなり、GCのタイミングでWeakMapからも削除される。
（実際のGC発生はブラウザが自動で行うため、即時確認はできません。）
学習ポイント
- WeakMapのキーはオブジェクトのみ
- 参照が切れると自動削除されるため、
→ 「画像キャッシュ」「DOM要素関連データ」などに最適。 - メモリリーク防止に有効。
