TypeScriptでnull・undefined・空文字を正しく判定する方法

実務経験半年以上のエンジニア探してます！

>> 【急募】C# または TypeScript エンジニア募集（完全フルリモート）

こんにちは！

TypeScriptでプログラミングをしていると、null、undefined、そして空文字（''）といった「値がない」状態によく出会います。これらを正しく判定する方法は、バグを防ぎ、安定したアプリケーションを開発するために非常に重要です。

nullとundefinedって、結局何が違うの？

== と === の使い分けがよく分からない…。

空文字だけを判定するスマートな方法はないかな？

TypeScriptでの値の判定について、このような疑問をお持ちではないでしょうか。

この記事では、TypeScriptにおけるnull、undefined、空文字の判定方法について、それぞれの値が持つ意味から、具体的な判定方法、そして注意点までを詳しく解説します。

この記事は次のような方におすすめです。

この記事はこんな人におすすめ！

TypeScriptでnullやundefinedの扱いに悩んでいる方
値の判定処理を正しく安全に書きたい方
==と===の違いを明確に理解したい方
TypeScriptの基礎を固めたい初学者の方
コードの品質を向上させたいと考えている開発者の方

この記事を読めば、null、undefined、空文字の違いと、それぞれの状況に応じた最適な判定方法が分かります。TypeScriptにおける値の扱い方をマスターして、より堅牢で読みやすいコードを書けるようになりましょう。

「値がない状態を正しく判定したい方」「TypeScriptのコードに自信を持ちたい方」は、ぜひ参考にしてください。

それでは、順を追って詳しく見ていきましょう！

Contents

null、undefined、空文字の違い
nullの判定方法
undefinedの判定方法
nullとundefinedをまとめて判定する方法
- == と === の使い分け
空文字（”）の判定方法
null、undefined、空文字をまとめて判定する方法
- より厳密に3つだけを判定する場合
まとめ

「今の自分」に後悔しないためのおすすめ記事

未経験で後悔したくない
【実体験】未経験からITエンジニアに転職して後悔した話｜4社経験してわかった「最初の選択ミス」
年収が低くて不安
4年間ずっと年収260万だったエンジニアが、転職で510万になるまでの全記録

null、undefined、空文字の違い

まずはじめに、これら3つの値がそれぞれどのような意味を持つのかを理解することが大切です。これらはすべて「何もない」状態を表しているように見えますが、その背景には明確な違いがあります。

値	型	説明
`null`	`null`	開発者が意図的に「値が存在しない」ことを示した場合に使う値です。
`undefined`	`undefined`	値がまだ代入されていない、または存在しないプロパティにアクセスした場合のデフォルト値です。
空文字 (`''`)	`string`	文字列型ですが、その長さが0である状態を示します。

nullは「無いことが意図された状態」であり、undefinedは「まだ何も無い状態」と考えると分かりやすいかもしれません。そして空文字は、あくまで文字数が0の「文字列」です。この違いを意識することが、正しい判定への第一歩となります。

nullの判定方法

nullを判定する最も安全で推奨される方法は、厳密等価演算子 === を使うことです。

const value: string | null = null;

if (value === null) {
  console.log("この値はnullです。");
} else {
  console.log("この値はnullではありません。");
}
// 出力: この値はnullです。

この方法は、valueがnullであることだけを正確に判定します。undefinedや他のfalsyな値（0、false、空文字など）と混同することがないため、非常に信頼性が高いです。

undefinedの判定方法

undefinedの判定も、nullと同様に厳密等価演算子 === を使うのが基本です。

let value: string | undefined; // 初期値が代入されていないためundefined

if (value === undefined) {
  console.log("この値はundefinedです。");
} else {
  console.log("この値はundefinedではありません。");
}
// 出力: この値はundefinedです。

また、typeof演算子を使って型そのものをチェックする方法もあります。

let value: string | undefined;

if (typeof value === "undefined") {
  console.log("この値はundefinedです。");
}
// 出力: この値はundefinedです。

typeofを使う方法は、変数が宣言されていない場合でもエラーにならずに判定できるという特徴がありますが、通常は===を使った判定で十分な場合がほとんどです。

nullとundefinedをまとめて判定する方法

nullとundefinedの両方を「値がない」状態としてまとめて扱いたいケースはよくあります。その場合、等価演算子 == を使うと便利です。

let value: string | null | undefined = null;

