【入門編】 instanceof演算子によるプロトタイプチェーン判定 – JavaScript実践ガイド

こんにちは！JavaScriptの世界へようこそ。
コードを書いていると、「この箱（オブジェクト）は、一体どこで誰に作られたものなんだろう？」と迷子になる瞬間、ありますよね。

今日は、そんな時に頼れる「血縁調査員」、`instanceof`（インスタンスオブ）演算子についてお話しします。難しそうに聞こえるかもしれませんが、実はとっても人間味のある仕組みなんですよ。一緒に紐解いていきましょう。

—

JavaScriptのオブジェクトは、まるで「お土産もの」のようなものです。誰が作ったか、どの工房から来たかという「出自」を持っています。

`instanceof` は、「このオブジェクトは、あの設計図（コンストラクタ）から生まれたものですか？」と確認するための探偵です。

例えば、あなたが「ケーキ」を買ったとします。そのケーキの箱の裏には、「どこのパティスリーで作られたか」というラベルが貼ってありますよね。`instanceof` はそのラベルを見て、「はい、このケーキは確かにA店で作られたものです！」と判定してくれるわけです。

// 「ケーキ」という設計図（クラス）を作ります
class Cake {}

// ケーキを1つ作りました（インスタンス化）
const myCake = new Cake();

// さて、これは「Cake」から生まれたものかな？
console.log(myCake instanceof Cake); // 結果: true （正解！）

// では、全く関係ない「パン」の設計図で聞いてみたら？
class Bread {}
console.log(myCake instanceof Bread); // 結果: false （当然ですね！）

—

ここで少しだけ、JavaScriptの不思議な仕組み、「プロトタイプチェーン」に触れておきましょう。

JavaScriptのオブジェクトは、自分自身で持っていない機能が必要になると、「お父さん（親オブジェクト）」に聞きに行くという習性があります。これを「プロトタイプチェーン」と呼びます。

`instanceof` は、この「親をたどる旅」をずっと追いかけます。もし途中で「おじいちゃん（コンストラクタ）」に会えたら、「ああ、あなたは間違いなくこの一族の一員ですね！」と `true` を返してくれるのです。

—

ここで、多くの人が一度は引っかかるポイントをこっそりお伝えします。それは、「プリミティブ型」と「オブジェクト」の違いです。

const name = “JavaScript”; // これは「文字列リテラル」
console.log(name instanceof String); // 結果: false …あれっ！？

「えっ、文字列なのに `false` なの！？」とびっくりしますよね。大丈夫、焦らないでください。

実は、`”JavaScript”` というのは、設計図から生まれた「箱に入ったオブジェクト」ではなく、言語が標準で用意している「生身の値（プリミティブ）」なんです。`instanceof` は「誰が作ったか」を見るので、そもそも「設計図から生まれていないもの」には判定ができません。

これを知っておくだけで、「あ、これは値だから `instanceof` じゃなくて `typeof` でチェックするやつだな」と冷静に判断できるようになります。

—

「じゃあ、この探偵はいつ使うの？」というと、主に「渡されたデータが期待通りの形をしているか確認するとき」に使います。

例えば、関数に「日付データ」を渡してほしいのに、うっかり「文字列」が来ちゃった！なんて時、プログラムが壊れる前に食い止めることができます。

function showDate(date) {
// もし渡されたのがDate（日付）オブジェクトじゃなかったらエラーを出す
if (!(date instanceof Date)) {
console.error(“エラー！ちゃんとした日付データを渡してくださいね！”);
return;
}

console.log(“今日の日付は: ” + date.toLocaleDateString());
}

showDate(new Date()); // うまくいく！
showDate(“2023-10-01”); // 「エラー！」と怒ってくれるので安全！

—

いかがでしたか？`instanceof` は、堅苦しいルールではなく、「このデータはどこから来たの？」と確認するための、とても親切なガイドです。

最初はプロトタイプチェーンの概念が難しく感じるかもしれませんが、全部を一度に理解しようとしなくて大丈夫。「困った時に、出自を確認する便利な道具があるんだな」と頭の片隅に置いておくだけで、あなたのコードは格段に読みやすく、そして強くなります。

迷ったら、いつでもコンソールに `instanceof` を打ち込んで遊んでみてください。JavaScriptは、あなたの好奇心に必ず応えてくれますよ！

それでは、良いコーディングライフを！応援しています！