JavaScript Tips | 基本・共通ユーティリティ：型チェック – 配列判定

JavaScript JavaScript
スポンサーリンク

配列判定とは何か

「配列判定」は、その値が「本当に配列かどうか」を見分けることです。
JavaScript では、配列もオブジェクトの一種なので、typeof だけでは配列かどうかを判定できません。

const arr = [1, 2, 3];
const obj = { a: 1 };

console.log(typeof arr); // "object"
console.log(typeof obj); // "object"
JavaScript

どちらも "object" なので、「配列かどうか」を知るには別の方法が必要になります。
ここで主役になるのが Array.isArray です。Array.isArray() – MDN

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

業務コードでは、「配列だと期待している値」に対して、map, filter, forEach, length などの配列メソッドをガンガン呼びます。
もしそれが配列ではなく null やオブジェクトだった場合、実行時エラーになり、画面が真っ白になったり、API が 500 を返したりします。

function printNames(users) {
  // users が配列だと信じて書いているコード
  users.forEach((user) => {
    console.log(user.name);
  });
}
JavaScript

ここで users に {} や null が渡ってきたら、一発で落ちます。
だからこそ、「配列かどうかを事前にチェックする」ユーティリティが、実務ではかなり重要になります。

配列判定の基本 Array.isArray

一番正しい答え：Array.isArray

現代の JavaScript では、「配列かどうか」を判定する正解はほぼ一択で Array.isArray です。Array.isArray() – MDN

console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray("abc"));      // false
console.log(Array.isArray({}));         // false
console.log(Array.isArray(null));       // false
console.log(Array.isArray(undefined));  // false
JavaScript

Array.isArray(value) は、「value が配列なら true、それ以外は false」を返します。
これだけ覚えておけば、配列判定で迷うことはほぼありません。

typeof ではダメな理由

typeof はプリミティブ型の判定には便利ですが、配列とオブジェクトを区別できません。

console.log(typeof [1, 2, 3]); // "object"
console.log(typeof { a: 1 });  // "object"
JavaScript

そのため、「配列かどうか」を知りたいときに typeof を使うのは NG です。
「配列かどうか」は、必ず Array.isArray を使う、と覚えてしまって構いません。JavaScript | オブジェクトが配列かどうかを調べる

業務ユーティリティとしての isArray

シンプルなラッパー関数

そのまま Array.isArray を使ってもよいのですが、プロジェクトの「型チェックユーティリティ」としてラップしておくと、意図が揃って読みやすくなります。

function isArray(value) {
  return Array.isArray(value);
}

console.log(isArray([1, 2, 3])); // true
console.log(isArray({}));        // false
console.log(isArray("abc"));     // false
JavaScript

Array.isArray(value) と isArray(value) はやっていることは同じですが、
「型チェック用のユーティリティをここに集めている」という構造があるだけで、コードベースが整理されていきます。

配列前提の処理と組み合わせる

例えば、「引数が配列ならループして処理し、配列でなければ何もしない」という関数を考えてみます。

function printNames(maybeUsers) {
  if (!isArray(maybeUsers)) {
    console.log("配列ではないので何もしません");
    return;
  }

  maybeUsers.forEach((user) => {
    console.log(user.name);
  });
}

printNames([{ name: "山田" }, { name: "佐藤" }]); // OK
printNames({ name: "山田" });                    // 配列ではないので何もしません
JavaScript

このように、「配列前提の処理の入り口で必ず isArray を通す」という習慣をつけると、実行時エラーがかなり減ります。

ありがちな間違いとその理由

instanceof Array を使うパターン

昔からある書き方として、value instanceof Array があります。

console.log([1, 2, 3] instanceof Array); // true
JavaScript

一見よさそうですが、iframe や別コンテキストをまたいだときに正しく判定できないケースがあり、
現在は Array.isArray の方が推奨されています。Array.isArray() – MDN

実務では、「配列判定は全部 Array.isArray に統一する」と決めてしまうのが一番安全です。

length の有無で判定しようとするパターン

初心者がやりがちなのが、「length があるから配列だろう」と判定してしまうパターンです。

const notArray = { length: 0 };

console.log(notArray.length === 0); // true だけど配列ではない
JavaScript

length プロパティは、配列以外のオブジェクトにも普通に付けられます。
「length がある＝配列」とは限らないので、型チェックとしては危険です。

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

API レスポンスの検証

API から「ユーザー一覧」が返ってくるケースを考えます。

async function fetchUsers() {
  const res = await fetch("/api/users");
  const data = await res.json();

  if (!Array.isArray(data)) {
    throw new Error("API 仕様違反: 配列が返ってくるはずなのに違うものが来た");
  }

  return data;
}
JavaScript

ここで Array.isArray(data) を挟んでおくことで、「サーバー側のバグ」や「仕様変更」を早めに検知できます。
配列だと信じて data.forEach をいきなり呼ぶより、はるかに安全です。

オプション引数で「配列または単体」を許可する

関数の引数で、「単体でも配列でも受け付けたい」ということがあります。

function toArray(value) {
  if (Array.isArray(value)) return value;
  if (value === null || value === undefined) return [];
  return [value];
}

console.log(toArray(1));        // [1]
console.log(toArray([1, 2]));   // [1, 2]
console.log(toArray(null));     // []
JavaScript

この toArray の中でも、配列判定の要は Array.isArray です。
「配列かどうか」を正しく見分けられると、こうした“柔軟な API 設計”がしやすくなります。

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

最後に、手を動かして慣れるためのミニ課題を提案します。

isArray と toArray を自分で実装して、次の値を順番に渡してみてください。
[], [1, 2], { length: 0 }, "abc", null, undefined, new Array(3) などです。

コンソールに結果を出しながら、「どれが配列で、どれが配列ではないか」「length だけでは判定できない理由」を体感できるはずです。

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