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

生徒

「先生、if文や条件式を書いたらエラーになってしまいました。どうしてでしょうか？」

先生

「JavaScriptの条件式では、書き方や変数の状態によってよくあるエラーがあります。順番に見ていきましょう。」

生徒

「具体的にはどんなエラーが多いですか？」

先生

「主に三つあります。未定義の変数を使うエラー、型の違いによる比較エラー、そして構文ミスです。」

1. 未定義の変数を使ったエラー

JavaScriptでは、宣言していない変数を条件式で使うとエラーになります。これはプログラムがどの値を使えばよいかわからないためです。


if (userAge > 18) {
  console.log("成人です");
}


ReferenceError: userAge is not defined

この場合は、変数を先に宣言して値を代入する必要があります。


let userAge = 20;
if (userAge > 18) {
  console.log("成人です");
}


成人です

2. 型の違いによる比較エラー

文字列と数値を混ぜて比較すると、意図しない結果になったり、警告が出たりします。JavaScriptでは自動的に型を変換することもありますが、注意が必要です。


let num = "10";

if (num > 5) {
  console.log("numは5より大きい");
}


numは5より大きい

この場合、文字列"10"が数値10として比較されますが、意図しない挙動を避けるために明示的に型変換するのが安全です。


let num = "10";

if (Number(num) > 5) {
  console.log("numは5より大きい");
}


numは5より大きい

条件式の括弧や波括弧を忘れると、構文エラーが発生します。初心者によくあるミスのひとつです。


if num > 10 {
  console.log("10より大きい");
}


SyntaxError: Unexpected identifier

正しい書き方は、条件式を丸括弧で囲み、処理を波括弧で囲みます。


let num = 15;

if (num > 10) {
  console.log("10より大きい");
}


10より大きい

変数がnullやundefinedの可能性がある場合に条件式で直接値を使うと、予期しない挙動になることがあります。


let userName;

if (userName.length > 0) {
  console.log("ユーザー名あり");
}


TypeError: Cannot read property 'length' of undefined

この場合は、値があるかどうかを先にチェックする必要があります。


let userName;

if (userName && userName.length > 0) {
  console.log("ユーザー名あり");
} else {
  console.log("ユーザー名なし");
}


ユーザー名なし

複雑な条件式では、論理演算子の順序や優先度を意識しないと意図しない結果になることがあります。括弧を使って明示的に優先度を示すのが安全です。


let x = 5;
let y = 10;

if (x > 0 && y < 20 || x === 5) {
  console.log("条件に合致");
}

意図がわかりにくい場合は、括弧を追加して優先度を明確にしましょう。


if ((x > 0 && y < 20) || x === 5) {
  console.log("条件に合致");
}

これらを意識することで、JavaScriptの条件式で発生しやすいエラーを減らすことができます。初心者でも落ち着いて確認すれば、エラーの原因を素早く特定できます。