【JavaScript】null判定とは？エラーを防ぐための基本的なチェック方法を初心者向けに解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptのコードを書いていると、変数が null なのか、あるいは undefined なのかを正しく判定する必要に迫られることがよくあります。

たとえば、フォームから送信されたデータが何らかの理由で正しく受け取れていない場合や、サーバーから受け取るJSONデータに想定外の値が含まれていた場合、プログラムが思わぬエラーを起こすことがあります。

こうした問題を回避するには、変数がきちんと値を持っているかどうかを判定する仕組みを整えておくのが大切です。

JavaScriptには、値が存在しないことを示す null と、宣言はされているけれど値が設定されていないことを示す undefined が存在します。しかし実際の開発では「そもそもnullとはどんな状態なのか」「なぜundefinedと区別する必要があるのか」「どのように判定すべきか」といった基本が曖昧なまま進めてしまいがちです。

このような基礎を理解しないでコードを書くと、思いもよらない箇所で実行時エラーになったり、予期せぬ動作を引き起こしたりします。とくに初心者の方は、変数チェックをおろそかにしてしまいがちなので、今のうちにしっかりとした「null判定」のやり方を身に付けておくと安心です。

ここでは、具体例やサンプルコードとともに JavaScriptでnullを判定する方法 をわかりやすく解説していきます。実務の現場でも、フォーム入力のバリデーションやAPIレスポンスの処理で役立つ場面が数多くありますので、一度しっかりと学んでおくと良いでしょう。

また、nullとundefinedの基本的な違い、 == と === を使った判定時の注意点、さらにはオプショナルチェーンを利用した効率的なコードの書き方などもあわせて紹介します。

この記事を読むとわかること

null判定の基本的な考え方
nullとundefinedの違い
比較演算子を使ったnullチェックの具体例
実務シーンでの活用方法
エラーを防ぐためのコードパターン

null判定とは？

まず、null判定 というのは「その変数やオブジェクトがnullかどうかをチェックする処理」のことを指します。
JavaScriptでは値が存在しないことを示す概念がいくつかありますが、そのうちの1つが null です。実際の場面では、サーバーサイドからの返却値において、あるキーがnullであることが想定されることも珍しくありません。また、アプリケーション内部で意図的に「ここでは値がないことを示すためにnullを使おう」というケースもあります。

一方で、「宣言はされているが値が代入されていない状態」は undefined と呼ばれます。ただ、nullであるか、undefinedであるかによって処理が変わることもよくあり、両者を区別することが非常に重要です。

具体的には、たとえば以下のようなケースでnull判定が必要になります。

APIレスポンスで、存在しないはずのデータに対してnullが返ってくる場合
フロントエンド側で、フォームに入力された内容が空の場合にnullを明示的に代入している場合
JSのライブラリやフレームワークによっては「値が無い」状態をnullで表現することがある

こうした場面で「もしこの変数がnullだったら、処理をスキップする」「nullの場合はデフォルト値を入れる」といった条件分岐を書くときに null判定 が不可欠となるわけです。

ちなみに、null判定の正確な書き方を知らないままにコードを書いてしまうと、意図せず undefined も同時に判定してしまったり、あるいは false と判定される値（"0"や""など）を巻き込んでしまったりすることがあるので注意が必要です。

nullとundefinedの違い

ここで、 null と undefined の根本的な違いを整理しておきましょう。

nullの特徴

意図的に「値が存在しない」ことを示すときに使われる
typeof演算子で調べると結果は "object" となる
一般的に「ここに値があるはずだけど、今はない」と明示したいときに利用される

undefinedの特徴

変数は宣言済みだが、まだ値を代入していない状態であることを示す
関数で何もreturnしなかったときの戻り値もundefined
typeof演算子で調べると結果は "undefined" となる

このように、 null は開発者が「値が無い」と意図的に代入するケースが多いのに対し、 undefined は「値が設定されていない」「まだ存在しない」という状態を自動的に表すことが多いのがポイントです。

例えば、あるオブジェクトに存在しないプロパティを参照しようとしたときはundefinedが返されますが、nullが返るわけではありません。こうした差異を踏まえて「この変数は本当にnullを許容する設計なのか、それとも単に値を設定していないだけなのか」という観点で判定ロジックを考えると、後々コードが読みやすくなります。

