配列判定の基本
プログラミングを始めたばかりだと、「この値って配列?ただのオブジェクト?」が混乱しがちです。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 でチェック。
- 実務では入力の正当性チェックとして習慣化すると安心。
