先生と生徒の会話形式で理解しよう

生徒

「JavaScriptって、自動でデータの種類を変えてくれるって聞いたんですけど、それって便利なんですか？」

先生

「確かに便利なこともありますが、思わぬミスの原因にもなります。特に初心者のうちは注意が必要ですよ。」

生徒

「どんな風に間違えるんですか？」

先生

「それでは、JavaScriptの“型変換”の仕組みと注意点を一緒に見ていきましょう！」

1. JavaScriptの型とは？

JavaScriptでは、値にはそれぞれ「型（データの種類）」があります。たとえば、数字は「数値型」、文字は「文字列型」、真偽値（はい・いいえを表す値）は「真偽値型」です。

型が異なるものを一緒に扱うとき、JavaScriptは自動で型を変換しようとします。これを「暗黙の型変換（implicit coercion）」といいます。

2. よくある自動変換の例（文字列＋数値）

文字列と数値を+でつなげると、JavaScriptは数値を文字列に自動で変換します。


let age = 20;
let message = "私は" + age + "歳です";
console.log(message);


私は20歳です

これは便利なように見えますが、すべての場面で正しく動くとは限りません。

+は文字列の連結にも使われるため、型変換が起きやすいです。一方、-などの演算子は数値としての計算を優先します。


console.log("10" + 5);  // 文字列 + 数値 → 文字列
console.log("10" - 5);  // 文字列 - 数値 → 数値に変換して計算


105
5

「"10" + 5」は文字列に変換され、「10" - 5」は数値として処理されるという違いに注意しましょう。

trueは1、falseは0として数値に変換されることがあります。


console.log(true + 1);
console.log(false + 1);

2
1

真偽値が数値になるのは意外かもしれませんが、JavaScriptではこういった暗黙の変換が起きます。

nullとundefinedも、自動変換されると違った結果を出すことがあります。


console.log(null + 1);
console.log(undefined + 1);


1
NaN

nullは0として扱われるのに対し、undefinedは計算できないためNaN（Not a Number）になります。

==は、型が違っても内容が合っていれば「等しい」と判断します。一方===は、型と値の両方が同じでないと「等しい」とは認めません。


console.log("5" == 5);   // true（型が違っても値が同じ）
console.log("5" === 5);  // false（型が違うので等しくない）


true
false

「比較するときは===を使う」ことが、エラーを防ぐ大切な習慣です。

JavaScriptでは、以下のような値も数値に変換されることがあります。


console.log(Number(""));       // 0
console.log(Number("123"));    // 123
console.log(Number(false));    // 0
console.log(Number(undefined)); // NaN


0
123
0
NaN

このように、見た目だけでは予測しにくい変換が起きるため、明示的に型を扱うことが大切です。

JavaScriptで意図しない動作を防ぐには、明示的な型変換を使いましょう。


let value = "123";
let num = Number(value); // 明示的に文字列を数値に変換
console.log(num + 1);    // 124

このように、明示的に型を変換しておけば、予期しないエラーやバグを防げます。