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

空配列とは何かをまず押さえる

JavaScript の「配列」は、複数の値を順番付きで持てるオブジェクトです。
その中に要素が 1 つも入っていない配列、つまり [] が「空配列」です。

const a = [];          // 空配列
const b = [1, 2, 3];   // 要素あり

console.log(a.length); // 0
console.log(b.length); // 3

const a = [];          // 空配列
const b = [1, 2, 3];   // 要素あり

console.log(a.length); // 0
console.log(b.length); // 3

ここで大事なのは、「空配列は“配列という入れ物は存在しているが、中身が 1 つもない状態”」だということです。
null や undefined のように「そもそも値がない」のとは意味が違います。

なぜ業務で空配列判定が重要になるのか

業務システムでは、「検索結果の一覧」「ユーザーの権限リスト」「明細行の配列」など、配列でデータを扱う場面が非常に多いです。
そのときに、「配列が null / undefined なのか」「配列としては存在するが、中身が 0 件なのか」をきちんと区別できるかどうかで、画面表示や処理の分岐が変わってきます。

例えば、検索結果の配列 results があるとします。

const results = [];  // 検索は成功したが、該当データが 0 件

const results = [];  // 検索は成功したが、該当データが 0 件

このときに、「結果が 0 件なら『該当するデータはありません』と表示する」「そもそも検索に失敗して配列自体が null / undefined なら、エラーメッセージを出す」など、挙動を分けたいことが多いです。
そのため、「空配列かどうか」を判定するユーティリティは、実務でかなりよく使われます。

基本の空配列判定 length === 0

一番シンプルで基本的な空配列判定は、「配列であることを確認したうえで、length が 0 かどうかを見る」方法です。

const arr = [];

if (Array.isArray(arr) && arr.length === 0) {
  console.log("空配列です");
} else {
  console.log("要素があります");
}

const arr = [];

if (Array.isArray(arr) && arr.length === 0) {
  console.log("空配列です");
} else {
  console.log("要素があります");
}

ここで重要なのは、Array.isArray(arr) を必ずセットで使うことです。
length プロパティは配列以外のオブジェクトや文字列にも存在することがあるため、「本当に配列かどうか」を確認せずに length === 0 だけを見ると、思わぬバグにつながります。

例えば、次のようなケースです。

const notArray = { length: 0 };

console.log(Array.isArray(notArray)); // false
console.log(notArray.length === 0);   // true（でも配列ではない）

const notArray = { length: 0 };

console.log(Array.isArray(notArray)); // false
console.log(notArray.length === 0);   // true（でも配列ではない）

length === 0 だけを見て「空配列だ」と判断してしまうと、このような「配列っぽいオブジェクト」も紛れ込んでしまいます。
業務コードでは、「配列かどうか」と「空かどうか」をセットで判定するのが安全です。

「if (array)」では空配列を判定できない理由

初心者がよくやってしまうのが、「if (array)」で配列の有無や中身の有無を判定しようとする書き方です。

const arr = [];

if (arr) {
  console.log("何かあるはず");
} else {
  console.log("何もない");
}

const arr = [];

if (arr) {
  console.log("何かあるはず");
} else {
  console.log("何もない");
}

このコードは、arr が空配列でも「何かあるはず」と判定してしまいます。
なぜなら、JavaScript では「空配列は truthy（真）」だからです。

console.log(Boolean([])); // true

console.log(Boolean([])); // true

つまり、「if (arr)」は「配列が null / undefined ではないか」をざっくり見ることはできますが、「中身が 0 件かどうか」は判定できません。
「空配列かどうか」をきちんと見たいときは、必ず length を使う必要があります。

空配列専用のユーティリティ関数を作る

業務コードでは、同じような判定を何度も書くより、「意図が一目で分かる小さな関数」にしてしまう方が読みやすくなります。

isEmptyArray ユーティリティ

「配列であり、かつ length が 0 なら true」を返す関数を作ってみましょう。

function isEmptyArray(value) {
  return Array.isArray(value) && value.length === 0;
}

console.log(isEmptyArray([]));          // true
console.log(isEmptyArray([1, 2]));      // false
console.log(isEmptyArray(null));        // false
console.log(isEmptyArray(undefined));   // false
console.log(isEmptyArray({ length: 0 })); // false

