なぜ、あなたの「配列判定」はバグを生むのか?― `Array.isArray()` が唯一無二である理由
現場でコードレビューをしていると、今でもたまに見かけるのが `typeof` や `instanceof` を使った中途半端な配列判定です。
「とりあえず動くから」と書かれたそのコード、実はフレームワークの境界を跨いだ瞬間や、iframeを介した外部データが混入した瞬間に死ぬ爆弾だということに気づいていますか?
今日は、JavaScriptの「型」という曖昧な概念と長年戦ってきた経験から、なぜ我々が `Array.isArray()` を崇拝すべきなのか、その真実を解き明かします。
—
なぜ `typeof` や `instanceof` が「裏切り者」なのか
まず、現場でよくある失敗を見てみましょう。
const data = [1, 2, 3];
// 1. typeof の限界
console.log(typeof data); // “object” と返ってくる。
// これでは配列か、単なる {} (プレーンオブジェクト) か、null か区別がつかない。
// 2. instanceof の裏切り
console.log(data instanceof Array); // true になるが…
`instanceof` は、一見正しそうに見えますよね。しかし、これが通用するのは「同一の実行コンテキスト内」という温室の中だけです。
例えば、ブラウザに複数のフレーム(`
これに気づかず、「なぜかこのデータが配列として認識されず、`.map()` で落ちる」というバグに悩まされた経験、あなたにもありませんか?
—
救世主 `Array.isArray()` の仕組み
ECMAScript 5 で導入された `Array.isArray()` は、この泥沼の状況を解決するために生まれました。
ブラウザのエンジン(V8など)は、内部的に `[[Class]]` 内部スロットをチェックしています。これは、そのオブジェクトが「内部的に配列として構築されたものか」を、実行コンテキストに依存せずに判定する仕組みです。
簡単に言えば、「こいつは見た目が配列っぽいか?」ではなく、「こいつは配列として生まれたか?」を直接確認しているのです。
—
実践:現場で使うべき「鉄板」コード
中級エンジニアたるもの、ただの判定だけでは満足してはいけません。実務では「配列かどうか」に加えて「空ではないか?」や「型安全か?」といった要件が絡みます。
以下は、私がプロダクションコードで好んで使う、堅牢な判定ロジックです。
/
- 配列かどうかを安全に判定し、さらに中身の存在チェックまで行うユーティリティ
/
function isNotEmptyArray(input) {
// 1. Array.isArray() で確実に配列かどうかを判定
// これが最も高速かつ安全な手段です
if (!Array.isArray(input)) {
return false;
}
// 2. 配列であれば、その長さをチェック
// 外部からのデータ(APIレスポンスなど)は null や undefined になり得るため、
// 判定の順序が重要です
return input.length > 0;
}
// 使用例
const list = [1, 2, 3];
const empty = [];
const obj = { key: ‘value’ };
console.log(isNotEmptyArray(list)); // true
console.log(isNotEmptyArray(empty)); // false
console.log(isNotEmptyArray(obj)); // false
—
シニアからのアドバイス:なぜこれにこだわるのか
現場のエンジニアにとって「動くコード」を書くことは最低条件です。しかし、我々が目指すべきは「仕様の隙間を突き抜けてくるバグを未然に防ぐコード」です。
- API連携: バックエンドから送られてくる JSON が、仕様変更で急に `null` になったり、文字列になったりすることは日常茶飯事です。
- ライブラリの相互運用: ライブラリ間で渡されるデータが、どのコンテキストで生成されたかを知る術は我々にはありません。
だからこそ、JavaScript の「揺らぎ」を許容せず、標準メソッドである `Array.isArray()` を信頼し、徹底的に守りを固めること。これが、大規模なフロントエンドアプリケーションを崩壊させないための唯一の防御線なのです。
「なんとなく動く」から「仕様を理解して書く」へ。今日からあなたの判定ロジックを、一段上のレベルに引き上げてみてください。それが、優秀なエンジニアへの第一歩です。

コメント