JavaScriptの条件式におけるnull・undefined判定のコツ！初心者でもわかる判定方法ガイド

1. nullとundefinedの違いとは？

1. nullとundefinedの違いとは？

nullは「値が意図的に存在しない」ことを示します。プログラマーが「ここは空にしておく」と明示的に設定する値で、あえて値を入れていない状態を表現します。

undefinedは「値がまだ設定されていない」状態を示します。変数を宣言しただけで何も代入していないときや、存在しないプロパティにアクセスしたときに自動的にこの値になります。

簡単に言うと、nullは「中身が空と決められている箱」、undefinedは「まだ中身を入れる準備がされていない箱」のイメージです。

実際にコードで確認してみると違いがわかりやすくなります。

let a = null;      // 意図的に空
let b;             // 宣言のみ（undefined）

console.log(a);
console.log(b);

実行結果は次のようになります。

null
undefined

このように、見た目は似ていますが「自分で空にしたのか」「まだ何も設定していないのか」という違いがあります。この違いを理解しておくと、後の条件分岐やバグの原因特定がしやすくなります。

2. null・undefinedを判定する基本的な方法

2. null・undefinedを判定する基本的な方法

JavaScriptでnullやundefinedかどうかを正確に判定するには、===という「厳密な比較演算子」を使うのが基本です。これは「値」と「型」の両方をチェックするため、意図しない判定ミスを防げます。

特に初心者のうちは、あいまいな比較を避けて、1つずつ確実に判定する書き方を覚えることが重要です。

let value = null;

// nullかどうかをチェック
if (value === null) {
  console.log("値はnullです。");
}

// undefinedかどうかをチェック
if (value === undefined) {
  console.log("値はundefinedです。");
}

実行すると、valueに入っている値に応じてメッセージが表示されます。今回はnullが入っているので、次のようになります。

値はnullです。

このように、===を使えば「nullなのか」「undefinedなのか」を明確に区別できます。後からバグを見つけやすくするためにも、基本はこの書き方で判定するクセをつけておきましょう。

3. nullとundefinedの両方をまとめて判定するコツ

3. nullとundefinedの両方をまとめて判定するコツ

nullとundefinedはどちらも「値がない状態」を表すため、実務ではまとめてチェックしたい場面がよくあります。そんなときに便利なのが、==（ゆるい比較）を使った判定です。

特にvalue == nullという書き方は、nullとundefinedの両方を一度に判定できるという特徴があります。コードをシンプルに保ちながら、意図した条件分岐が書けるのがポイントです。

let value;

if (value == null) {
  console.log("値はnullまたはundefinedです。");
}

例えば、まだ値が入っていない変数や、APIから取得したデータが存在しない場合などに役立ちます。初心者の方でも「値があるかどうか」をざっくり確認したいときに使いやすい書き方です。

実行すると、valueがundefinedのため、次のように表示されます。

値はnullまたはundefinedです。

ただし、==は型変換を伴う比較を行うため、他の値との比較では思わぬ結果になることがあります。そのため、「nullとundefinedをまとめて判定する」という用途に絞って使うのがコツです。目的をはっきりさせて使えば、シンプルで読みやすいコードを書くことができます。

4. if文の条件でnull・undefinedを判定する場合のポイント

4. if文の条件でnull・undefinedを判定する場合のポイント

JavaScriptのif文では、nullやundefinedはどちらも「false（偽）」として扱われます。そのため、値が入っているかどうかをシンプルに確認したい場合は、次のように書くだけでまとめてチェックできます。

let value;

if (!value) {
  console.log("値が設定されていません。");
}

例えば、フォーム入力やAPIの結果など「値があるかどうか」だけをざっくり確認したいときに便利です。初心者の方でも直感的に書けるため、よく使われる書き方のひとつです。

ただし注意点として、0や空文字 ""、falseも同じく「false」と判定されてしまいます。つまり「値があるけど0だった」という場合でも、未設定と同じ扱いになる可能性があります。

そのため、「本当にnullやundefinedだけを判定したいのか」「0や空文字も含めてチェックしたいのか」を意識して使い分けることが大切です。目的に応じて適切な条件式を選ぶようにしましょう。

5. typeof演算子を使ったundefined判定の方法

5. typeof演算子を使ったundefined判定の方法

typeof演算子は変数の「型」を調べるためのものです。宣言されていない変数を調べるときにも安全に使えます。

if (typeof someVar === "undefined") {
  console.log("someVarはundefinedです。");
}

