JavaScript | 「Number() / parseInt() / parseFloat() / +」の変換結果をリアルタイムで比較できる学習用ミニアプリ

JavaScript JavaScript
スポンサーリンク

See the Pen Numerical Conversion Animation Comparison by MONO365 -Color your days- (@monoqlo365) on CodePen.

仕組みの説明

  • 入力欄に文字列を入力すると、
    → 各変換方法の結果が表にリアルタイム反映。
  • 結果が変わるたびに、色とアニメーションで変化を強調。
  • NaN になったら赤、数値なら緑、文字列はグレーに光る。

💻 完成コード（そのままブラウザで動きます）

以下のコードをコピーして、
➡ CodePen / jsFiddle / ローカルHTMLファイル に貼るだけでOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>数値変換アニメ比較</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f5f7fa;
    padding: 40px;
    color: #333;
  }
  h1 {
    font-size: 1.5em;
    margin-bottom: 20px;
  }
  input {
    font-size: 1.2em;
    padding: 8px 12px;
    border: 2px solid #ccc;
    border-radius: 8px;
    width: 250px;
    margin-bottom: 20px;
    transition: border-color 0.3s;
  }
  input:focus {
    border-color: #0078ff;
    outline: none;
  }
  table {
    border-collapse: collapse;
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  th, td {
    padding: 14px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  th {
    background: #0078ff;
    color: white;
  }
  tr:last-child td {
    border-bottom: none;
  }
  .result {
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.4s ease;
  }
  .num {
    color: #0c8b2c;
    background-color: #e5ffea;
  }
  .nan {
    color: #c60000;
    background-color: #ffe6e6;
  }
  .neutral {
    color: #666;
    background-color: #f2f2f2;
  }
  .fade {
    animation: pulse 0.4s ease;
  }
  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>
</head>
<body>

<h1>🔢 数値変換結果のリアルタイム比較</h1>
<p>任意の値を入力して、<code>Number()</code> / <code>parseInt()</code> / <code>parseFloat()</code> / <code>+</code> の違いを確認しよう。</p>

<input type="text" id="inputValue" placeholder="例: 123.45px / true / null / abc" />

<table>
  <thead>
    <tr>
      <th>変換方法</th>
      <th>結果</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Number()</td><td id="numResult" class="result neutral">—</td></tr>
    <tr><td>parseInt()</td><td id="intResult" class="result neutral">—</td></tr>
    <tr><td>parseFloat()</td><td id="floatResult" class="result neutral">—</td></tr>
    <tr><td>単項 +</td><td id="plusResult" class="result neutral">—</td></tr>
  </tbody>
</table>

<script>
const input = document.getElementById("inputValue");
const numCell = document.getElementById("numResult");
const intCell = document.getElementById("intResult");
const floatCell = document.getElementById("floatResult");
const plusCell = document.getElementById("plusResult");

input.addEventListener("input", () => {
  const v = input.value;

  updateCell(numCell, tryConvert(() => Number(evalValue(v))));
  updateCell(intCell, tryConvert(() => parseInt(evalValue(v))));
  updateCell(floatCell, tryConvert(() => parseFloat(evalValue(v))));
  updateCell(plusCell, tryConvert(() => +evalValue(v)));
});

function tryConvert(fn) {
  try {
    const val = fn();
    return (typeof val === "number" && isNaN(val)) ? "NaN" : val;
  } catch {
    return "（エラー）";
  }
}

function evalValue(v) {
  // "true" や "null" を文字列で入力したときに扱えるように
  try {
    return eval(v);
  } catch {
    return v;
  }
}

function updateCell(cell, value) {
  cell.textContent = value;
  cell.classList.remove("num", "nan", "neutral", "fade");

  if (value === "NaN") cell.classList.add("nan");
  else if (typeof value === "number") cell.classList.add("num");
  else cell.classList.add("neutral");

  cell.classList.add("fade");
}
</script>

</body>
</html>
JavaScript

使い方

  1. ブラウザで開く
  2. 入力欄にいろいろ入れてみる： "123.45px" true null "abc" " 42 " undefined
  3. 各セルが色とアニメで変化して、変換結果を可視化！
    • ✅ 緑：数値
    • ❌ 赤：NaN
    • ⚪ 灰：その他・変換できない値

学習ポイントを強化

このアプリで見えるように、次の性質を自然に理解できます：

  • Number() と + はほぼ同じ結果になる
  • parseInt() は途中まででも数字を拾う
  • parseFloat() は小数点まで読む
  • true / null / undefined / "abc" の扱いが一目瞭然

では、すべての拡張機能を盛り込んだ豪華版を紹介します。
追加機能は以下の通りです：

  1. 型表示 … 結果の横に number / string / NaN / undefined を表示
  2. 棒グラフ表示 … 数値なら高さで比較、NaN/数値以外は色で表示
  3. クイズモード … 入力値を見て、どの変換方法が何を返すかを選ぶ練習付き

See the Pen Numerical Conversion Animation Comparison #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ 追加機能説明

  1. 型表示
    • 結果セルの横に型（number / string / NaN / undefined）を表示
    • 色分けとアニメ付き
  2. 棒グラフ表示
    • 数値 → 高さで比較（最大300pxで制限）
    • NaN / エラー → 赤色固定、非数値 → 灰色
  3. クイズモード
    • 「答え合わせ」ボタンで、各変換結果と型をまとめて表示
    • 入力値を自分で考え、答えを確認して学習可能
スポンサーリンク
タイトルとURLをコピーしました