JavaScript | 「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツール

APP JavaScript
スポンサーリンク

では次は、「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツールを作りましょう。
CodePenなどブラウザ上でそのまま動く形式にします（HTML + CSS + JavaScript）。

See the Pen String Method Visualization Animation by MONO365 -Color your days- (@monoqlo365) on CodePen.

概要

このツールでは、スライダーで「インデックス（位置）」を動かすと、
どの文字が charAt() で選ばれたり、
どこまでが slice() や substring() の範囲になるかをリアルタイムに表示します。

また、絵文字を含む文字列を入れると codePointAt() の結果（Unicode番号）も一緒に表示されます。

完成版コード（CodePen用）

以下をコピペすればそのまま動作します👇

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字列メソッド可視化アニメ</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f6f9fc;
    color: #333;
    padding: 30px;
    text-align: center;
  }
  h1 { font-size: 24px; margin-bottom: 10px; }
  .box {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
  }
  input[type=text] {
    width: 80%;
    font-size: 18px;
    padding: 5px;
    text-align: center;
  }
  .chars {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    font-size: 24px;
  }
  .char {
    padding: 6px 12px;
    border-radius: 8px;
    background: #e8ecf1;
    transition: 0.3s;
    position: relative;
  }
  .char.active {
    background: #4f8cff;
    color: white;
    transform: scale(1.2);
  }
  .range-info {
    margin: 20px 0;
  }
  .result {
    font-size: 18px;
    margin-top: 15px;
    background: #f0f4fa;
    padding: 10px;
    border-radius: 10px;
  }
  .label {
    font-weight: bold;
    color: #555;
  }
  .highlight {
    background: rgba(255, 221, 0, 0.6);
    border-radius: 6px;
  }
</style>
</head>
<body>
  <h1>🎬 文字列メソッドの可視化アニメ</h1>

  <div class="box">
    <p>文字列を入力してください：</p>
    <input id="textInput" type="text" value="A😊BC" />
    <div class="range-info">
      <label>インデックス: <span id="indexValue">0</span></label><br>
      <input type="range" id="indexSlider" min="0" max="5" value="0" />
    </div>
    <div class="chars" id="charDisplay"></div>

    <div class="result" id="charAtResult"></div>
    <div class="result" id="sliceResult"></div>
    <div class="result" id="substringResult"></div>
    <div class="result" id="codePointResult"></div>
  </div>

<script>
const textInput = document.getElementById("textInput");
const slider = document.getElementById("indexSlider");
const indexValue = document.getElementById("indexValue");
const charDisplay = document.getElementById("charDisplay");

const charAtResult = document.getElementById("charAtResult");
const sliceResult = document.getElementById("sliceResult");
const substringResult = document.getElementById("substringResult");
const codePointResult = document.getElementById("codePointResult");

function updateDisplay() {
  const str = textInput.value;
  const chars = Array.from(str); // 絵文字も1文字扱いにする
  const index = Number(slider.value);
  indexValue.textContent = index;
  slider.max = Math.max(chars.length, 1);

  // 文字を可視化
  charDisplay.innerHTML = "";
  chars.forEach((ch, i) => {
    const span = document.createElement("div");
    span.textContent = ch;
    span.classList.add("char");
    if (i === index) span.classList.add("active");
    charDisplay.appendChild(span);
  });

  // 各メソッド結果
  const charAtVal = str.charAt(index);
  const sliceVal = str.slice(0, index + 1);
  const substringVal = str.substring(0, index + 1);
  const cp = str.codePointAt(index);

  charAtResult.innerHTML = `<span class="label">charAt(${index}):</span> 「${charAtVal || "(空文字)"}」`;
  sliceResult.innerHTML = `<span class="label">slice(0, ${index + 1}):</span> 「${sliceVal}」`;
  substringResult.innerHTML = `<span class="label">substring(0, ${index + 1}):</span> 「${substringVal}」`;
  codePointResult.innerHTML = `<span class="label">codePointAt(${index}):</span> ${cp === undefined ? "undefined" : cp + " → " + String.fromCodePoint(cp)}`;
}

textInput.addEventListener("input", updateDisplay);
slider.addEventListener("input", updateDisplay);
updateDisplay();
</script>
</body>
</html>
JavaScript

使い方

  1. CodePen（またはローカルHTML）で貼り付けて実行
  2. 上の入力欄に任意の文字列（例：A😊B や こんにちは🍎）を入力
  3. 下のスライダーを動かすと：
    • 現在のインデックス位置がハイライトされる
    • charAt() / slice() / substring() / codePointAt() の結果がリアルタイムで更新

学習ポイント（視覚的に理解できること）

確認できる内容見える効果
charAt() は 1文字だけ返す青色で選ばれた1文字が拡大表示される
slice() / substring() は 範囲を返すスライダー位置までの部分が黄色で強調される
codePointAt() は 数値も表示絵文字を扱うときの正しい挙動が確認できる

応用アイデア

  • ✅ 範囲を動かせる2本スライダー（slice(start, end)を動的に表示）
  • ✅ substringとsliceの動作差（負の数や逆順）をアニメで比較
  • ✅ 絵文字のサロゲートペア構造を表示（内部コード単位を可視化）
  • ✅ クイズモード（「出力結果を当てよう！」→解説ポップアップ付き）

強化版：文字列メソッド総合可視化アニメ

追加された機能：
1️⃣ start / end の2本スライダーで slice() / substring() の範囲を操作
2️⃣ slice と substring の違いが色で比較表示
3️⃣ 絵文字の内部構造（サロゲートペア：UTF-16単位）を視覚化

See the Pen String Method Visualization Animation #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

学べるポイント

機能学べる内容
🔵 slice(start, end)end は含まれない。負の値を使うと後ろから数える。
🟠 substring(start, end)負の数は 0 に扱われ、start > end のときは自動で入れ替え。
🧩 サロゲートペア絵文字などは2つのUTF-16コードで1文字を表現している。内部構造が見える！

最終版：文字列メソッド可視化ツール（CodePen対応）

追加機能：
1️⃣ 負のインデックスアニメ（slice(-2) などを視覚化）
2️⃣ クリックで codePointAt / fromCodePoint の結果を表示
3️⃣ 実行スライドシミュレーター（文字列の変化をアニメで再生）

See the Pen String Method Visualization Animation #3 by MONO365 -Color your days- (@monoqlo365) on CodePen.

スポンサーリンク
タイトルとURLをコピーしました