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 = "5";

if (num === 5) {
  console.log("同じ値です");
} else {
  console.log("違う値です");
}

違う値です

このように、「===」は型も含めて比較するため、文字列と数値は一致しません。意図しない結果を防ぐためには、あらかじめ型をそろえることが重要です。

安全な書き方としては、Number関数などを使って明示的に数値へ変換してから比較する方法があります。こうすることで、どのような値が入っていても予測しやすいコードになります。

let num = "10";

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

numは5より大きい

ポイントは「比較する前に型をそろえる」ことです。特にフォーム入力や外部データは文字列として扱われることが多いため、条件式を書く前にデータの型を確認する習慣をつけると、エラーを未然に防ぐことができます。

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

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

条件式の括弧や波括弧を忘れると、構文エラーが発生します。初心者によくあるミスのひとつで、書き方が少し違うだけでもプログラムは正しく動きません。特にJavaScriptは記述ルールが厳密なため、「見た目はなんとなく合っている」状態でもエラーになることが多いので注意が必要です。

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

SyntaxError: Unexpected identifier

このエラーは、「if文の書き方が正しくない」という意味です。JavaScriptでは、条件式は必ず丸括弧で囲み、処理のまとまりは波括弧で囲むというルールがあります。このルールが守られていないと、プログラムはどこからどこまでが条件なのか判断できません。

正しい書き方は、条件式を丸括弧で囲み、処理を波括弧で囲みます。まずは基本の形を覚えることが大切です。

let num = 15;

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

10より大きい

また、初心者の方は「括弧の閉じ忘れ」や「全角の記号を使ってしまう」といったミスもよくあります。エラーが出たときは、括弧の数が合っているか、すべて半角で入力されているかを一つずつ確認すると、原因を見つけやすくなります。

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

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

変数に値が入っていない状態（nullやundefined）のままプロパティやメソッドを使うと、エラーが発生します。特にJavaScriptでは「値がまだセットされていない」ケースがよくあるため、初心者がつまずきやすいポイントです。フォーム入力やAPIからのデータ取得時にも頻繁に起こるため、事前チェックはとても重要です。

let userName;

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

TypeError: Cannot read property 'length' of undefined

このエラーは「userNameに値が入っていないのに、lengthを使おうとした」ことが原因です。undefinedの状態では、文字数などの情報を取得することができません。

そのため、まずは「値が存在するか」を先に確認する必要があります。安全に書くには、論理演算子を使って段階的にチェックするのが基本です。

let userName;

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

ユーザー名なし

このように「userNameが存在するか」を先に確認することで、エラーを防げます。さらに初心者の方は、console.logで値の中身を確認するクセをつけると、undefinedやnullに早く気づけるようになります。条件式を書く前に「この変数には本当に値が入っているか？」と意識することが、バグを減らす大きなポイントです。

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言語学習の強力な相棒となります。

「ビルド」という言葉をよく聞きますが、具体的にどのような作業を指すのか、CMakeはどう関わっているのですか？

ビルドとは、人間が書いたソースコード（プログラムの設計図）を、コンピュータが直接理解して実行できる「バイナリ形式」の実行ファイルへと変換する一連の工程を指します。このビルド作業には、ソースコードを機械語に変換する「コンパイル」と、複数のプログラム部品をつなぎ合わせる「リンク」という作業が含まれます。CMake自体が直接コンパイルを行うわけではなく、ビルドを行うための設定ファイル（Makefileやプロジェクトファイルなど）を自動生成する役割を担います。いわば、複雑なビルド手順を人間に代わって指揮してくれる「現場監督」のような存在です。