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

1. nullとundefinedの違いとは？

1. nullとundefinedの違いとは？

nullは「値が意図的に存在しない」ことを示します。プログラマーが「ここは空です」と明示的にセットする値です。

undefinedは「値がまだ設定されていない」状態を示します。変数を宣言したけど値を入れていないときに自動的にこの値になります。

簡単に言うと、nullは「空の箱」、undefinedは「まだ箱が用意されていない」状態です。

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

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

JavaScriptでnullやundefinedかどうかを調べるには、===という「厳密な比較演算子」を使うのがおすすめです。

let value = null;

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

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

ここでは、valueがnullなら一つ目のメッセージが出て、undefinedなら二つ目のメッセージが出ます。

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

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

両方とも「値がない状態」なので、一緒に判定したい場合も多いです。そのときは==（ゆるい比較）を使う方法があります。

let value;

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

== nullはnullかundefinedのどちらかの場合に真になります。ただし、==は他のケースで予期せぬ動きをすることがあるので注意が必要です。

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

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

JavaScriptのif文では、nullもundefinedも「false（偽）」として扱われます。つまり、次のように書くと両方をまとめてチェックできます。

let value;

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

ただし、0や空文字 ""、falseも「false」と判定されるため、注意が必要です。もし「値が空かどうか」も区別したいときは別のチェックが必要になります。

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の基礎である条件分岐と値の判定をしっかり身につけて、より実践的なプログラムを書けるようにしていきましょう。