function isEmptyArray(value) {
  return Array.isArray(value) && value.length === 0;
}

console.log(isEmptyArray([]));          // true
console.log(isEmptyArray([1, 2]));      // false
console.log(isEmptyArray(null));        // false
console.log(isEmptyArray(undefined));   // false
console.log(isEmptyArray({ length: 0 })); // false

Array.isArray(value) && value.length === 0 と毎回書くより、isEmptyArray(value) と書いた方が、「ここでは“空配列かどうか”を見ているんだな」とすぐに分かります。
チーム開発では、この「意図の見えやすさ」が保守性に直結します。

hasElements ユーティリティ

逆に、「配列で、かつ 1 件以上要素があるかどうか」を判定する関数もよく使います。

function hasElements(value) {
  return Array.isArray(value) && value.length > 0;
}

console.log(hasElements([]));        // false
console.log(hasElements([1]));       // true
console.log(hasElements(null));      // false

function hasElements(value) {
  return Array.isArray(value) && value.length > 0;
}

console.log(hasElements([]));        // false
console.log(hasElements([1]));       // true
console.log(hasElements(null));      // false

例えば、画面で一覧を表示するときに、次のように書けます。

if (hasElements(results)) {
  console.log("一覧を表示する");
} else {
  console.log("該当データなしメッセージを表示する");
}

if (hasElements(results)) {
  console.log("一覧を表示する");
} else {
  console.log("該当データなしメッセージを表示する");
}

results && results.length > 0 と書くよりも、意図がはるかに読み取りやすくなります。

null / undefined と組み合わせた判定

実務では、「null / undefined / 空配列は全部“データなし”として扱いたい」という要件もよくあります。
その場合は、nullish 判定と空配列判定を組み合わせたユーティリティを用意すると便利です。

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

function isEmptyArrayOrNullish(value) {
  if (isNullish(value)) return true;
  if (!Array.isArray(value)) return false;
  return value.length === 0;
}

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

function isEmptyArrayOrNullish(value) {
  if (isNullish(value)) return true;
  if (!Array.isArray(value)) return false;
  return value.length === 0;
}

使い方のイメージはこんな感じです。

const items = getItems();

if (isEmptyArrayOrNullish(items)) {
  console.log("表示するデータがありません");
} else {
  console.log("データ件数:", items.length);
}

const items = getItems();

if (isEmptyArrayOrNullish(items)) {
  console.log("表示するデータがありません");
} else {
  console.log("データ件数:", items.length);
}

ここでのポイントは、「業務上“データなし”とみなす条件を一箇所に集約している」ことです。
画面ごとにバラバラの条件を書いてしまうと、「この画面では null だけをデータなしとみなしている」「あっちの画面では空配列も含めている」など、仕様のブレが発生しやすくなります。

実務でありがちなバグと空配列

よくあるバグの一つが、「空配列なのに、何かある前提で処理を進めてしまう」ケースです。

例えば、次のようなコードです。

const users = getUsers();  // 空配列の可能性あり

console.log("最初のユーザー:", users[0].name);  // users[0] が undefined だとエラー

const users = getUsers();  // 空配列の可能性あり

console.log("最初のユーザー:", users[0].name);  // users[0] が undefined だとエラー

users 自体は配列なのでエラーになりませんが、空配列のときは users[0] が undefined になり、その先の .name アクセスでエラーになります。
これを避けるには、「要素が 1 件以上あるかどうか」を事前にチェックする必要があります。

const users = getUsers();

if (hasElements(users)) {
  console.log("最初のユーザー:", users[0].name);
} else {
  console.log("ユーザーが 1 人もいません");
}

const users = getUsers();

if (hasElements(users)) {
  console.log("最初のユーザー:", users[0].name);
} else {
  console.log("ユーザーが 1 人もいません");
}

このように、「配列が存在するか」と「配列に要素があるか」は別物だ、という感覚を持てると、実務でのバグがかなり減ります。

小さな練習で感覚をつかむ

理解を定着させるには、自分の手でいろいろな値を試してみるのが一番です。
isEmptyArray と hasElements を自分で実装して、[], [1], null, undefined, { length: 0 }, "abc" などを渡して、結果をコンソールに出してみてください。

そのうえで、「このプロジェクトなら、null / undefined / 空配列をどう扱うべきか？」を自分なりに言語化してみると、設計の目線が一段上がります。