JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – null または undefined 判定

JavaScript JavaScript
スポンサーリンク

「null または undefined 判定」とは何か

業務コードでは「値が 0 かどうか」よりも、「そもそも値が“あるか・ないか”」を判定する場面がとても多いです。
ここでいう「ない」は、JavaScript では主に null と undefined の 2 つで表現されます。

null は「意図的に値がない」と開発者が決めた状態、
undefined は「まだ何も設定されていない／存在しない」と JavaScript が示している状態、というイメージです。

業務・実務で重要なのは、「この 2 つを“どちらも値がない”として一括で扱いたい場面」が非常に多い、ということです。
この「null または undefined をまとめて判定する」考え方を、よく「nullish（ヌリッシュ）判定」と呼びます。

なぜ null と undefined をまとめて扱うのか

例えば、API からユーザー情報を取得する関数を考えます。

function fetchUserName() {
  // 何らかの理由で、名前が取得できないことがあるとする
  return null;        // あるいは undefined が返るケースもある
}
JavaScript

画面に表示するとき、多くの場合は「名前が null か undefined か」はどうでもよくて、
「名前があるなら表示する、なければ『未設定』と出す」というロジックを書きたいはずです。

const name = fetchUserName();

if (name === null) {
  console.log('未設定');
} else if (name === undefined) {
  console.log('未設定');
} else {
  console.log(name);
}
JavaScript

これを毎回書いていたら、さすがにしんどいですよね。
ここで「null と undefined をまとめて“値なし”として扱う判定」が欲しくなります。

「== null」が特別に便利な理由

ふだんは「== は使わず、=== を使いましょう」と教わることが多いと思います。
ただし、null または undefined 判定 に限っては、== がとても役に立つ、珍しい例外パターンがあります。

次のコードを見てください。

console.log(null == null);        // true
console.log(undefined == null);   // true

console.log(null === null);       // true
console.log(undefined === null);  // false
JavaScript

== では、null と undefined を「同じグループ」として扱います。
つまり、value == null と書くと、「value が null でも undefined でも true」になります。

function fetchUserName() {
  return undefined;  // あるいは null
}

const name = fetchUserName();

if (name == null) {
  console.log('未設定');
} else {
  console.log(name);
}
JavaScript

この一行 if (name == null) に、「null か undefined なら“値なし”扱いにする」という意図がきれいに収まっています。
実務では、「== は原則禁止。ただし value == null だけは“nullish 判定専用”として許可」というルールにしているチームも多いです。

ここが重要ポイントで、
== を何でもかんでも使うと危険ですが、「null / undefined をまとめて判定する」という一点に限れば、非常に読みやすく、安全に使えるテクニックになります。

Falsy 判定との違いをしっかり区別する

初心者がよくやってしまうのが、「if (value)」で全部済ませようとする書き方です。

const count = 0;

if (count) {
  console.log('値あり');
} else {
  console.log('値なし');
}
JavaScript

このコードは、count が 0 のときに「値なし」と判定してしまいます。
JavaScript では、0, '', false, NaN, null, undefined はすべて「偽（Falsy）」として扱われるからです。

しかし、業務では「0 は立派な値」「空文字も“入力された結果”」ということがよくあります。
「本当に“値がない”のは null / undefined だけで、それ以外は全部“値あり”」としたい場面では、if (value) に頼るのは危険です。

ここで「null または undefined 判定」をきちんと使うと、意図通りの判定ができます。

const count = 0;

if (count == null) {
  console.log('値が存在しない（null / undefined）');
} else {
  console.log('値は存在する（0 も含む）:', count);
}
JavaScript

この違いを感覚ではなく「仕様として」理解しておくと、業務コードのバグがかなり減ります。

ユーティリティ関数で「null または undefined 判定」を共通化する

毎回 value == null と書くのも悪くはありませんが、
業務コードでは「意図が一目で分かる名前の関数」にしておくと、さらに読みやすくなります。

isNullish ユーティリティ

「null または undefined なら true」を返す関数を作ってみましょう。

function isNullish(value) {
  return value == null;  // null または undefined のとき true
}
JavaScript

使い方はとてもシンプルです。

const name = fetchUserName();

if (isNullish(name)) {
  console.log('未設定');
} else {
  console.log(name);
}
JavaScript

name == null と書くよりも、isNullish(name) の方が「ここでは null / undefined をまとめて“値なし”と見なしているんだな」と、読む人に意図が伝わりやすくなります。
チーム開発では、この「意図が伝わるかどうか」が、保守性に直結します。

hasValue ユーティリティ

逆に、「null / undefined 以外なら“値あり”とみなしたい」という関数もよく使います。

function hasValue(value) {
  return value != null;  // null / undefined 以外なら true
}
JavaScript

これを使うと、次のように書けます。

const price = getPriceFromApi();

if (hasValue(price)) {
  console.log('価格:', price);
} else {
  console.log('価格は未設定です');
}
JavaScript

if (price) ではなく if (hasValue(price)) と書くことで、「0 や空文字も“値あり”として扱っている」ことが明確になります。
ここも、業務コードではかなり重要なポイントです。

nullish 判定とデフォルト値（?? との組み合わせ）

モダンな JavaScript には、「null / undefined のときだけデフォルト値を使う」ための演算子 ??（null 合体演算子）があります。

const input = null;
const value = input ?? 'デフォルト';

console.log(value);  // 'デフォルト'
JavaScript

?? の挙動は、「nullish 判定」と完全にリンクしています。
つまり、「左辺が null または undefined のときだけ右辺を使う」という動きです。

console.log(null ?? 'N/A');        // 'N/A'
console.log(undefined ?? 'N/A');   // 'N/A'
console.log(0 ?? 100);             // 0
console.log('' ?? 'empty');        // ''
JavaScript

ここで注目してほしいのは、「0 や空文字はそのまま使われる」という点です。
これはまさに、「null / undefined だけを“値なし”とみなす」という nullish 判定の考え方そのものです。

この挙動をユーティリティ関数に包むと、さらに分かりやすくなります。

function withDefault(value, defaultValue) {
  return value ?? defaultValue;
}

const apiValue = null;
const display = withDefault(apiValue, '未設定');

console.log(display);  // '未設定'
JavaScript

withDefault という名前を見るだけで、「null / undefined のときだけデフォルトを使うんだな」と分かります。
業務でよくある「0 をデフォルトに潰してしまうバグ」を防ぐ、非常に実用的なパターンです。

実務での具体的な利用イメージ

例えば、ユーザー情報を表示する画面を考えます。

function formatUser(user) {
  const name = withDefault(user.name, '名無し');
  const age = withDefault(user.age, '年齢不明');

  console.log(`名前: ${name}`);
  console.log(`年齢: ${age}`);
}
JavaScript

ここで user.name や user.age が null や undefined の場合だけ、
「名無し」「年齢不明」というデフォルトが使われます。
一方で、0 や空文字が入っている場合は、そのまま表示されます。

このように、「null / undefined だけを特別扱いする」というルールをコード全体で統一しておくと、
仕様のブレが減り、バグの原因もかなり減ります。

小さな練習アイデア

理解を定着させるために、次のようなことを自分の手で試してみると良いです。

まず、isNullish と hasValue を自分で実装してみてください。
そのうえで、null, undefined, 0, '', false, NaN など、いろいろな値を渡して、結果をコンソールに出してみます。

次に、|| と ?? を使って、「0 や空文字を渡したときにどう違うか」を比較する小さなサンプルを書いてみてください。
「なぜ業務では ?? を優先した方がいいのか」が、体感として分かるはずです。

スポンサーリンク
タイトルとURLをコピーしました