Map / Set のメソッドを実際に操作しながら理解できる「実験ツール」を作りましょう。
初心者が「set(), delete(), has()」の効果をリアルタイムで体感できる構成です。
Map / Set メソッド実験ツール
学べること：
Mapのキーと値の関係Setの重複排除の動作has(),delete()の効果を視覚的に確認
See the Pen Map / Set Method 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 メソッド実験ツール</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: 100px;
overflow-y: auto;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>🧪 Map / Set メソッド実験ツール</h1>
<p><code>set()</code>・<code>delete()</code>・<code>has()</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="mapDel">delete()</button>
<button id="mapHas">has()</button>
</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="setDel">delete()</button>
<button id="setHas">has()</button>
</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");
// ====== 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);
}
}
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("mapDel").addEventListener("click", () => {
const key = document.getElementById("mapKey").value.trim();
if (!key) return;
const result = myMap.delete(key);
renderMap();
mapLog.innerHTML += result ? `🗑️ delete("${key}") 成功<br>` : `⚠️ "${key}" は存在しません<br>`;
});
document.getElementById("mapHas").addEventListener("click", () => {
const key = document.getElementById("mapKey").value.trim();
const has = myMap.has(key);
mapLog.innerHTML += has ? `🔍 has("${key}") → true<br>` : `🔍 has("${key}") → false<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);
}
}
document.getElementById("setAdd").addEventListener("click", () => {
const val = document.getElementById("setValue").value.trim();
if (!val) return;
const beforeSize = mySet.size;
mySet.add(val);
renderSet();
if (mySet.size === beforeSize) {
setLog.innerHTML += `⚠️ "${val}" はすでに存在（重複無視）<br>`;
} else {
setLog.innerHTML += `✅ add("${val}")<br>`;
setList.lastChild.classList.add("highlight");
}
});
document.getElementById("setDel").addEventListener("click", () => {
const val = document.getElementById("setValue").value.trim();
const result = mySet.delete(val);
renderSet();
setLog.innerHTML += result ? `🗑️ delete("${val}") 成功<br>` : `⚠️ "${val}" は存在しません<br>`;
});
document.getElementById("setHas").addEventListener("click", () => {
const val = document.getElementById("setValue").value.trim();
const has = mySet.has(val);
setLog.innerHTML += has ? `🔍 has("${val}") → true<br>` : `🔍 has("${val}") → false<br>`;
});
</script>
</body>
</html>
このツールの見どころ
| 操作 | Map の挙動 | Set の挙動 |
|---|---|---|
set() / add() | 新しいキー or 値を追加 | 同じ値なら無視（重複排除） |
delete() | 指定したキーを削除 | 指定した値を削除 |
has() | そのキーが存在するか確認 | その値が存在するか確認 |
体験例
- Map で
キー: user, 値: Alice
→ set("user", "Alice")
- Set で
値: 10 → add("10")
値: 10 → add("10")（重複は無視される）
- delete / has を試すと、ログに即結果が表示されます。
