JavaScriptのinstanceof演算子の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのinstanceof演算子の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• はじめに
• instanceof演算子とは
• 実際に書いてみよう
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

instanceof演算子の使い方について詳しく説明していくね！

お願いします！

はじめに

今回はJavaScriptのオブジェクトに関する説明をします。

オブジェクト定義をもとにオブジェクトを作成することで、用意されているメソッドを利用したり、複数の値を保持できます。

JavaScriptでは関数なども、文字列や数値だけでなくオブジェクトの受け渡しができてとても便利なのですが、他の言語と違い、関数などの引数にどのオブジェクトが渡せるか指定できないので、複数人で実装をする際には注意が必要です。

今回はオブジェクトを引数で扱う関数を作る際に、便利なinstanceof演算子について説明します。

オブジェクトなど具体的なイメージが湧きにくい内容ではありますが、理解すると大規模なアプリ開発などにも役立ちますので、ぜひ参考にしてくださいね。

instanceof演算子とは

instanceof演算子とは、オブジェクトがプロトタイプにコンストラクタのprototypeプロパティを持っているかを確認する演算子です。

上記の内容だと難しく感じるかと思いますが、簡単に言うと型チェックができる演算子です。

以下のように判定実装します。

instanceof演算子の使い方

(判定したいオブジェクト instanceof オブジェクト名称)

判定したいオブジェクトの種類が 、instanceof の後ろに記載したオブジェクト名称と一致する場合はtrue、不一致の場合はfalseを返却します。

インスタンスとは

new演算子で作られたオブジェクトのことです。

関数を設計図とすると、new演算子で作られたオブジェクトは実体です。

設計図と実体の関係をたとえるなら、車の設計図が関数で色や所有者が異なる実際の車が実体のオブジェクトとイメージしてみましょう。

JavaScriptで標準で用意されているNumberオブジェクトは、設計図があらかじめ用意されています。

以下のようにインスタンスを作成します。

let number = new Number(12);

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

以下のような例でinstanceof演算子は便利です。

Aさん：日付の比較する共通関数を定義。
引数1の方が大きい場合は1、引数2の方が大きい場合は2、一致する場合は0を返却

Bさん：Aさんの作った加算処理をBさんの実装画面から呼び出す。

Aさんの実装関数

const compareNum = (num1,num2)=> {
    /*日付オブジェクトかチェック*/
    if(num1 instanceof Number & num2 instanceof Number){
        if(num1 > num2){
            return 1;
        }else if(num1 < num2){
            return 2;
        }else{
            return 0;
        }
    }else{
        console.log('引数がNumberオブジェクトではありません。');
        return "error";
    }
}

Bさんの実装内容

/*エラーとなるケース*/
console.log(compareNum("文字列",4));  
        //console=> 引数がNumberオブジェクトではありません。error
console.log(compareNum(3,4));
        //console=> 引数がNumberオブジェクトではありません。error

    /*正しく利用しているケース*/
let num1 = new Number(4);
let num2 = new Number(12);
console.log(compareNum(num1,num2));
        //console=> 2

上記のBさんの実装において、Numberオブジェクトの使用を強制することができます。

共通関数で、特定のオブジェクト内で用意されている関数などをつかうときには、引数に異なるオブジェクトが渡された場合に意図せぬ動作や結果を返してしまうことがあります。

上記例ですと、Aさんがもしinstanceof演算子の判定をしていないで、Bさんが引数に文字列を指定した場合は、2が返却されてしまいます。

また数値チェックで実装も可能ですが、Numberオブジェクトかどうか判定することで数値型であることの保証ができます。

他にも日付オブジェクトや独自で定義したオブジェクトなども、同じように判定できます。

まとめ

今回はinstanceof演算子による型チェックのやり方を学びました。

JavaScriptにおけるオブジェクトを扱う関数などを実装する時にはとても便利な演算子ですので、ぜひ普段の実装に活用してください。

より大規模なアプリ構築などの際に役立てくださいね。

JavaScriptのinstanceof演算子の使い方がよく分かったので良かったです！

ゆかりちゃん、これからも分からないことがあったら質問してね！

分かりました。ありがとうございます！

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！