「それ、本当に配列？」――JavaScriptの配列判定で、絶対に知っておくべき「魔法の杖」の話
こんにちは！現場でバリバリとコードを書いていると、「あ、これ配列かな？それともただのオブジェクトかな？」と迷う場面、意外と多いですよね。
JavaScriptを書き始めたばかりの頃、僕も「とりあえず `instanceof Array` を使えばいいんでしょ？」なんて思っていました。でも、ある日突然、とんでもないバグに遭遇したんです。
今日は、そんな「なぜか配列として判定してくれない！」という現場の悲劇を未然に防ぐための、大切な知恵をシェアしますね。
—
1. なぜ `instanceof` は「裏切り者」なのか？
まずは、よくある判定方法 `instanceof Array` から見ていきましょう。
これは「この変数は、Array（配列）という設計図から作られたものですか？」と尋ねるコードです。
const fruits = [‘りんご’, ‘みかん’];
// これだと「true」が返ってきます。ここまでは順調です。
console.log(fruits instanceof Array); // true
一見、これで完璧に見えますよね。でも、「iframe（アイフレーム）」という、別の部屋にいる相手が絡むと、この信頼関係は一気に崩れます。
想像してみてください：別の部屋にある「設計図」
JavaScriptの世界では、HTMLの中に別のページを埋め込む「iframe」を使うことがあります。
想像してください。あなたは今、自分の部屋で作業しています。
- 自分の部屋には「配列の設計図」があります。
- 隣の部屋（iframe）にも「配列の設計図」があります。
もし隣の部屋から「これ、僕の部屋で作った配列だよ！」と持ち込まれたものを、あなたの部屋の設計図でチェックしても、「え、それ僕の部屋の設計図には載ってないよ？」と言われてしまい、`false` になることがあるんです。
これが、`instanceof` が「裏切り者」と言われる理由です。実行している場所（コンテキスト）が違うと、同じ配列なのに「別物」として扱われてしまうことがあるんですね。
—
2. 救世主 `Array.isArray()` の登場
そこで登場するのが、`Array.isArray()` です。
これは、JavaScript界の「身分証明書チェッカー」のような存在です。
`Array.isArray()` は、相手がどの部屋で作られたものだろうと、「中身を見て、配列としての特徴を持っているなら、問答無用でOK！」と判断してくれます。
実際にコードで比較してみましょう
// 普段はどちらも同じ結果になります
const myList = [1, 2, 3];
console.log(myList instanceof Array); // true
console.log(Array.isArray(myList)); // true
// でも、iframeを使うような特殊な環境では…
// iframe内の配列を受け取ったとき、instanceof は時に失敗しますが、
// Array.isArray(その配列) は、どんな環境から来ても「はい、これは配列です」と答えてくれます。
—
3. なぜ「Array.isArray」が最強なのか？
結論から言うと、「迷ったら `Array.isArray` を使っておけば間違いない」、これに尽きます。
- 理由1：環境に左右されない
先ほど説明した通り、iframeが絡むような複雑なWebアプリでも、安定して配列を識別してくれます。
- 理由2：読みやすい
`Array.isArray(variable)` と書くと、「あ、この変数が配列かどうかチェックしてるんだな」と、コードを読んだ瞬間に意図が伝わります。
初学者のあなたへ：ちょっとしたアドバイス
たまに、「typeof で判定しちゃダメなの？」と聞かれることがあります。
でも、`typeof [1, 2, 3]` を試してみてください。結果は `”object”` になります。これだと、普通のオブジェクト（`{}`）と見分けがつかないですよね。
だからこそ、配列を専門にチェックしてくれる `Array.isArray()` は、JavaScriptを書く上での「必須アイテム」なんです。
—
まとめ：今日から「Array.isArray」を使おう！
JavaScriptの現場は、複雑な道具が入り混じる場所です。だからこそ、「どんな状況でも正しく判断してくれる信頼できる道具」を選ぶことが、バグを減らす最短ルートになります。
1. `instanceof Array` は、別の部屋（iframe）の存在を忘れると裏切られる。
2. `Array.isArray()` は、場所を問わず正しく見抜いてくれる魔法の杖。
もし今日、あなたのコードの中に `instanceof Array` があったら、そっと `Array.isArray()` に書き換えてみてください。それだけで、あなたの書くコードの「強さ」と「安心感」が一段階アップしますよ。
プログラミングは時に難しいパズルのようですが、こうやって一つひとつ「確かな知識」を積み上げていけば、必ず最高のエンジニアになれます。大丈夫、一緒に頑張っていきましょう！
コメント