【入門編】 Object.prototype.isPrototypeOfの活用 – JavaScript実践ガイド

こんにちは！JavaScriptの世界へようこそ。チーフアーキテクトの私です。

プログラミングを勉強し始めの頃って、「なんだか横文字ばかりだし、動いたと思ったら急にエラーになるし……」と、心が折れそうになりますよね。大丈夫ですよ、最初はみんな同じところでつまずきます。私も昔は、コンソール画面に赤字でエラーを出しては頭を抱えていましたから。

さて、今日一緒に見ていくのは、JavaScriptのちょっといぶし銀なメソッド`Object.prototype.isPrototypeOf`です。
「名前が長くて呪文みたい！」と思いましたか？分かります、その気持ち。でも、これが分かると、JavaScriptのオブジェクトの仕組みがスルスルと理解できるようになる、いわば「秘密の合言葉」のようなものなんです。

今日は、難しい専門用語はなるべく置いておいて、身近な例え話をしながら、優しく丁寧に紐解いていきましょう！

—

1. プロトタイプチェーンって、なに？（身の回りのお下がりで例えてみる）

`isPrototypeOf`の話をする前に、まずはその土台となる「プロトタイプチェーン」という仕組みをお話ししますね。

JavaScriptには「継承（けいしょう）」という、先輩の能力や持ち物を受け継ぐ仕組みがあります。これをイメージしやすくするために、「お下がり」に例えてみましょう。

おじいちゃん：昔ながらの頑丈な「万能ナイフ」を持っている。
お父さん：おじいちゃんから万能ナイフを受け継ぎつつ、新しく「スマートフォン」も持っている。
あなた：お父さんからスマートフォン（とお下がりのお下がりで万能ナイフも）を使わせてもらっている。

あなたが「このスマホ、お父さんのものかな？」と確認したいとき、もし手元になくても「お父さんの部屋」を見に行けば分かりますよね。さらに「おじいちゃんの部屋」まで遡れば、万能ナイフがあるかどうかも分かります。

この「自分の持ち物になければ、持ち主（親）のところへ順番に見に行いく連鎖」こそが、JavaScriptのプロトタイプチェーンの正体です。

—

2. isPrototypeOfって、どんなときに使うの？

じゃあ、今回の主役である `isPrototypeOf` は何をするものかと言うと、ズバリこうです。

> 「ねえ、私の持ち物（プロトタイプ）の系譜の中に、あなた（指定したオブジェクト）が含まれている？」

と、親戚関係を確認するチェックマンのようなものです。

例えば、さっきの例で言うと、
`お父さんの設計図.isPrototypeOf(あなた)` と聞くと、答えは `true`（はい、含まれています） になります。

実際のコードで見てみよう

百聞は一見にしかず。ちょっと簡単なコードを書いてみましょう。
ブラウザの検証ツール（コンソール）や、お使いのエディタに貼り付けて試してみてくださいね。

// 1. 「乗り物」という大元の設計図（オブジェクト）を作ります
const vehicle = {
move: function() {
console.log(“進みます！”);
}
};

// 2. 「車」という設計図を作りますが、「乗り物」の機能を受け継ぐ（お下がりをもらう）設定にします
const car = Object.create(vehicle);
car.wheels = 4; // タイヤは4つ

// 3. 「myCar」という具体的な車を1台作ります
const myCar = Object.create(car);

// さあ、isPrototypeOfで関係性をチェックしてみましょう！

// Q: vehicle（乗り物）は、car（車）のプロトタイプチェーンに含まれている？
console.log(vehicle.isPrototypeOf(car));
// 答え：true （だって、carはvehicleをお手本にして作ったからね）

// Q: vehicleは、myCar のプロトタイプチェーンに含まれている？
console.log(vehicle.isPrototypeOf(myCar));
// 答え：true （myCar -> car -> vehicle と繋がっているからOK！）

