JavaScript | Array.isArray で配列かどうか調べる

JavaScript JavaScript
スポンサーリンク

配列判定の基本

プログラミングを始めたばかりだと、「この値って配列?ただのオブジェクト?」が混乱しがちです。JavaScriptでは、値が配列かどうかを確実に調べる方法があります。それが Array.isArray です。


配列とオブジェクトの違い

  • 配列: 順番があるデータの集まり。0から始まる番号(インデックス)でアクセスする。
  • オブジェクト: 名前(キー)と値のセット。順番よりも「ラベル付け」が得意。
// 配列(順番+番号アクセス)
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 'apple'

// オブジェクト(キー名でアクセス)
const user = { name: 'Yamada', age: 28 };
console.log(user.name); // 'Yamada'
JavaScript

なぜ typeof ではダメなのか

typeof は配列もオブジェクトも “object” と返すため、区別できません。

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

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

「配列かどうか」を知りたいときに typeof を使うのは不正確です。


正解は Array.isArray

Array.isArray(value) は、その value が配列なら true、そうでなければ false を返します。

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({ a: 1 }));  // false
console.log(Array.isArray('hello'));   // false
console.log(Array.isArray(null));      // false
console.log(Array.isArray(undefined)); // false
JavaScript

よくある落とし穴と対策

  • 配列っぽいけど配列じゃないもの: NodeList(DOMの取得結果)や arguments は昔の環境だと「配列っぽい」けど本当の配列ではないことがある。メソッド(map, filter など)が使えない。
  • 安全確認: 使いたいメソッドが配列専用なら、まず Array.isArray でチェックするのが安心。
function sumIfArray(maybeArray) {
  if (!Array.isArray(maybeArray)) {
    return 0; // 配列じゃないなら安全に終了
  }
  return maybeArray.reduce((acc, n) => acc + n, 0);
}

console.log(sumIfArray([1, 2, 3])); // 6
console.log(sumIfArray('123'));     // 0
JavaScript

例題で理解を深める

例題1: 入力が配列なら合格者だけ抽出する

問題: users が配列なら、age が 20 以上のユーザー名だけを取り出す。配列でなければ空配列を返す。

function getAdultNames(users) {
  if (!Array.isArray(users)) return [];
  return users
    .filter(user => user.age >= 20)
    .map(user => user.name);
}

// テスト
console.log(getAdultNames([
  { name: 'Aoki', age: 19 },
  { name: 'Sato', age: 20 },
  { name: 'Yamada', age: 25 }
])); // ['Sato', 'Yamada']

console.log(getAdultNames({ name: 'Sato', age: 20 })); // []
JavaScript

例題2: 配列以外も受け取るAPIを正しく扱う

問題: APIから来る data が「単体オブジェクト」または「オブジェクトの配列」のどちらか。常に配列として処理したい。

function normalizeToArray(data) {
  // data が配列ならそのまま、そうでなければ配列に包む
  return Array.isArray(data) ? data : [data];
}

// テスト
console.log(normalizeToArray({ id: 1 }));        // [{ id: 1 }]
console.log(normalizeToArray([{ id: 1 }, { id: 2 }])); // [{ id: 1 }, { id: 2 }]
JavaScript

例題3: 配列でなければエラーを投げる関数

問題: numbers が配列でない場合は、使い手に正しく使ってもらうために例外を投げる。

function average(numbers) {
  if (!Array.isArray(numbers)) {
    throw new TypeError('numbers は配列である必要があります');
  }
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((acc, n) => acc + n, 0);
  return sum / numbers.length;
}

// テスト
console.log(average([10, 20, 30])); // 20
// console.log(average('10,20,30')); // TypeError
JavaScript

実務での使いどころ

  • 入力バリデーション: 関数の引数が配列かを最初に確認して、想定外のバグを減らす。
  • 外部データの防御: API、フォーム入力、設定ファイルなど、型が揺れやすいデータを扱うときに堅牢性アップ。
  • 配列メソッドの前提確認: map, filter, reduce などを使う前に isArray で安全確認。

まとめ

  • 配列判定は Array.isArray 一択。
  • typeof は配列判定に使わない。
  • 迷ったら「使いたい処理が配列前提か?」→前提ならまず isArray でチェック。
  • 実務では入力の正当性チェックとして習慣化すると安心。
タイトルとURLをコピーしました