JavaScriptにおける基本的なnullチェック方法

では、JavaScriptでnullを判定する最も基本的な方法から見ていきましょう。
よく使われるのが 比較演算子 を用いたチェックです。


const value = null;

// == を使った判定（nullとundefinedの両方をtrueとする）
if (value == null) {
  console.log("valueはnullまたはundefinedです");
}

// === を使った判定（厳密にnullのみをtrueとする）
if (value === null) {
  console.log("valueはnullです");
}

上記の例では、 == を使うと「valueがnullまたはundefinedの場合」にtrueとなります。
一方、 === を使うと「valueがnullの場合」にのみtrueとなるので、より厳密なチェックが可能です。

初めてJavaScriptを扱う方は、この違いをよく理解していないままにコードを書いてしまうことがありますが、実務では大きな影響を与えることもあります。
たとえば、「本当にnullだけを弾きたいのか」「undefinedも一緒に判定したいのか」を明確にしてから、適切な演算子を使い分けましょう。

比較演算子を使ったnull判定

ここでは、もう少し細かく比較演算子によるnull判定を見ていきます。

== を使った場合


const data = undefined;

if (data == null) {
  console.log("dataはnullまたはundefinedの可能性があります");
}

このように、 == null という記述を使うと、 data が null でも undefined でも真になります。もし「nullなのかundefinedなのかどちらかはっきり分からないが、とにかく値が設定されていない可能性がある」といった状況でまとめてチェックしたいときには便利です。

=== を使った場合


const item = null;

if (item === null) {
  console.log("itemはnullです");
}

こちらは厳密に nullだけ をチェックするため、undefinedは含まれません。
「変数が null のときにだけ特別な処理をしたい」というように、開発者が意図的に null を使っているケースでは、この === null を使うほうが安全です。
一方、undefinedは別途チェックする必要があるため、コードが少し冗長になる場合もあります。

実務での活用シーン

JavaScriptでnull判定がよく登場するのは、次のようなシーンです。

フォーム入力値が空かどうかをチェックする

ユーザーがフォームにデータを入力しなかった場合、後続の処理をスキップしたいときがあります。しかし、ライブラリや実装次第では、空のときに単に空文字""が入る場合もあれば、nullが代入される場合もあり得ます。そのため、確実に想定された型や値になっているかを確認するためにnullチェックを行うことが多いです。

APIレスポンスのエラーハンドリング

外部APIを呼び出したときに、キー自体は存在するが値がnullで返ってくる可能性があります。たとえば、ユーザー情報を取得するAPIで、ユーザー名が設定されていない場合に {"name": null} というJSONが返ってくる場合があります。このとき、表示側でそのまま response.name.length のように書くと、nullに対してプロパティを参照しようとしてエラーが起きてしまいます。事前に response.name がnullでないかを確認し、nullなら別のフローに切り替えるか、空文字をセットするなどの処理が必要となります。

設計上、値が存在しないことを明示する

内部的な処理で「このオブジェクトは存在するけれど、あるプロパティはまだ設定しない」ようにするために、わざとnullを入れておくことがあります。そうしたときに、そのプロパティがnullなのかどうかを調べて、後続の動作を分岐するわけです。

null合体演算子やオプショナルチェーンを使った判定

近年のJavaScriptでは、 null合体演算子 (??) や オプショナルチェーン (?.) を使って、より安全にnullやundefinedを扱う方法があります。

null合体演算子 (??)


const inputValue = null;
const result = inputValue ?? "デフォルト値";

console.log(result); 
// "デフォルト値"

この演算子は、左辺がnullまたはundefinedの場合に右辺の値を返します。もし左辺がnullでもundefinedでもない場合は左辺の値をそのまま返すため、「デフォルト値を用意しておきたいが、falseや0は有効とみなしたい」というケースで役立ちます。

オプショナルチェーン (?.)


const userData = {
  profile: null
};

// nullまたはundefinedのときは安全にundefinedを返す
const userName = userData.profile?.name;

console.log(userName); 
// undefined

オプショナルチェーンは、プロパティチェーンの途中でnullやundefinedが見つかった場合、エラーを起こさずにundefinedを返してくれます。「深い階層のオブジェクトが本当に存在するかわからない」場合に、いちいちif文でチェックすることなく、安全にアクセスできるのが便利な点です。

エラーを防ぐための具体例

