「図つきで Map / Set の構造を理解できる解説付き版」を示します。
先ほどのクイズに加えて、視覚的に仕組みを理解できるセクションを上部に追加しています。
See the Pen Keyed Collections Illustrated Quiz 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: #f9fafb; padding: 20px; color: #333; line-height: 1.7; }
h1, h2 { color: #222; }
.card { background: #fff; padding: 15px; margin: 15px 0; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.diagram { display: flex; gap: 40px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.box { background: #eef6ff; border: 2px solid #0078d7; border-radius: 8px; padding: 10px 15px; min-width: 150px; text-align: center; }
.arrow { font-size: 24px; color: #0078d7; align-self: center; }
.note { background: #fff3cd; padding: 10px; border-radius: 8px; border-left: 5px solid #ffcc00; }
button { padding: 8px 16px; border: none; background: #0078d7; color: white; border-radius: 6px; cursor: pointer; }
button:hover { background: #005fa3; }
.result { font-weight: bold; margin-top: 10px; }
.explanation { display: none; margin-top: 5px; padding: 10px; background: #eef; border-radius: 6px; }
</style>
</head>
<body>
<h1>🔑 Keyed Collections 図解つきクイズ</h1>
<p>JavaScript の <strong>Map</strong> と <strong>Set</strong> は、キーや値を管理する特別なコレクションです。<br>
まずは図で直感的に見てみましょう 👇</p>
<div class="card">
<h2>🗺️ Map の構造</h2>
<div class="diagram">
<div class="box">キー 🗝️: "name"</div>
<div class="arrow">➡️</div>
<div class="box">値 📦: "Halu"</div>
</div>
<div class="diagram">
<div class="box">キー 🗝️: 42</div>
<div class="arrow">➡️</div>
<div class="box">値 📦: "Answer"</div>
</div>
<p class="note">Map は「キー ➡ 値」のペアを順序つきで保存します。</p>
</div>
<div class="card">
<h2>🧺 Set の構造</h2>
<div class="diagram">
<div class="box">🍎 "apple"</div>
<div class="box">🍌 "banana"</div>
<div class="box">🍇 "grape"</div>
</div>
<p class="note">Set は「値だけ」を保持します。同じ値を2回追加しても1つだけ残ります。</p>
</div>
<hr>
<h2>🧩 ミニクイズ</h2>
<p>以下の質問に答えて「採点」ボタンを押すと、正解と解説が見られます。</p>
<div id="quiz">
<div class="card question" data-answer="B" data-explanation="Map はキーと値のペアを保持します。Set は値だけを保持します。">
<p><strong>Q1.</strong> Map と Set の違いはどれ？</p>
<label><input type="radio" name="q1" value="A"> どちらも値だけを保存する</label><br>
<label><input type="radio" name="q1" value="B"> Map はキーと値を保存し、Set は値のみを保存する</label><br>
<label><input type="radio" name="q1" value="C"> Set はキーと値を保存し、Map は値だけを保存する</label>
</div>
<div class="card question" data-answer="A" data-explanation="Map のキーにはオブジェクトを使えますが、普通のオブジェクトは文字列キーしか使えません。">
<p><strong>Q2.</strong> 普通のオブジェクトと Map の主な違いは？</p>
<label><input type="radio" name="q2" value="A"> Map はオブジェクトをキーにできる</label><br>
<label><input type="radio" name="q2" value="B"> オブジェクトはキーに関係なく順番を保証する</label><br>
<label><input type="radio" name="q2" value="C"> Map は文字列キーしか使えない</label>
</div>
<div class="card question" data-answer="C" data-explanation="Set は重複を自動で無視するため、size は 2 になります。">
<p><strong>Q3.</strong> Set に同じ値を2回追加するとどうなる？</p>
<label><input type="radio" name="q3" value="A"> 2つ追加される</label><br>
<label><input type="radio" name="q3" value="B"> エラーが出る</label><br>
<label><input type="radio" name="q3" value="C"> 1つだけ保持される</label>
</div>
</div>
<button id="check">採点する</button>
<div id="score" class="result"></div>
<script>
document.getElementById("check").addEventListener("click", () => {
let correct = 0;
const questions = document.querySelectorAll(".question");
questions.forEach(q => {
const answer = q.dataset.answer;
const selected = q.querySelector("input:checked");
const explanationBox = document.createElement("div");
explanationBox.className = "explanation";
if (selected) {
if (selected.value === answer) {
correct++;
explanationBox.innerHTML = `✅ 正解！<br>${q.dataset.explanation}`;
explanationBox.style.background = "#e6ffed";
} else {
explanationBox.innerHTML = `❌ 不正解。<br>${q.dataset.explanation}`;
}
} else {
explanationBox.innerHTML = "⚠️ 回答が選択されていません。";
}
const oldExp = q.querySelector(".explanation");
if (oldExp) oldExp.remove();
q.appendChild(explanationBox);
explanationBox.style.display = "block";
});
document.getElementById("score").innerHTML = `🎯 正解数: ${correct} / ${questions.length}`;
});
</script>
</body>
</html>
このバージョンのポイント
- 視覚的に理解できる「図解セクション」を最初に配置
- Map: キー → 値のペア
- Set: 値の集合（重複なし）
- 色・アイコンで直感的に区別可能
- 下部に自動採点クイズ＋解説
