JavaScript |キー付きコレクション ミニテスト（Map vs Set）

JavaScript JavaScript
2025.10.14
スポンサーリンク

「Map vs Set」理解チェック用の自動採点ミニ練習ページ（HTML＋JavaScript）」です。ブラウザでそのまま開くと、選択肢を選んで採点できます。

See the Pen Map vs Set Mini Practice Problems 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 vs Set ミニ練習問題</title>
<style>
body { font-family: "Segoe UI", sans-serif; background: #fafafa; padding: 2em; }
h1 { text-align: center; color: #333; }
.question { background: #fff; padding: 1em; margin: 1em 0; border-radius: 10px; box-shadow: 0 2px 6px #ccc; }
button { padding: 0.5em 1em; font-size: 1em; border-radius: 8px; border: none; cursor: pointer; }
.correct { color: green; font-weight: bold; }
.wrong { color: crimson; font-weight: bold; }
#result { font-size: 1.2em; text-align: center; margin-top: 1em; }
</style>
</head>
<body>
<h1>🔑 Map vs Set ミニ練習問題</h1>

<div id="quiz">
  <div class="question" data-answer="b">
    <p>① 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の方が常に高速</label>
  </div>

  <div class="question" data-answer="a">
    <p>② Mapで任意のオブジェクトをキーにできる？</p>
    <label><input type="radio" name="q2" value="a"> できる</label><br>
    <label><input type="radio" name="q2" value="b"> できない（文字列だけ）</label>
  </div>

  <div class="question" data-answer="c">
    <p>③ Setの特徴として正しいのは？</p>
    <label><input type="radio" name="q3" value="a"> 値が重複しても追加できる</label><br>
    <label><input type="radio" name="q3" value="b"> キーと値を対応づける</label><br>
    <label><input type="radio" name="q3" value="c"> 値が一意で重複しない</label>
  </div>

  <div class="question" data-answer="b">
    <p>④ Mapの要素数を取得する正しいプロパティは？</p>
    <label><input type="radio" name="q4" value="a"> length</label><br>
    <label><input type="radio" name="q4" value="b"> size</label><br>
    <label><input type="radio" name="q4" value="c"> count</label>
  </div>

  <div class="question" data-answer="a">
    <p>⑤ Setを使って配列の重複を除く正しい方法は？</p>
    <label><input type="radio" name="q5" value="a"> [...new Set(arr)]</label><br>
    <label><input type="radio" name="q5" value="b"> arr.unique()</label><br>
    <label><input type="radio" name="q5" value="c"> Set(arr).toArray()</label>
  </div>
</div>

<div style="text-align:center;">
  <button onclick="checkAnswers()">採点する</button>
</div>

<p id="result"></p>

<script>
function checkAnswers() {
  let correct = 0;
  const questions = document.querySelectorAll('.question');

  questions.forEach((q, i) => {
    const answer = q.dataset.answer;
    const selected = q.querySelector('input:checked');
    const p = q.querySelector('p');

    // 以前の表示をリセット
    q.querySelectorAll('.correct, .wrong').forEach(e => e.remove());

    if (selected) {
      const resultSpan = document.createElement('span');
      if (selected.value === answer) {
        resultSpan.textContent = ' ✓ 正解';
        resultSpan.className = 'correct';
        correct++;
      } else {
        resultSpan.textContent = ' ✗ 不正解';
        resultSpan.className = 'wrong';
      }
      p.appendChild(resultSpan);
    }
  });

  const total = questions.length;
  const result = document.getElementById('result');
  result.textContent = `あなたの得点: ${correct} / ${total}`;
}
</script>
</body>
</html>
HTML

特徴

  • 全5問、クリックで選択→「採点する」で自動採点
  • 各問題ごとに「✓ 正解 / ✗ 不正解」が即表示
  • 100%ブラウザで動作（サーバー不要）

「キー付きコレクション（Map / Set）」の自動採点＋解説表示つきミニ練習ページ（HTML + JS）です。

ブラウザで開くだけで動作します。

See the Pen Keyed Collections Mini-Test (Map vs Set) 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>Keyed Collections ミニクイズ</title>
<style>
  body { font-family: sans-serif; background: #f9fafb; padding: 20px; line-height: 1.7; }
  h1 { color: #333; }
  .question { background: #fff; padding: 15px; margin: 15px 0; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
  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>各質問に答えて「採点」ボタンを押してください。解説も見られます！</p>

<div id="quiz">
  <div class="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="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="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>
HTML

特徴

  • 全問自動採点
  • 解説がその場で展開
  • 初心者でも理解しやすい用語
  • ブラウザで保存＆開くだけでOK
スポンサーリンク
タイトルとURLをコピーしました