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

JavaScript JavaScript
スポンサーリンク

JavaScript における「null」とは

まず「null」は、「ここには“意図的に”値がない」ということを表す特別な値です。
たとえば「まだデータが来ていない」「検索したけど見つからなかった」など、「ない」という状態をはっきり示したいときに使います。

let user = null;      // まだユーザー情報はない、という意味
console.log(user);    // null と表示される
JavaScript

業務システムでは「データが 0 なのか」「まだ入っていないのか」を区別できないと、バグや誤集計につながります。
そのため「本当に値がないのか？」を判定する null チェックは、実務でかなり重要な基本ユーティリティになります。

null と undefined の違い

初心者がまずつまずくのが「null」と「undefined」の違いです。

「undefined」は「まだ何も代入されていない」「存在しないプロパティを読んだ」など、JavaScript が自動的に付ける「未定義」の状態です。

let a;
console.log(a);       // undefined（何も代入していない）

const obj = {};
console.log(obj.name); // undefined（name プロパティが存在しない）
JavaScript

一方で「null」は、開発者が「ここは値がないことにしておく」と意図して代入する値です。

let selectedUser = null;  // まだユーザーは選ばれていない、という“意思”を表す
JavaScript

実務では「undefined は“まだ触っていない or 存在しない”」「null は“触ったうえで、あえて空にしている”」くらいに分けて考えると整理しやすくなります。

業務でよく使う null 判定パターン

if 文での基本的な null 判定

一番ストレートな書き方は、if 文で null を直接比較する方法です。

const value = getValueFromApi();  // 何かしらの値、または null が返るとする

if (value === null) {
  console.log('値が null です');
} else {
  console.log('値があります:', value);
}
JavaScript

ここでのポイントは「===（厳密等価）」を使っていることです。
=== は「型も含めて完全に同じか」を判定するので、「0」や空文字 "" と null を取り違えることがありません。

「== null」で null / undefined をまとめて判定

実務でよく使われるテクニックとして、「== null」をあえて使うパターンがあります。
==（ゆるい等価）は、null と undefined を同じものとして扱うという性質があります。

let value1 = null;
let value2 = undefined;

console.log(value1 == null); // true
console.log(value2 == null); // true
JavaScript

この性質を利用すると、「null か undefined なら true」という判定を一行で書けます。

const value = getValueFromApi();

if (value == null) {
  // value が null または undefined のときに入る
  console.log('値が存在しません（null / undefined）');
} else {
  console.log('値があります:', value);
}
JavaScript

「null と undefined を同じ“値なし”として扱いたい」場面では、value == null は実務でもかなり使われる書き方です。
ただし、== は他のケースでは予期しない型変換をするので、「null 判定専用」として使う、と覚えておくと安全です。

厳密判定「===」を使うとき

逆に「null と undefined をきっちり分けたい」場面もあります。
たとえば「API の仕様で、null は“データなし”、undefined は“その項目自体が存在しない”」と決まっている場合などです。

if (value === null) {
  console.log('データは“ない”と明示されている');
} else if (value === undefined) {
  console.log('そもそも項目が存在しない、またはまだ設定されていない');
}
JavaScript

業務システムでは「仕様書でどう定義されているか」によって、== null でまとめるか、=== で厳密に分けるかを選びます。
ここを曖昧にすると、後で「このケース、どっち扱いだっけ？」とバグの温床になります。

Falsy 判定に頼ると危険な理由

初心者がよくやってしまうのが、「if (value)」だけで null 判定も兼ねてしまう書き方です。

const unitPrice = 0;

if (unitPrice) {
  console.log('単価あり:', unitPrice);
} else {
  console.log('単価がない（null かも？）');
}
JavaScript

このコードは、一見「値があるかどうか」を判定しているように見えますが、0 は JavaScript では「偽（Falsy）」として扱われるため、unitPrice が 0 のときも「値がない」と判定されてしまいます。 Zenn

