JavaScriptの条件式でよくあるエラーとその対処法まとめ

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

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

JavaScriptでは、宣言していない変数を条件式で使うとエラーになります。これはプログラムがどの値を使えばよいかわからないためです。特に初心者の方は「どこかで定義したつもり」になってしまうことが多く、思わぬエラーの原因になります。

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

ReferenceError: userAge is not defined

このエラーは「userAgeという変数が存在しない」ことを意味しています。JavaScriptでは、変数は必ず使う前に宣言しておく必要があります。また、宣言だけでなく、値を代入しておかないと正しく条件判定ができない点にも注意しましょう。

たとえば、年齢を使って条件分岐をしたい場合は、先に変数を準備してから使います。

let userAge = 20;

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

成人です

このように、変数を「宣言する」「値を入れる」「そのあとで使う」という順番を意識することで、未定義エラーは防げます。プログラムを書くときは、まず必要な変数がすべて用意されているかを確認する習慣をつけると安心です。

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

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より大きい

3. 構文ミスによるエラー

3. 構文ミスによるエラー

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

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

SyntaxError: Unexpected identifier

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

let num = 15;

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

10より大きい

4. nullやundefinedのチェック不足

4. nullやundefinedのチェック不足

変数が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("ユーザー名なし");
}

ユーザー名なし

5. 条件式の順序と優先度に注意

5. 条件式の順序と優先度に注意

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

let x = 5;
let y = 10;

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

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

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

6. エラーを防ぐためのポイント

6. エラーを防ぐためのポイント

• 変数は必ず宣言してから使用する
• 型を意識して比較する
• 条件式の括弧や波括弧を正しく使う
• nullやundefinedを事前にチェックする
• 複雑な条件式は括弧で優先度を明確にする

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

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CMakeとは具体的にどのようなツールで、プログラミング初心者にとってどのようなメリットがあるのでしょうか？

CMakeは、C言語やC++などのプログラムを簡単にビルドするための仕組みを自動的に生成してくれるオープンソースのビルドツールです。初心者がプログラミングを学ぶ際、一番最初につまずきやすいのが「コンパイル」や「リンク」といった複雑なビルド作業です。CMakeを使えば、これらの工程を一つの設定ファイルで自動化できるため、開発の手間を大幅に削減できます。さらに、Windows、Mac、Linuxといった異なるOS環境でも、同じ操作手順で実行ファイルを作成できるクロスプラットフォーム対応が最大の強みです。初心者でも、環境構築の難しさに悩まされることなく、プログラムを書くという本来の作業に集中できるようになるため、C言語学習の強力な相棒となります。