では、「charAt() の動きを視覚的に理解するアニメーション付き説明」を作りましょう。
CodePen などでそのまま実行できる形（HTML + CSS + JS）で、
インデックスがスライドして、選ばれた文字がハイライトされるアニメーションをつけます。
See the Pen charAt() Animation Explanation by MONO365 -Color your days- (@monoqlo365) on CodePen.
アニメーション付き charAt() 視覚説明
概要
- 入力文字列の中を「インデックス（0〜）」がスライドしながら動き、
charAt(index)がどの文字を選ぶかを視覚的に表示します。 - 下にあるボタンを押すと、インデックスが1つずつ進みます。
- 選ばれた文字が大きく表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>charAt() アニメーション解説</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
text-align: center;
background: #f0f4ff;
padding: 50px;
}
h1 {
font-size: 1.5em;
color: #333;
}
.string-container {
display: flex;
justify-content: center;
gap: 10px;
font-size: 2em;
margin-top: 30px;
position: relative;
}
.char {
padding: 10px 15px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s, background 0.3s;
}
.highlight {
background: #4a90e2;
color: white;
transform: scale(1.2);
}
.index-bar {
position: absolute;
bottom: -40px;
left: 0;
display: flex;
justify-content: center;
width: 100%;
gap: 25px;
font-size: 1em;
color: #666;
}
#output {
font-size: 1.5em;
margin-top: 40px;
color: #222;
}
button {
margin-top: 40px;
padding: 10px 25px;
font-size: 1em;
background: #4a90e2;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #357ac8;
}
.fade-in {
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from {opacity: 0; transform: scale(0.8);}
to {opacity: 1; transform: scale(1);}
}
</style>
</head>
<body>
<h1>🌸 charAt() の動きを見てみよう！</h1>
<div class="string-container" id="stringContainer"></div>
<div class="index-bar" id="indexBar"></div>
<div id="output">クリックしてスタート！</div>
<button id="nextBtn">▶ 次の文字へ</button>
<script>
const str = "花言葉";
const container = document.getElementById("stringContainer");
const indexBar = document.getElementById("indexBar");
const output = document.getElementById("output");
const btn = document.getElementById("nextBtn");
let index = 0;
// 文字を並べて表示
[...str].forEach((ch) => {
const span = document.createElement("span");
span.className = "char";
span.textContent = ch;
container.appendChild(span);
});
// インデックス表示
for (let i = 0; i < str.length; i++) {
const idx = document.createElement("div");
idx.textContent = i;
indexBar.appendChild(idx);
}
const chars = document.querySelectorAll(".char");
btn.addEventListener("click", () => {
// すべてのハイライトを解除
chars.forEach(ch => ch.classList.remove("highlight"));
if (index < str.length) {
chars[index].classList.add("highlight");
const ch = str.charAt(index);
output.innerHTML = `str.charAt(${index}) ➜ <strong class="fade-in">${ch}</strong>`;
index++;
} else {
output.textContent = "すべての文字を読み終えました 🎉";
index = 0; //リセット
}
});
</script>
</body>
</html>
このサンプルで学べること
| 学べる要素 | 説明 |
|---|---|
charAt(index) | 文字列のインデックス位置にある文字を取り出す |
| インデックスは0始まり | 最初の文字は index=0 |
| 範囲外では空文字 | 終わりまで行くと "" が返る |
| DOM＋アニメーションで可視化 | インデックス移動を視覚的に理解できる |
使い方
- 上のコードを CodePen や ブラウザのローカルHTMLファイルに貼り付ける
- 実行して「▶ 次の文字へ」ボタンをクリック
- インデックスがスライドして、どの文字が選ばれるかが見える
絵文字を含む文字列で charAt() の挙動を視覚化したバージョン
これで 「見た目1文字＝内部では2単位」 の落とし穴が一目でわかります。
See the Pen charAt() Animation Explanation #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
このサンプルで学べること
- 絵文字は見た目1文字でも内部的には2単位
- 例えば
"😊"や"🌸"は 1文字に見えても charAt では分割される - インデックスを進めるごとに半分だけハイライトされるので「内部構造」を視覚的に理解できる
- 例えば
- A/B/C など普通の文字は charAt で正しく1文字取得
- 視覚的に「ハイライト」＋「index」表示
- どの文字が返るのか、どの部分で分割されるのかを理解できる
使い方
- 上のコードを CodePen に貼るか、ローカルHTMLファイルで開く
- 「次の文字へ」ボタンをクリックすると、インデックスが1つずつ進む
- ハイライトされた文字と出力を見て、絵文字が2単位で扱われていることを確認
💡 補足：
- この挙動を正しく扱うには
Array.from(str)などを使うと「見た目1文字単位」で安全に処理可能です。 - このアニメで charAt の落とし穴（絵文字やサロゲートペア）を直感的に理解できます。