ここでは、実務でよく遭遇するパターンを例にとり、null判定の重要性を具体的に見てみましょう。

シナリオ: APIから取得した値がnullの場合


// サーバーから取得したデータ（実際はfetchやaxiosなどを使用）
const response = {
  user: {
    name: null,
    age: 30
  }
};

// 危険な書き方：nullかもしれないプロパティを直接参照
const userNameLength = response.user.name.length; // TypeError発生

// 安全な書き方（1）: nullチェックを行う
let userNameLengthSafe = 0;
if (response.user.name !== null) {
  userNameLengthSafe = response.user.name.length;
}

// 安全な書き方（2）: オプショナルチェーンを活用
const userNameLengthSafe2 = response.user.name?.length;

この例のように、APIから返される値が確実に文字列かどうかわからない 場合には、あらかじめnull判定を入れるか、オプショナルチェーンでエラーを防ぐのが有効です。

シナリオ: DOM要素の取得

フロントエンドでDOMを操作するとき、要素が見つからない場合には document.getElementById("xxx") がnullを返すことがあります。このときに要素を操作しようとして null.appendChild(...) のようなメソッドを実行するとエラーが起きるため、必ずnullチェックを行うことが大切です。


const element = document.getElementById("some-id");
if (element === null) {
  // 要素が見つからないので代替処理
} else {
  // 要素が見つかったので本来の処理
}

こうしたコードをしっかり書いておかないと、ユーザー環境によっては要素がレンダリングされていないケースでエラーが発生し、画面操作ができなくなるリスクがあります。

よくある疑問と注意点

typeof null が "object" になるのはなぜ？

JavaScriptの歴史的経緯によって、 typeof null を実行すると "object" という文字列が返ってきます。これはJavaScriptの言語仕様として動いているため、これを見て「nullってオブジェクトなの？」と誤解しないように注意が必要です。実際には、nullはオブジェクトではありません。そのため、typeofを使ってnull判定をするのは避けたほうが無難です。

全部まとめてチェックしたいときはどうする？

「nullもundefinedも、どちらも値が無いときは全部同じように扱いたい」というケースは、現場ではよくあります。先ほど紹介した == null を使えばまとめてチェックできますが、 === null であれば undefined を弾いてしまうので、別途 value === undefined のような記述が必要です。それが煩わしい場合は、 null合体演算子 (??) を使って「値がなければデフォルト値を使う」という書き方が便利でしょう。

文字列や数値が空（0など）のときはどうする？

初心者の方が最も混乱しがちなポイントの1つとして、「0」や空文字 "" は falsy な値として扱われるものの、nullやundefinedとは区別したいシーンがあります。例えば、ユーザーが「0」という値を入力した場合でも、有効な入力として扱いたいことはよくあります。しかし、 || （論理和）の短絡評価を乱用すると、0や空文字も「false」と扱われてしまうため、意図せずデフォルト値に切り替わることがあります。こうした問題を避けるために、nullやundefinedだけをチェックする演算子として ?? が用意されているわけです。

コード例：実践的なnullチェック

それでは、もう少し実務に近い例をコードで示してみます。
たとえば、ユーザーのプロフィール情報を扱う関数を考えてみましょう。


function displayUserProfile(user) {
  // userオブジェクトがnullやundefinedかもしれないので要チェック
  if (!user) {
    console.log("ユーザー情報がありません");
    return;
  }

  // null合体演算子を使って、名前がnullまたはundefinedなら「匿名」を表示
  const userName = user.name ?? "匿名";
  console.log("ユーザー名:", userName);

  // オプショナルチェーンを使って、プロフィール詳細が存在しない場合を安全に回避
  const address = user.profile?.address ?? "住所情報なし";
  console.log("住所:", address);

  // user.profile?.phoneNumber がnullかundefinedの場合、ここは"電話番号なし"となる
  const phone = user.profile?.phoneNumber ?? "電話番号なし";
  console.log("電話番号:", phone);
}

// 実際の呼び出し例（nullが混ざっているケース）
const exampleUser = {
  name: null,
  profile: {
    address: "東京都サンプル区",
    phoneNumber: null
  }
};

displayUserProfile(exampleUser);
// 結果：ユーザー名: 匿名
//       住所: 東京都サンプル区
//       電話番号: 電話番号なし

