Map / Set の .entries() .keys() .values() の違いを可視化・体験できる発展ツール（HTML + JS）です。
実際に「ボタンを押すと結果が表示され、構造を視覚的に理解できる」ようになっています。
See the Pen Map / Set entries()・keys()・values() Visualization 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 entries()・keys()・values() 可視化ツール</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
margin: 2em;
background: #f9fafb;
color: #333;
}
h1 { color: #1e40af; }
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5em;
}
.card {
background: white;
border-radius: 1em;
padding: 1em;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
pre {
background: #f3f4f6;
padding: 0.8em;
border-radius: 0.5em;
}
button {
margin: 0.3em;
padding: 0.4em 1em;
border: none;
border-radius: 0.4em;
cursor: pointer;
background: #2563eb;
color: white;
}
button:hover {
background: #1e3a8a;
}
.output {
min-height: 60px;
font-family: monospace;
background: #eef2ff;
padding: 0.5em;
border-radius: 0.4em;
}
</style>
</head>
<body>
<h1>🔍 Map / Set の entries(), keys(), values() 可視化ツール</h1>
<div class="container">
<!-- Map -->
<div class="card">
<h2>🗺️ Map</h2>
<pre>const map = new Map([
["dog", "woof"],
["cat", "meow"],
["cow", "moo"]
]);</pre>
<button onclick="showMap('entries')">entries()</button>
<button onclick="showMap('keys')">keys()</button>
<button onclick="showMap('values')">values()</button>
<div id="map-output" class="output"></div>
</div>
<!-- Set -->
<div class="card">
<h2>🍀 Set</h2>
<pre>const set = new Set(["apple", "banana", "cherry"]);</pre>
<button onclick="showSet('entries')">entries()</button>
<button onclick="showSet('keys')">keys()</button>
<button onclick="showSet('values')">values()</button>
<div id="set-output" class="output"></div>
</div>
</div>
<script>
const map = new Map([
["dog", "woof"],
["cat", "meow"],
["cow", "moo"]
]);
const set = new Set(["apple", "banana", "cherry"]);
function visualize(iter) {
return [...iter].map(v => JSON.stringify(v)).join("\n");
}
function showMap(type) {
let output;
switch (type) {
case 'entries': output = visualize(map.entries()); break;
case 'keys': output = visualize(map.keys()); break;
case 'values': output = visualize(map.values()); break;
}
document.getElementById("map-output").textContent = output;
}
function showSet(type) {
let output;
switch (type) {
case 'entries': output = visualize(set.entries()); break;
case 'keys': output = visualize(set.keys()); break;
case 'values': output = visualize(set.values()); break;
}
document.getElementById("set-output").textContent = output;
}
</script>
</body>
</html>
