こんにちは！フロントエンドの世界へようこそ。
JavaScriptを触り始めると、必ず一度は「あれ？こいつは何者だ？」と迷子になる瞬間が訪れます。特に、最近のモダンなJavaScriptで大活躍する`Map`や`Set`といった「コレクション（データの集まり）」は、初学者の皆さんにとって少し掴みどころがない存在かもしれませんね。
今日は、この「正体不明なデータ」の持ち主を、スマートに見分ける魔法の杖についてお話しします。難しく考えすぎず、身近な例えと一緒に紐解いていきましょう。
—
「typeof」だけじゃ見抜けないこともある
JavaScriptでデータの種類を調べるとき、真っ先に思い浮かぶのは`typeof`演算子ですよね。でも、ちょっと試してみてください。
const myMap = new Map();
console.log(typeof myMap); // 結果は “object”
あれ？ `Map`なのに”object”と出てしまいました。これでは、まるで「果物」を調べたのに「食べ物です」とだけ言われたような気分ですよね。`typeof`は、JavaScriptの初期からある少し大雑把なツールなんです。
そこで登場するのが、`instanceof`（インスタンス・オブ）という、もう少し鋭い視力を持った判定官です。
—
「instanceof」は家系図を辿る探偵
`instanceof`は、そのデータが「どの設計図（コンストラクタ）から作られたのか」を家系図のように遡って確認してくれます。
例えるなら、「このバッグは、どこのブランドの工房で作られたものか？」を確認するようなものです。中身が何であれ、そのバッグが「Mapブランド」の職人によって作られたのであれば、`instanceof`は堂々と「YES！」と答えてくれます。
さっそく書いてみよう
const myMap = new Map([[‘key’, ‘value’]]);
const mySet = new Set([1, 2, 3]);
// Mapかどうかをチェック
console.log(myMap instanceof Map); // true: 「君はMap家系だね！」
console.log(mySet instanceof Map); // false: 「君はMapじゃないね」
// Setかどうかをチェック
console.log(mySet instanceof Set); // true: 「君はSet家系だね！」
どうでしょう。`typeof`よりもずっと明確に、「君は何者か？」を教えてくれますよね。
—
なぜプロトタイプチェーンが大切なのか？
少しだけ深い話をしますね。JavaScriptには「プロトタイプ」という概念があります。これは、すべてのオブジェクトが「親から受け継いだお道具箱」を持っているような仕組みです。
`instanceof`は、そのお道具箱のルーツをずっと遡って、「あ、このお道具箱の先祖には`Map`がいた！」と突き止めるんです。この仕組みがあるからこそ、私たちは複雑なデータでも正確に識別できるわけです。
実務でコードを書いていると、「APIからデータが返ってきたけど、これって配列かな？それともMapかな？」と迷う場面が多々あります。そんな時、この`instanceof`を知っているだけで、バグを未然に防ぐ強力な盾になります。
—
現場のリアルな知見：困った時の「ToString」という裏技
実は、`instanceof`にも弱点があります。例えば、異なるウィンドウ（iframeなど）で生成されたオブジェクトを判定しようとすると、家系図の繋がりが途切れてしまい、うまく判定できないことがあるんです。
そんな時、プロたちがこっそり使う「究極の判定法」がこれです。
function getRawType(target) {
// すべてのオブジェクトが持つ「正体をバラすメソッド」を強制的に呼び出す
return Object.prototype.toString.call(target);
}
const myMap = new Map();
console.log(getRawType(myMap)); // “[object Map]” と返ってくる！
これを使えば、`instanceof`が届かない場所でも、そのデータが持つ「戸籍謄本」を読み取るように、確実に正体を暴くことができます。
—
最後に：迷ったら「まずは触ってみる」で大丈夫
ここまで難しい言葉を並べてしまいましたが、一番大切なのは、「自分の環境でコードを書いて、どう動くかを確かめること」です。
`instanceof`で判定できなかったらどうしよう……なんて不安になる必要はありません。最初は`typeof`で大枠を掴み、必要になったら`instanceof`という武器を持ち出す。この積み重ねで、いつの間にかあなたは「JavaScriptの仕組みが手に取るようにわかる」エンジニアになっています。
焦らず、一歩ずつ。何か分からないことがあったら、いつでもコードを書き換えて、JavaScriptという不思議な箱の中身を覗いてみてくださいね。
また次の記事でお会いしましょう！応援しています。
コメント