JavaScript | 実際に Map / Set を操作するデモ

JavaScript
2025.10.14
スポンサーリンク

ラウザ上で 実際に Map / Set を操作して結果をリアルタイム表示できるインタラクティブデモ（HTML + JavaScript） です。
「値の追加」「削除」「存在確認」などを自分で試せます。

See the Pen Map/Set Manipulation Demo by MONO365 -Color your days- (@monoqlo365) on CodePen. 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Map / Set 操作デモ</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #f5f7fa;
      color: #333;
      margin: 2rem;
      line-height: 1.6;
    }
    h1 { text-align: center; }
    section {
      background: #fff;
      border-radius: 12px;
      padding: 1rem 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    button {
      margin: 0.3rem;
      padding: 0.4rem 0.8rem;
      border: none;
      background: #0078d7;
      color: white;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover { background: #005fa3; }
    input {
      padding: 0.4rem;
      margin-right: 0.3rem;
    }
    .output {
      background: #f0f0f0;
      border-radius: 8px;
      padding: 0.5rem;
      margin-top: 0.5rem;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>🗺️ Map / Set 操作デモ</h1>

  <section>
    <h2>Map（キーと値のペア）</h2>
    <input id="mapKey" placeholder="キーを入力" />
    <input id="mapValue" placeholder="値を入力" />
    <button onclick="addMap()">追加</button>
    <button onclick="deleteMap()">削除</button>
    <button onclick="checkMap()">存在確認</button>
    <button onclick="clearMap()">全削除</button>
    <div class="output" id="mapOutput"></div>
  </section>

  <section>
    <h2>Set（一意な値のコレクション）</h2>
    <input id="setValue" placeholder="値を入力" />
    <button onclick="addSet()">追加</button>
    <button onclick="deleteSet()">削除</button>
    <button onclick="checkSet()">存在確認</button>
    <button onclick="clearSet()">全削除</button>
    <div class="output" id="setOutput"></div>
  </section>

  <script>
    const myMap = new Map();
    const mySet = new Set();

    function updateMapDisplay() {
      let text = "";
      for (const [key, value] of myMap) {
        text += `${key} → ${value}\n`;
      }
      document.getElementById("mapOutput").textContent =
        text || "(空です)";
    }

    function updateSetDisplay() {
      let text = "";
      for (const value of mySet) {
        text += `${value}\n`;
      }
      document.getElementById("setOutput").textContent =
        text || "(空です)";
    }

    // Map 操作
    function addMap() {
      const key = document.getElementById("mapKey").value;
      const value = document.getElementById("mapValue").value;
      if (key === "") return alert("キーを入力してください");
      myMap.set(key, value);
      updateMapDisplay();
    }

    function deleteMap() {
      const key = document.getElementById("mapKey").value;
      myMap.delete(key);
      updateMapDisplay();
    }

    function checkMap() {
      const key = document.getElementById("mapKey").value;
      alert(myMap.has(key) ? "存在します ✅" : "存在しません ❌");
    }

    function clearMap() {
      myMap.clear();
      updateMapDisplay();
    }

    // Set 操作
    function addSet() {
      const value = document.getElementById("setValue").value;
      if (value === "") return alert("値を入力してください");
      mySet.add(value);
      updateSetDisplay();
    }

    function deleteSet() {
      const value = document.getElementById("setValue").value;
      mySet.delete(value);
      updateSetDisplay();
    }

    function checkSet() {
      const value = document.getElementById("setValue").value;
      alert(mySet.has(value) ? "存在します ✅" : "存在しません ❌");
    }

    function clearSet() {
      mySet.clear();
      updateSetDisplay();
    }

    // 初期表示
    updateMapDisplay();
    updateSetDisplay();
  </script>
</body>
</html>
HTML

使い方

  1. このコードをコピーして、map-set-demo.html として保存。
  2. ブラウザで開くと、MapとSetを別々に操作できるUIが表示されます。
  3. 「キーと値を追加」「削除」「存在確認」「全削除」などを試して、
    Mapの構造（キー→値）とSetの構造（重複なしの値集合） の違いが体感できます。
次へ
12345678
スポンサーリンク
タイトルとURLをコピーしました