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

JavaScript JavaScript
スポンサーリンク

JavaScript における undefined とは

undefined は「まだ値が決まっていない」「存在しないものを見に行った」ときに JavaScript が自動的に使う特別な値です。
プログラマーが「代入し忘れた」「存在しないプロパティを読んだ」などのときに、勝手に undefined になります。

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

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

ここで大事なのは、「undefined は“未設定・未定義”のサイン」ということです。
業務コードでは「値が 0 なのか」「空文字なのか」「そもそもまだ設定されていないのか」を区別できるかどうかで、バグの数が大きく変わります。

undefined が発生する典型パターン

関数の戻り値を明示的に返していないとき、JavaScript は自動的に undefined を返します。

function doSomething() {
  console.log('処理だけして、何も返さない');
}

const result = doSomething();
console.log(result);  // undefined
JavaScript

配列の範囲外を参照したときも undefined です。

const arr = [10, 20];
console.log(arr[2]);  // undefined（インデックス 2 は存在しない）
JavaScript

オブジェクトの存在しないプロパティも同じく undefined。

const user = { name: 'Taro' };
console.log(user.age);  // undefined（age プロパティはない）
JavaScript

このように、undefined は「JavaScript が“ここにはまだ何もないよ”と教えてくれている状態」と捉えると理解しやすくなります。

null との違いを整理する

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

let a;              // undefined（まだ代入していない）
let b = null;       // null（あえて“値なし”とした）

const obj = {};
obj.value = null;   // “値がない”と明示
JavaScript

実務では、仕様として「この項目は、値がないときは null を返す」「そもそも項目がないときは undefined になる」と決めることがあります。
この区別を理解しておくと、「どのケースをどう扱うべきか」をコードで正しく表現できるようになります。

業務で使う undefined 判定の書き方

厳密に undefined だけを判定する

「undefined のときだけ特別扱いしたい」という場合は、厳密等価演算子 === を使います。

let value;

if (value === undefined) {
  console.log('value はまだ設定されていません');
} else {
  console.log('value には何かしらの値が入っています');
}
JavaScript

ここでのポイントは、「=== を使うことで、null や 0、空文字などと混同しない」ということです。
たとえば null は value === undefined では引っかかりません。

let value = null;

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

API の仕様などで「undefined はありえない。必ず null か値が入る」と決まっている場合は、=== undefined が出てきたら「それは設計ミスかも？」と疑うきっかけにもなります。

null と undefined をまとめて扱う

「null でも undefined でも、“どちらも値がない”として扱いたい」場面は非常に多いです。
その場合、== null という書き方が実務ではよく使われます。

let value1 = null;
let value2 = undefined;

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

この性質を利用すると、次のように書けます。

const value = getValueFromApi();

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

ここで重要なのは、「== は基本的には使わないが、“null 判定専用”としてだけ使う」というルールにしておくことです。
== は他の値同士だとややこしい型変換をするので、value == null 以外では使わない、と決めておくと安全です。

ユーティリティ関数で undefined 判定を共通化する

同じような undefined 判定を何度も書いていると、読みづらくなったり、条件を間違えたりします。
業務コードでは、小さなユーティリティ関数にしてしまうと、意図がはっきりしてバグも減ります。

isUndefined ユーティリティ

function isUndefined(value) {
  return value === undefined;
}

const a = undefined;
const b = null;

console.log(isUndefined(a));  // true
console.log(isUndefined(b));  // false
JavaScript

この関数を使うと、「ここでは“まだ設定されていない”状態だけを特別扱いしたいんだな」という意図が、コードを読む人に伝わりやすくなります。

isNullish / hasValue ユーティリティ

「null と undefined をまとめて“値なし”と扱う」ユーティリティも、実務ではかなり便利です。

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

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

使い方の例です。

const price = getPriceFromApi();

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

price == null と書くよりも、isNullish(price) の方が「null / undefined をまとめて扱っている」ことが明確になります。
また、hasValue(price) と書けば、「ここでは“値があるかどうか”だけを見たいんだな」とすぐに分かります。

デフォルト値と undefined の関係（?? の活用）

モダンな JavaScript では、「null または undefined のときだけデフォルト値を使う」ための ??（null 合体演算子）が用意されています。

const input = undefined;
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

業務でよくあるのが、「0 は有効な値なのに、|| を使ってしまってデフォルトに置き換わってしまう」というバグです。

const count = 0;

// よくあるバグパターン
const displayCount = count || 100;
console.log(displayCount);  // 100（本当は 0 を表示したいのに…）
JavaScript

これを ?? に変えると、意図通りの動きになります。

const count = 0;
const displayCount = count ?? 100;

console.log(displayCount);  // 0
JavaScript

「null / undefined のときだけデフォルトを使いたい」という要件なら、|| ではなく ?? を使う、というのが実務的なベストプラクティスです。

undefined とプロパティアクセス（optional chaining）

undefined とセットでよく使われるのが、オプショナルチェイニング演算子 ?. です。
これは「オブジェクトが null / undefined のときにエラーを出さず、結果を undefined にしてくれる」演算子です。

const user = null;

// これはエラーになる
// console.log(user.name);

// ?. を使うと安全
console.log(user?.name);  // undefined（エラーにならない）
JavaScript

ネストしたオブジェクトでも有効です。

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

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

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

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

のような長い条件を書く代わりに、order.payment?.cardNumber と書けるだけで、コードの見通しがかなり良くなります。
ここでも「undefined は“まだない／存在しない”状態」という理解が、そのまま安全なアクセスパターンにつながっています。

実務でありがちなバグと undefined

よくあるバグのパターンを一つだけ挙げておきます。

「undefined かもしれない値に対して、いきなりメソッドを呼んでしまう」ケースです。

const name = getUserName();  // undefined の可能性あり

console.log(name.toUpperCase());  // name が undefined だとエラー
JavaScript

これを避けるには、事前に undefined 判定をするか、オプショナルチェイニングを使います。

const name = getUserName();

if (name !== undefined) {
  console.log(name.toUpperCase());
}
JavaScript

あるいは、文字列として扱いたいなら、デフォルト値を組み合わせる方法もあります。

const name = getUserName() ?? '名無し';
console.log(name.toUpperCase());
JavaScript

「この変数は、どのタイミングで undefined になりうるか？」を常に意識することが、実務でのバグ削減に直結します。

小さな練習

最後に、理解を定着させるための練習アイデアをいくつか挙げます。

変数に undefined, null, 0, '', false などを代入して、
=== undefined, == null, isUndefined, isNullish, hasValue の結果をコンソールに出してみる。

?? と || を使って、「0 や空文字を渡したときにどう違うか」を比較する小さなサンプルを書く。

ネストしたオブジェクトを作り、存在しないプロパティにアクセスしたときに、?. を使う場合と使わない場合で挙動の違いを確認する。

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