// nullの場合
if (value == null) {
  console.log("この値はnullまたはundefinedです。");
}
// 出力: この値はnullまたはundefinedです。

value = undefined;

// undefinedの場合
if (value == null) {
  console.log("この値はnullまたはundefinedです。");
}
// 出力: この値はnullまたはundefinedです。

value = "";

// 空文字の場合はfalseになる
if (value == null) {
  console.log('このブロックは実行されない');
}

== null という書き方は、nullとundefinedの両方をtrueと判定する特別な挙動をします。これはTypeScript（JavaScript）の仕様によるもので、他のfalsyな値（0、false、''など）はfalseと判定されるため、nullとundefinedだけを区別せずに扱いたい場合に非常に有効です。

== と === の使い分け

ここで、==（等価演算子）と ===（厳密等価演算子）の違いを整理しておきましょう。

===（厳密等価演算子）

型の変換を行わずに、値と型の両方が等しいかを比較します。
null === undefined は false になります。
意図しない型の変換を防げるため、基本的にはこちらを使うことが推奨されます。

==（等価演算子）

比較する際に、必要に応じて暗黙的な型の変換を行います。
null == undefined は true になります。
上記で説明した == null のような意図した使い方を除き、予期せぬ動作の原因になることがあるため、使用には注意が必要です。

空文字（”）の判定方法

空文字かどうかを判定するには、値が空文字そのものであるかを === で比較する方法が最もシンプルです。

const text: string = '';

if (text === '') {
  console.log('この文字列は空文字です。');
} else {
  console.log('この文字列は空文字ではありません。');
}
// 出力: この文字列は空文字です。

また、文字列の長さをチェックする方法もよく使われます。

const text: string = "";

if (text.length === 0) {
  console.log("この文字列は空文字です。");
} else {
  console.log('この文字列は空文字ではありません。');
}
// 出力: この文字列は空文字です。

この方法は、コードの意図が「長さが0の文字列かどうか」を判定していることが明確になるため、可読性が高いと言えます。

null、undefined、空文字をまとめて判定する方法

では、これら3つすべてを「有効な値ではない」として一度に判定したい場合はどうすればよいでしょうか。

単純に if 文の条件式に値を入れると、TypeScriptは「truthy」か「falsy」かで値を評価します。

truthyな値
falsy以外のすべての値（空でない文字列、0以外の数値、オブジェクト、配列など）

falsyな値
false, 0, '' (空文字), null, undefined, NaN

この性質を利用すると、次のように書くことができます。

function processValue(value: string | null | undefined) {
  if (value) {
    console.log(`有効な値です: ${value}`);
  } else {
    console.log("値はnull、undefined、または空文字です。");
  }
}

processValue("こんにちは"); // 出力: 有効な値です: こんにちは
processValue("");          // 出力: 値はnull、undefined、または空文字です。
processValue(null);        // 出力: 値はnull、undefined、または空文字です。
processValue(undefined);   // 出力: 値はnull、undefined、または空文字です。

if (value) という条件式は、valueがtruthyな場合にのみブロック内を実行します。null、undefined、空文字はいずれもfalsyな値なので、この書き方でまとめて判定できます。

ただし、この方法は数値の 0 や真偽値の false もfalsyとして扱ってしまう点に注意が必要です。もし 0 や false を有効な値として扱いたい場合は、この方法は適していません。

より厳密に3つだけを判定する場合

0 や false を除外し、null、undefined、空文字の3つだけを判定したい場合は、それぞれの条件を明示的に組み合わせる必要があります。

function processValue(value: string | number | boolean | null | undefined) {
  if (value === null || value === undefined || value === "") {
    console.log("値はnull、undefined、または空文字です。");
  } else {
    console.log(`有効な値です: ${value}`);
  }
}

processValue("こんにちは"); // 出力: 有効な値です: こんにちは
processValue(0);           // 出力: 有効な値です: 0
processValue(false);       // 出力: 有効な値です: false
processValue("");          // 出力: 値はnull、undefined、または空文字です。
processValue(null);        // 出力: 値はnull、undefined、または空文字です。
processValue(undefined);   // 出力: 値はnull、undefined、または空文字です。

この方法は冗長に見えるかもしれませんが、判定の意図が明確になり、最も安全なコードと言えます。

【付録】さらに学びを深めるためのリソース

さらにTypescriptの学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業