「Set の動作がアニメーションで体験できるデモ」付き HTML を用意しました。
重複した値を追加しようとすると「弾かれる」ように動きます。
初心者が「Set は重複を持たない」ことを目で理解できる構成です。
See the Pen Set Operation Simulation (with Animation) 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>Set の動作シミュレーション（アニメーションつき）</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
background: #f9fafb;
color: #333;
text-align: center;
padding: 30px;
}
h1 { color: #0078d7; }
.set-container {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 20px;
margin: 40px auto;
flex-wrap: wrap;
max-width: 600px;
min-height: 200px;
padding: 20px;
border: 2px dashed #0078d7;
border-radius: 12px;
background: #eef6ff;
transition: all 0.3s ease;
}
.item {
background: #0078d7;
color: white;
padding: 10px 18px;
border-radius: 20px;
font-weight: bold;
opacity: 0;
transform: scale(0.5);
transition: all 0.4s ease;
}
.item.show {
opacity: 1;
transform: scale(1);
}
.bounce {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0% { transform: translateY(0); }
30% { transform: translateY(-25px); }
60% { transform: translateY(0); }
100% { transform: translateY(-8px); }
}
.message {
margin-top: 20px;
font-size: 1.1em;
}
input {
padding: 10px;
border: 2px solid #0078d7;
border-radius: 8px;
font-size: 1em;
margin-right: 10px;
}
button {
padding: 10px 18px;
border: none;
border-radius: 8px;
background: #0078d7;
color: white;
font-weight: bold;
cursor: pointer;
}
button:hover {
background: #005fa3;
}
</style>
</head>
<body>
<h1>🧺 Set の動作シミュレーション</h1>
<p>下の入力欄に値を入れて「追加」してみよう。<br>
同じ値を2回入れると、Set がそれを「弾く」様子が見えます！</p>
<div>
<input id="valueInput" type="text" placeholder="例: apple">
<button id="addBtn">追加</button>
</div>
<div class="set-container" id="setContainer"></div>
<div class="message" id="message"></div>
<script>
const set = new Set();
const container = document.getElementById("setContainer");
const message = document.getElementById("message");
document.getElementById("addBtn").addEventListener("click", () => {
const value = document.getElementById("valueInput").value.trim();
if (!value) return;
if (set.has(value)) {
// 既に存在 → バウンドアニメーション
message.textContent = `⚠️ "${value}" はすでに存在します！（Setは重複を許しません）`;
const existing = [...container.children].find(el => el.textContent === value);
if (existing) {
existing.classList.remove("bounce");
void existing.offsetWidth; // アニメーションリセット
existing.classList.add("bounce");
}
} else {
// 新規追加
set.add(value);
message.textContent = `✅ "${value}" を追加しました！`;
const item = document.createElement("div");
item.className = "item";
item.textContent = value;
container.appendChild(item);
requestAnimationFrame(() => item.classList.add("show"));
}
document.getElementById("valueInput").value = "";
document.getElementById("valueInput").focus();
});
</script>
</body>
</html>
このデモの特徴
| 項目 | 内容 |
|---|---|
| 🎯 目的 | Set の「重複禁止」をアニメーションで実感 |
| 💥 重複入力時 | 既存の要素がポンッと跳ねる（bounce アニメ） |
| 🌱 初回入力時 | 値がふわっと出現（scale + fade） |
| 🪶 UI | シンプルで柔らかい色、初心者向け教材に最適 |
| 🧩 動作例 | "apple" → "banana" → "apple" と入力してみると効果がよくわかる |