この例では、オブジェクトのプロパティが一部nullになっていても、安全に表示処理を続けられるようにしています。
実際の開発でも、ユーザー情報や商品情報などの一部がnullで返ってきてもアプリが落ちないように工夫するのはとても大切なポイントです。

注意すべきエラー例と回避方法


const someData = null;

// エラーが発生するコード
if (someData.length > 0) {
  console.log("someDataは空ではありません");
}

上記は someData.length の参照でエラーが起きてしまいます。
もし someData がnullであれば length プロパティを参照しようとした時点でTypeErrorになるからです。

回避するには、必ず null や undefined ではないかを先に確認する必要があります。


if (someData !== null && someData !== undefined) {
  if (someData.length > 0) {
    console.log("someDataは空ではありません");
  }
}

このように書くか、オプショナルチェーン someData?.length を利用するか、あるいは someData == null でまとめてチェックするなどの対策をとりましょう。

null判定を忘れてしまうと、コードが短くて読みやすい反面、動作テスト時にエラーが出るまでは気づきにくいといったデメリットがあります。日常的にnullチェックを習慣づけ、予期せぬエラーを未然に防ぐことが大切です。

実装をシンプルに保つためのヒント

JavaScriptでのnull判定は、つい細かい条件分岐が増えてしまいがちです。
そこで、以下のようなコツを意識すると、比較的スッキリとしたコードに保ちやすくなります。

1. null合体演算子を積極的に使う

someValue ?? "代替値" の書き方なら、「someValueがnullまたはundefinedなら代替値を使う」という意図を明確にコードに残すことができます。これによって、複数行のif文を減らすことができます。

2. オプショナルチェーンで深いオブジェクトの参照を安全に

object?.prop?.child という書き方は、ネストが深い場合にいちいち if (object && object.prop && object.prop.child) { ... } と書かずに済むメリットがあります。空オブジェクトが返ってきたり、後からAPIのレスポンス形式が変わったとしても大きな影響を受けにくいのも利点です。

3. 明示的にnullを使うかどうかをプロジェクト内で取り決める

「このプロパティや変数は、値が無いときには必ずnullを入れる」といったルールをチーム内で決めておくと、コードレビュー時やバグ修正時に判断しやすくなります。逆に、nullではなく「空文字」や「0」などを使うなら、それも含めて明確化しておくのが望ましいでしょう。

よく使うコードパターン

変数がnullでもundefinedでもないかチェックする


if (value != null) {
  // valueがnullでもundefinedでもない
  // （NaNや空文字にはtrue）
}

厳密にnullだけをチェックしたい


if (value === null) {
  // valueはnull
}

nullの場合に代替値を適用する


const newValue = value ?? "デフォルト値";

ネストしたオブジェクトのプロパティに安全にアクセスする


const result = nestedObject?.deep?.property;

ただし、オプショナルチェーンを多用しすぎると、nullかどうかをあまり意識しなくなってしまう場合があります。どの段階で値が設定されるべきなのかを明確にした上で、正しい場所で使うようにしましょう。

まとめ

JavaScriptでの null判定 は、初心者の方にとってつまずきやすいポイントの1つです。
null と undefined の性質を理解し、どちらをどう判定したいのかを明確に意識することが大切です。

== null を使うと、null と undefined の両方をまとめてチェックできる
=== null を使うと、厳密にnullだけを判断できる
null合体演算子 (??) や オプショナルチェーン (?.) は、コードを安全かつ簡潔に保つのに役立つ

実務では、フォーム入力やAPIレスポンスの取り扱いなど、さまざまな場面でnull判定が求められます。このとき、適切に判定しないとエラーを引き起こす原因になるため、必ずチェックを入れる習慣をつけておきましょう。

こうした基本的な概念やテクニックをしっかり把握しておけば、より複雑なロジックを書いたときにも「値が予期せずnullだったせいでエラーが発生した」といったトラブルを避けやすくなります。初心者の方でも、まずは自分のコード内に「nullやundefinedのまま扱っている変数がないか」を丁寧に確認してみてください。

何度か手を動かして試していくうちに、null判定の手法が自然に身に付いていくことでしょう。
その後は、各プロジェクトの設計方針やデータの流れに応じて、より最適な方法でnullやundefinedを扱えるようになってきます。

これを機に、ぜひご自身のコードでも null判定 をしっかり見直してみてください。