前回の「Map / Set 実験ツール」を発展させて、.forEach() と .size の動作を体験できるインタラクティブツール を作ります。
このツールでは、
Map/Setの中身をリアルタイムに.forEach()で走査して表示.sizeの値を自動カウント表示
ができ、動作を「目で見て」理解できます。
Map / Set 発展ツール：forEach() & size 実験
学べること
.forEach()のコールバック引数（value, key, map/value, value, set）.sizeプロパティが自動更新される様子MapとSetの繰り返し構造の違い
See the Pen Map / Set forEach & size Experiment Tool by MONO365 -Color your days- (@monoqlo365) on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map / Set forEach & size 実験ツール</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
background: #f8fafc;
color: #333;
text-align: center;
padding: 30px;
}
h1 { color: #0078d7; margin-bottom: 0.3em; }
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
margin-top: 20px;
}
.panel {
width: 42%;
min-width: 280px;
background: #fff;
border: 2px solid #0078d7;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 20px;
}
h2 {
background: #0078d7;
color: white;
border-radius: 8px;
padding: 6px 0;
}
input {
padding: 8px;
border: 2px solid #0078d7;
border-radius: 8px;
margin: 5px;
}
button {
padding: 8px 14px;
border: none;
border-radius: 8px;
background: #0078d7;
color: white;
font-weight: bold;
cursor: pointer;
}
button:hover { background: #005fa3; }
.pair, .item {
background: #eef6ff;
margin: 6px auto;
width: 85%;
padding: 6px 10px;
border-radius: 6px;
animation: fadeIn 0.5s ease;
}
.key { color: #0078d7; font-weight: bold; }
.value { color: #00b894; }
.highlight {
animation: pulse 0.6s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { background-color: #fff; }
50% { background-color: #fff7d1; }
100% { background-color: #fff; }
}
.log {
margin-top: 15px;
text-align: left;
background: #f0f9ff;
padding: 10px;
border-left: 5px solid #0078d7;
border-radius: 8px;
height: 120px;
overflow-y: auto;
font-size: 0.9em;
}
.size-display {
margin-top: 8px;
font-size: 1.1em;
font-weight: bold;
color: #005fa3;
}
</style>
</head>
<body>
<h1>🔍 Map / Set forEach() & size 実験ツール</h1>
<p><code>forEach()</code> の呼び出し順や <code>size</code> の変化を体験してみよう！</p>
<div class="container">
<!-- Mapパネル -->
<div class="panel" id="mapPanel">
<h2>🗺️ Map</h2>
<div>
<input id="mapKey" placeholder="キー">
<input id="mapValue" placeholder="値">
<button id="mapAdd">set()</button>
<button id="mapRun">forEach()</button>
<button id="mapClear">clear()</button>
</div>
<div class="size-display" id="mapSize">size: 0</div>
<div id="mapList"></div>
<div class="log" id="mapLog"></div>
</div>
<!-- Setパネル -->
<div class="panel" id="setPanel">
<h2>🔢 Set</h2>
<div>
<input id="setValue" placeholder="値">
<button id="setAdd">add()</button>
<button id="setRun">forEach()</button>
<button id="setClear">clear()</button>
</div>
<div class="size-display" id="setSize">size: 0</div>
<div id="setList"></div>
<div class="log" id="setLog"></div>
</div>
</div>
<script>
const myMap = new Map();
const mySet = new Set();
// DOM参照
const mapList = document.getElementById("mapList");
const mapLog = document.getElementById("mapLog");
const setList = document.getElementById("setList");
const setLog = document.getElementById("setLog");
const mapSizeDisplay = document.getElementById("mapSize");
const setSizeDisplay = document.getElementById("setSize");
// ====== Map ======
function renderMap() {
mapList.innerHTML = "";
for (const [k, v] of myMap.entries()) {
const div = document.createElement("div");
div.className = "pair";
div.innerHTML = `<span class="key">${k}</span> → <span class="value">${v}</span>`;
mapList.appendChild(div);
}
mapSizeDisplay.textContent = `size: ${myMap.size}`;
}
document.getElementById("mapAdd").addEventListener("click", () => {
const key = document.getElementById("mapKey").value.trim();
const value = document.getElementById("mapValue").value.trim();
if (!key || !value) return;
myMap.set(key, value);
renderMap();
mapLog.innerHTML += `✅ set("${key}", "${value}")<br>`;
mapList.lastChild.classList.add("highlight");
});
document.getElementById("mapRun").addEventListener("click", () => {
mapLog.innerHTML += `▶️ forEach 開始<br>`;
myMap.forEach((value, key, map) => {
mapLog.innerHTML += `🔁 key=${key}, value=${value}<br>`;
});
mapLog.innerHTML += `✅ forEach 終了<br>`;
});
document.getElementById("mapClear").addEventListener("click", () => {
myMap.clear();
renderMap();
mapLog.innerHTML += `🗑️ clear()<br>`;
});
// ====== Set ======
function renderSet() {
setList.innerHTML = "";
for (const v of mySet.values()) {
const div = document.createElement("div");
div.className = "item";
div.textContent = v;
setList.appendChild(div);
}
setSizeDisplay.textContent = `size: ${mySet.size}`;
}
document.getElementById("setAdd").addEventListener("click", () => {
const val = document.getElementById("setValue").value.trim();
if (!val) return;
const before = mySet.size;
mySet.add(val);
renderSet();
if (mySet.size === before) {
setLog.innerHTML += `⚠️ "${val}" は重複（無視）<br>`;
} else {
setLog.innerHTML += `✅ add("${val}")<br>`;
setList.lastChild.classList.add("highlight");
}
});
document.getElementById("setRun").addEventListener("click", () => {
setLog.innerHTML += `▶️ forEach 開始<br>`;
mySet.forEach((value, key, set) => {
setLog.innerHTML += `🔁 value=${value}<br>`;
});
setLog.innerHTML += `✅ forEach 終了<br>`;
});
document.getElementById("setClear").addEventListener("click", () => {
mySet.clear();
renderSet();
setLog.innerHTML += `🗑️ clear()<br>`;
});
</script>
</body>
</html>
このデモで体験できること
| 比較項目 | 🗺️ Map | 🔢 Set |
|---|---|---|
.forEach() の引数 | (value, key, map) | (value, value, set) |
.size | 登録されたキー数 | 登録された値数 |
clear() | 全要素削除 | 全要素削除 |
| 重複処理 | キーが重なれば上書き | 値が重複すると無視 |
試してみよう！
- Map に「キー：name」「値：Halu」を追加
- Set に「値：apple」「値：apple」を2回追加
- 各 forEach を実行して、どの順に出力されるか見てみよう
.sizeの表示が自動的に更新されるのを確認しよう