同じように、空文字 "" や false も Falsy です。
「0 や空文字は“ちゃんとした値”として扱いたい」「本当に“値がない”のは null / undefined だけ」という場面では、if (value) に頼るのは危険です。

このようなバグを避けるために、業務コードでは次のような方針を取ることが多いです。

  • 「値が存在するか？」を判定したいときは value == null か value === null || value === undefined を使う
  • 「0 や空文字も含めて“何かしらの値がある”」とみなしたいときは、Falsy 判定に頼らない

便利ユーティリティ関数の例

isNull / isNullish ユーティリティ

業務コードでは、同じような null 判定が何度も出てきます。
そのたびに value === null や value == null と書くと、読みづらくなったり、書き間違えたりします。
そこで「null 判定専用の小さな関数」を用意しておくと、コードがかなり読みやすくなります。

// null だけを判定
function isNull(value) {
  return value === null;
}

// null と undefined をまとめて判定（“値なし”扱い）
function isNullish(value) {
  return value == null;  // null または undefined のとき true
}
JavaScript

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

const price = getPrice();

if (isNullish(price)) {
  console.log('価格が設定されていません');
} else {
  console.log('価格:', price);
}
JavaScript

ここでのポイントは、「if 文の条件を読んだだけで意図が伝わる」ことです。
price == null よりも isNullish(price) の方が、「null / undefined をまとめて“値なし”と見なしているんだな」と一目で分かります。

デフォルト値を返すユーティリティ（?? を活用）

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

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

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

?? の重要なポイントは、「0 や空文字はそのまま使う」ということです。

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

これをユーティリティ関数にすると、業務コードでとても使いやすくなります。

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

// 例：API からのレスポンスを整形する
const apiValue = null;
const displayValue = withDefault(apiValue, '未設定');

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

「null / undefined のときだけデフォルトを使い、それ以外はそのまま」という意図が、関数名と ?? の組み合わせで明確になります。

安全にプロパティへアクセスする（optional chaining）

もう一つ、null 判定とセットでよく使われるのが「オプショナルチェイニング演算子（?.）」です。

const user = null;

// これをそのまま書くとエラーになる
// console.log(user.name);

// ?. を使うと、安全にアクセスできる
console.log(user?.name);  // undefined（エラーにならない）
JavaScript

obj?.prop は、「obj が null / undefined なら、エラーにせず undefined を返す」という動きをします。
これを使うと、ネストの深いオブジェクトでも、長い null チェックを書かずに済みます。

const order = {
  customer: {
    name: '山田太郎'
  }
};

console.log(order.customer?.name);        // '山田太郎'
console.log(order.payment?.cardNumber);   // undefined（エラーにならない）
JavaScript

業務システムでは「API のレスポンスに、ある項目があったりなかったりする」ことがよくあります。
そのたびに

if (order && order.payment && order.payment.cardNumber) {
  // ...
}
JavaScript

のようなコードを書くのはつらいので、?. を組み合わせたユーティリティやラッパー関数を用意しておくと、かなり実務的なコードになります。

まとめと小さな練習

ここまでのポイントを、実務目線で整理すると次のようになります。

  • 「null」は「意図的に値がない」状態、「undefined」は「まだ何もない／存在しない」状態
  • 「null / undefined をまとめて“値なし”と扱う」なら value == null や isNullish(value)
  • 「0 や空文字も有効な値」として扱いたいときは、if (value) のような Falsy 判定に頼らない
  • デフォルト値には ??、安全なプロパティアクセスには ?. を使うと、業務コードがかなり読みやすくなる

最後に、練習としてこんなことをやってみてください。

  1. isNull(value) と isNullish(value) を自分で実装して、いろいろな値（0, “”, null, undefined, false など）を渡して結果をコンソールに出してみる。
  2. withDefault(value, defaultValue) を使って、「null のときだけ“未設定”と表示する」小さなサンプルを作る。
  3. ネストしたオブジェクトを用意して、?. を使った場合と使わない場合で、どんな違いがあるか試してみる。

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