変数とデータ型とは？受講ログで見えた「型が変わる瞬間」のつまずき方

変数とデータ型とは？つまずくのは「型が変わる瞬間」だった

変数は「値に名前をつけて置いておく箱」、データ型は「その値が数値なのか文字なのか」。入門書の説明はここで終わります。ところが、実際に手を動かすと最初に止まるのはこの説明を読んだ直後です。

ナミノリの受講ログを見ると、その場所がはっきり出ていました。

受講ログで見ると、型そのものでは詰まっていない

ナミノリの無料講座には各レクチャーに確認テストがあり、何回目で合格したかが記録に残ります。再挑戦の回数は、そのまま「どこでつまずいたか」の記録になります。

レクチャー	完了した人	2回以上かかった人
データ型	20人	2人（10%）
変数と条件分岐	17人	6人（35%）
キャスト（型変換）	18人	12人（67%）

型の種類を覚えるところは、ほとんどの人が一度で通ります。詰まるのは型が変わる瞬間です。キャストの回では平均2.22回、最も多い人で9回かかっていました。

つまり「文字列と数値の違い」を覚えることが難しいのではありません。違うものが混ざったときに何が起きるかを予測できないことが難しいのです。だからこの記事は、そこを中心に進めます。

※ 集計は2026年9月20日時点。完了したレクチャーのみを対象にしており、母数は各20人前後と小さい数字です。

変数は「あとから読む人のための名前」

まず変数から確認します。

const price = 1200;
const itemName = "コーヒー豆";
console.log(itemName + "は" + price + "円です");

実行すると コーヒー豆は1200円です と表示されます。

const は「あとから入れ替えない」という宣言です。入れ替えようとするとエラーになります。

const price = 1200;
price = 1500;

結果は TypeError: Assignment to constant variable. です。入れ替える必要があるものだけ let を使います。迷ったら const で書き始めて、困ったときに let へ変えるのが安全です。

同じ + が、型によって別の動きをする

ここからが本題です。次の2行の結果を、実行する前に予測してください。

console.log("20" + 5);
console.log("20" - 5);

結果は上から 205 と 15 です。

同じ "20" と 5 を使っているのに、+ は文字をつなぎ、- は計算をしました。+ には「文字をつなぐ」という役割があるため、片方が文字列だと数値のほうを文字に合わせて連結します。- にはその役割がないので、文字列のほうを数値に変換して計算します。

この一貫性のなさが、キャストで67%の人が2回以上つまずいた理由です。演算子ごとに挙動が違うことを、先に知っておく必要があります。

意図した型に、自分で変換する

予測できないなら、任せずに自分で変換します。

console.log(Number("20") + 5);

結果は 25 です。Number() で文字列を数値にしてから足しています。

変換には落とし穴が2つあります。

console.log(Number(""));
console.log(Number("abc"));

結果は 0 と NaN です。

空文字は 0になります。入力欄が空のまま送信されたとき、「未入力」ではなく「0」として計算が進んでしまうのはこれが原因です。数値にできない文字は NaN（Not a Number）になります。NaN は計算に混ざると、その先すべてが NaN になります。

だから、変換したら変換できたかを確かめるのが手順になります。

const input = "abc";
const value = Number(input);
if (Number.isNaN(value)) {
  console.log("数値として読めませんでした");
} else {
  console.log(value + 5);
}

比較でも型は効いてくる

console.log("20" == 20);
console.log("20" === 20);

結果は true と false です。

== は型を揃えてから比べるため、文字の "20" と数値の 20 が等しいと判定されます。=== は型も含めて比べるので等しくなりません。実務では === を使います。 == は、意図しない一致を生みます。

ついでに知っておくと、あとで驚かない

console.log(0.1 + 0.2);

結果は 0.30000000000000004 です。0.3 にはなりません。

コンピュータが小数を2進数で扱うためで、JavaScriptに限った話ではありません。金額の計算では小数のまま比較せず、円単位の整数で扱うのが定石です。

自分で確かめる3つ

読んだだけでは身につきません。ブラウザの開発者ツール（F12キー）のコンソールで、次の3つを試してください。

1. "20" + 5 の "20" を "8" に変えると、結果はどうなるか
2. Number("10円") は何になるか。理由を説明できるか
3. 空の入力欄を想定して Number("") を使うと、何が起きるか

3つとも結果を予測してから実行し、外れたらなぜ外れたかを一文で書く。再挑戦の記録が示していたのは、ここを飛ばすと同じ場所で何度も止まるということでした。

まとめ

• 型の種類を覚えるところでは、受講ログ上ほとんど詰まっていない（再挑戦10%）
• 詰まるのは型が変わる瞬間。キャストの回は67%が2回以上かかっていた
• + は文字をつなぎ、- は計算する。演算子で挙動が変わる
• 変換したら Number.isNaN() で確かめる。空文字は0、変換できない文字はNaN
• 比較は === を使う

条件分岐に進むなら、if文でつまずくのは「何と比べるか」が続きです。

変数・条件分岐・繰り返しを順番に確認するなら、プログラミング入門講座が5本構成です。各回に確認テストがあるので、どこでつまずいたかが自分の記録として残ります。何から始めるか決まっていない場合は、プログラミングは何から始めるかを先に読んでください。