変数が宣言されていない状態で値を調べるとエラーになりますが、typeofはエラーにならず安全に調べられます。

6. null・undefinedの違いをはっきりさせる実例

6. null・undefinedの違いをはっきりさせる実例

例えば、ユーザーの入力がまだない場合にnullを使い、変数を宣言したけど値をまだ入れていない場合はundefinedになります。

// ユーザーの入力がまだない
let userInput = null;

// 変数宣言だけした状態
let temp;

console.log(userInput); // null
console.log(temp);      // undefined

7. null・undefined判定のコツまとめ

7. null・undefined判定のコツまとめ

• nullとundefinedは似ているが用途や意味が違うので使い分ける。
• ===を使って厳密に判定するのが安全。
• nullかundefinedのどちらかをまとめて判定したいなら== nullを使う。
• if(!value)は簡単にまとめてチェックできるが、0や空文字も偽と判定される点に注意。
• typeof演算子は変数が未定義のときでも安全にundefinedをチェックできる。

8. 実践！null・undefined判定を使ったサンプルコード

8. 実践！null・undefined判定を使ったサンプルコード

最後に実際に判定を使ってみましょう。ユーザーの入力があるかどうかを判定してメッセージを表示する例です。

// ユーザーの名前入力
let userName = null;

if (userName === null) {
  console.log("名前が設定されていません（null）。");
}

if (userName === undefined) {
  console.log("名前が設定されていません（undefined）。");
}

if (userName == null) {
  console.log("名前はnullまたはundefinedです。");
}

if (!userName) {
  console.log("名前は空かnullかundefinedです。");
}

このように状況に合わせて判定方法を使い分けると、意図した条件分岐が書きやすくなります。

まとめ

まとめ

JavaScriptにおけるnullとundefinedの判定は、初心者がつまずきやすいポイントのひとつですが、基本的な考え方をしっかり理解しておけば、条件分岐やバグの原因を素早く特定できるようになります。本記事では、nullとundefinedの違いから始まり、厳密比較演算子を使った安全な判定方法、ゆるい比較を活用した効率的なチェック方法、そしてif文における真偽値の扱いまで幅広く解説してきました。 特に重要なのは、nullは意図的に値が存在しない状態を表し、undefinedは値が未定義である状態を示すという違いです。この違いを理解することで、プログラムの設計段階からより明確な意図を持ったコードを書くことができるようになります。 また、JavaScriptの条件式では、falseと判定される値が複数存在するため、単純なif文だけで判定する場合には注意が必要です。nullやundefinedだけを判定したいのか、それとも空文字や数値のゼロも含めて判定したいのかによって、適切な書き方を選ぶ必要があります。 さらに、typeof演算子を使った判定は、未宣言の変数に対しても安全にチェックできるという点で非常に重要です。特に大規模な開発や外部データを扱う場合には、このような安全な書き方がバグの予防につながります。 実務においては、状況に応じて判定方法を使い分けることが求められます。たとえば、APIから取得したデータが存在するかどうかを確認する場合や、ユーザー入力の有無をチェックする場合など、それぞれに適した書き方があります。単に動くコードを書くのではなく、意図が明確で読みやすいコードを書くことが重要です。 JavaScriptの条件分岐や比較演算子を理解することは、フロントエンド開発だけでなく、Node.jsなどのサーバーサイド開発においても非常に役立ちます。今回学んだnull判定、undefined判定、厳密比較、ゆるい比較、typeof演算子の使い方は、今後のプログラミング学習において繰り返し登場する重要な基礎知識です。 以下に、復習として代表的な判定方法をまとめたサンプルコードを掲載します。

// 値の準備
let value;
let data = null;

// 厳密に判定
if (data === null) {
  console.log("dataはnullです");
}

if (value === undefined) {
  console.log("valueはundefinedです");
}

// 両方まとめて判定
if (value == null) {
  console.log("valueはnullまたはundefinedです");
}

// falsyチェック
if (!value) {
  console.log("valueは未設定または空です");
}

// typeofで安全に判定
if (typeof unknownVar === "undefined") {
  console.log("unknownVarは未定義です");
}

dataはnullです
valueはundefinedです
valueはnullまたはundefinedです
valueは未設定または空です
unknownVarは未定義です

このように、複数の判定方法を理解しておくことで、さまざまなケースに柔軟に対応できるようになります。JavaScriptの基礎である条件分岐と値の判定をしっかり身につけて、より実践的なプログラムを書けるようにしていきましょう。