こんにちは！フロントエンドの世界へようこそ。
JavaScriptを触り始めて、「あれ、これって何者？」と迷子になることは誰にでもあります。特に「型」の判定は、プロの現場でも慎重になるくらい奥が深い場所。
今日は、そんなJavaScriptの不思議な仕組みの中でも、ちょっとだけ「裏側の魔法」を覗くような`instanceof`演算子と、それをカスタマイズできる`Symbol.hasInstance`について、一緒に紐解いていきましょう。
—
1. `instanceof`って、結局なにをしているの？
`instanceof`は、一言で言えば「あなたは、この一族の出身ですか？」と尋ねるための演算子です。
例えば、あなたが買った「スマートフォン」が「Apple製品」かどうかを確認したいとします。そのとき、箱の裏を見るだけで分かりますよね。JavaScriptの世界でも同じで、あるオブジェクトが特定のクラス（設計図）から作られたものなのかを確かめることができます。
泥臭いプロトタイプチェーンの話
内部では、JavaScriptは「プロトタイプチェーン」という長い数珠繋ぎを辿っています。
1. 「あなた、この設計図で作られた？」と聞く。
2. 「いいえ、私はその親の設計図から作られた子です」と答える。
3. 「じゃあ、あなたの親のそのまた親は？」と、ずっと遡っていく。
この数珠繋ぎを最後まで辿って、もし設計図が見つかれば`true`、見つからなければ「赤の他人ですね」ということで`false`が返ってくる。これが`instanceof`の正体です。
class Pet {}
class Dog extends Pet {}
const myDog = new Dog();
// myDogはDogの一族？ -> はい！
console.log(myDog instanceof Dog); // true
// myDogはPetの一族？ -> はい、親ですからね！
console.log(myDog instanceof Pet); // true
—
2. もっと自由に！`Symbol.hasInstance`という隠し技
普通は`instanceof`の結果はJavaScriptが勝手に決めてくれますが、時には「ルールを自分で書き換えたい！」と思うこともあるでしょう。
例えば、「たとえ血縁関係がなくても、特定の条件を満たせば『仲間』とみなす」といった柔軟な判定が必要なときです。ここで登場するのが、魔法の鍵である`Symbol.hasInstance`です。
これは、`instanceof`が呼ばれた瞬間に「裏でこっそり実行される関数」を指定できるという、非常に強力なフックなんです。
例え：VIP専用の入り口を作る
通常の`instanceof`は厳格なガードマンですが、`Symbol.hasInstance`を使うと、「特定のバッジ（プロパティ）を持っている人なら、誰でもVIPとして通してあげるよ！」というルールに変更できます。
class VIPChecker {
// 静的メソッドとして定義するのがポイント！
static [Symbol.hasInstance](instance) {
// もしインスタンスが ‘isVIP’ という属性を持っていれば、
// 親子関係を無視して true を返す！
return !!instance.isVIP;
}
}
const guestA = { isVIP: true };
const guestB = { isVIP: false };
// 通常なら false なはずなのに、ルールを書き換えたので true になる！
console.log(guestA instanceof VIPChecker); // true
console.log(guestB instanceof VIPChecker); // false
—
3. 初学者がつまずきやすい「落とし穴」
ここで一つだけ、絶対に覚えておいてほしい注意点があります。
`instanceof`は、プリミティブ型（数値や文字列など）には効きません。
console.log(“hello” instanceof String); // false
「えっ、文字列なのに！」と驚くかもしれませんが、`”hello”`はオブジェクトではなく、ただの「値」だからです。`instanceof`はあくまで「オブジェクトの家系図」を辿るための道具。プリミティブ型を判定したいときは、おとなしく `typeof` を使ってくださいね。
—
最後に：完璧を目指さなくて大丈夫
JavaScriptの型判定は、非常に自由度が高い一方で、少しだけ複雑です。最初からすべてを完璧に理解する必要なんてありません。
- まずは「`instanceof`は家系図を辿るんだな」とイメージする。
- 「どうしても特殊な判定がしたいときには`Symbol.hasInstance`という裏口があるんだな」と名前だけ覚えておく。
これだけで、あなたはもう他の初心者よりもずっと深いレベルに立っています。コードを書くとき、もし迷ったら「これは今、家系図を辿っているのかな？」と一息ついて考えてみてください。
もし行き詰まったら、いつでもまたここに戻ってきてくださいね。あなたのエンジニアライフを、心から応援しています！
コメント