// Q: 全く関係のない「猫」のオブジェクトを作ってみます
const cat = { meow: “にゃー” };

// Q: cat は、myCar のプロトタイプチェーンに含まれている？
console.log(cat.isPrototypeOf(myCar));
// 答え：false （赤の他人です！）

どうでしょう？「あ、親戚関係を調べてるんだな」というのが、なんとなくイメージできたのではないでしょうか。

—

3. よくある疑問：「instanceof」と何が違うの？

JavaScriptを少し勉強したことがある人なら、`instanceof` という似たようなキーワードを見たことがあるかもしれません。「え、じゃあどっちを使えばいいの？」って思いますよね。

ここが初学者が一番混乱しやすいポイントです。安心してついてきてくださいね。

`instanceof`：

「この『設計図（コンストラクター）』から生まれたものですか？」と聞くもの。

`isPrototypeOf`：

「この『具体的なオブジェクト』が、プロトタイプチェーンのどこかに含まれていますか？」と聞くもの。

例えるなら……

`instanceof` は、「警察の身元確認」（このパスポートを発行した機関のものか？）。
`isPrototypeOf` は、「血縁関係のDNA鑑定」（この一族の血を引いているか？）。

実務の現場では、特定のクラス（設計図）から作られたかをサクッと調べたいときは `instanceof` が好まれますが、「目の前にある特定のオブジェクトをベースにして作られたものか？」を厳密にチェックしたいときには、`isPrototypeOf` が真価を発揮します。

—

4. チーフアーキテクトからの実践アドバイス（実務での使い所）

「じゃあ、実際のWeb制作やアプリ開発で、いつこれを使うの？」というお話をして締めくくりますね。

実は、日常的なWebサイトのコーディング（ボタンをクリックしたら色が変わる、など）で、`isPrototypeOf` を毎日書くかと言えば……正直、そんなに多くはありません。

しかし、「ライブラリを自作するとき」や、「複雑なコンポーネントシステム（プラグインなど）の設計」を行う際には、非常に頼りになる相棒になります。

例えば、ユーザーが渡してきた設定オブジェクトが、自分が想定しているベース設定の系統をきちんと引き継いでいるか（改ざんされていないか、変なデータが混ざっていないか）を安全に検証したいときなどに、こっそりと裏側で活躍してくれます。

// プラグインのベース設定
const baseConfig = { theme: “light” };

// ユーザーがカスタマイズした設定
const userConfig = Object.create(baseConfig);
userConfig.pluginName = “SuperSlider”;

// ユーザー設定が、ちゃんとベース設定を継承しているか安全確認する関数
function validateConfig(config) {
if (baseConfig.isPrototypeOf(config)) {
console.log(“安全な設定オブジェクトです。処理を続行します。”);
} else {
console.warn(“警告：予期しないオブジェクトが渡されました！”);
}
}

validateConfig(userConfig); // 「安全な設定オブジェクトです…」が表示されます

このように、堅牢で安全なプログラムを作るための「お守り」として知っておくと、あなたのエンジニアとしての引き出しがグッと深まります。

—

まとめ

`isPrototypeOf` は、あるオブジェクトが別のオブジェクトの「プロトタイプチェーン（血縁関係・お下がり関係）」に含まれているかを `true` / `false` で教えてくれるメソッド。
迷ったら「このオブジェクトの親戚ですか？」と聞いてるんだな、と思い出そう。
`instanceof` との使い分けは、設計図ベースか、オブジェクトベースかの違い。

最初は難しく感じるプロトタイプの世界も、身近な例えに置き換えてみると、少しだけ親しみやすく感じられたのではないでしょうか？
焦らず、自分のペースでコードを書いて、コンソールをたくさん汚しながら（エラーを出しながら）覚えていけば大丈夫です。

あなたのJavaScriptの学習を、チーフアーキテクトとしてこれからも応援しています！一緒に楽しくコードを書いていきましょう！