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

生徒

「先生、JavaScriptでエラーが出たんですけど“型”が原因って言われました。型って何ですか？」

先生

「JavaScriptでは値に‘型’があります。型が違うと、思わぬエラーが起きます。今日は代表的な型エラーと、その直し方を見ていきましょう！」

1. 文字列と数値を混ぜて起きる「予期しない結合」

「例：let total = \"100\" + 50;は“10050”になる」というエラーです。

JavaScriptは文字列と数値を+でつなぐと文字列として扱います。意図した計算結果にならないので困りますね。

対処法: 数値に変換してから計算しましょう。


let total = Number("100") + 50;
console.log(total); // 150

2. undefinedやnullを使った計算で出るNaN

「例：let x; console.log(x + 5); → NaNになる」

undefinedは値が入っていない状態、nullは意図的に“何もない”ことを示しますが、どちらも計算に使えません。

対処法: 値があるか確認してから計算します。


let x;
if (x !== undefined && x !== null) {
  console.log(x + 5);
} else {
  console.log("値を設定してください");
}

3. 真偽値を数値と混ぜたときの思わぬ計算結果

trueは1、falseは0に変換されるので注意！


console.log(true + 10);  // 11
console.log(false + 10); // 10

対処法: Boolean型を明示的に扱うか、意図しない場合は条件文で分岐しましょう。

4. 配列やオブジェクトに対する誤った操作

「例：let arr = []; console.log(arr.length());」など、配列のプロパティは関数ではありません。

対処法: 公式ドキュメントやtypeofで型を確認し、正しい操作を使いましょう。


let arr = [1,2,3];
console.log(arr.length);  // 3

5. 比較演算子の落とし穴：==と===

==は型変換を行って比較しますが、===は型も値も一致しないとtrueになりません。


console.log("5" == 5);   // true
console.log("5" === 5);  // false

対処法: 常に===を使って、型の違いによるミスを防ぎましょう。

6. 関数にnullやundefinedが渡されて起きるエラー

「例：function f(x){ console.log(x.name); } f(null);」はエラーになります。

対処法: 関数の最初でif (!x)などでチェックしましょう。


function f(x){
  if (x && x.name) {
    console.log(x.name);
  } else {
    console.log("データがありません");
  }
}

7. JSON処理で起きる型のずれ

localStorageなどに保存したオブジェクトは文字列になるため、JSON.parse後も型が変わります。

対処法: JSON.stringify / parse 組み合わせと型チェックを使いましょう。


let obj = {id:1};
let str = JSON.stringify(obj);
let parsed = JSON.parse(str);
console.log(typeof parsed.id); // number

8. 明示的な型変換で安全に処理する

自動変換を避けるには、String(), Number(), Boolean()などを使って明示的に型を変換しましょう。


let val = "123";
let num = Number(val);
let str = String(456);
let flag = Boolean(1);

こうすることで、エラーの原因になる型のずれをなくせます。

まとめ

JavaScriptで起きる型エラーは、初心者だけでなく経験者にとっても見落としがちな原因となることが多いので、今回の記事で扱った代表的な例を丁寧に整理しながら振り返っておきましょう。まず大切なのは、JavaScriptが「動的型付け言語」であるという点です。変数にどんな型の値でも入れられる一方、その柔軟さゆえに意図しない型のまま計算や比較が行われ、予期しない結果が返ってくることがあります。とくに文字列と数値の結合、undefinedやnullとの演算、真偽値と数値の混在、配列やオブジェクトに対する誤ったアクセスは、日常的に起きやすい典型的なエラーのひとつです。こうしたエラーを防ぐためには、値の型を意識しながらコードを書くことが欠かせません。また、比較演算子の違いや、JSON処理時に発生する型のずれにも気を配っておくと、より安全にデータ操作ができるようになります。さらに、型エラーの多くは「明示的に型変換を行う」ことで回避できます。JavaScriptにはNumber、String、Booleanなどの変換関数が用意されており、意図しない型のまま計算してしまうリスクを減らすことができます。複雑な仕組みのアプリケーションやデータ処理を行うときでも、型をしっかり把握し、どのデータがどの型として処理されるべきかを整理しておけば、エラーの原因になりやすいズレを防ぐことができ、より安定したコードを書くことができます。今回の理解を土台に、型チェックのタイミングや安全なデータ操作の習慣を身につけていくと、JavaScriptの動き方を直感的に捉えられるようになるはずです。

型エラーを防ぐためのサンプルコード

実際のコードで型エラーを回避する方法を改めて確認しておきましょう。型変換や型チェックを行うことで、意図しない動きを未然に防ぐことができます。


// 値を安全に扱うための例
function safeAdd(a, b) {
  // 型チェック
  if (typeof a !== "number" || typeof b !== "number") {
    return "数値を入力してください";
  }
  return a + b;
}

console.log(safeAdd(10, 20));      // 30
console.log(safeAdd("10", 20));    // 数値を入力してください

// JSON処理の安全な例
let user = {id: 1, name: "太郎"};
let saved = JSON.stringify(user);
let restored = JSON.parse(saved);

// 型を確認
if (typeof restored.id === "number") {
  console.log("数値として処理できます");
}

このように、型を確認する習慣や意図的に型変換を行う書き方を身につけておくことで、予測できない動作を防ぎ、安定したアプリケーション作りが可能になります。JavaScriptの型は柔軟で扱いやすい反面、気をつけていないとすぐに思わぬ結果を生み出すことがあります。今回の内容を何度も見返しながら、普段のコードに少しずつ取り入れていくと、エラーの原因を自然に察知できるようになり、より安心してプログラムを書けるようになります。

先生と生徒の振り返り会話

生徒

「先生、データ型のエラーってこんなにたくさん種類があるんですね。知らないまま使っていたら危なかったです…！」

先生

「そうですね。特にJavaScriptは型変換が自動で行われるので、気づかないうちに意図しない値になってしまうことがあります。型を意識するだけで大きなトラブルを避けられますよ。」

生徒

「たしかに、文字列と数値の結合とか、以前見たことがあります。エラーじゃないけど結果が変になって困った記憶があります。」

先生

「そういう場合こそ明示的にNumberやStringを使って変換するとよいですね。自分でコントロールできれば、予測不可能な動きがずっと減ります。」

生徒

「型チェックも大事なんですね。関数にnullを渡してエラーになるのもよく見ます。」

先生