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オブジェクトかどうか判定することで数値型であることの保証ができます。

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

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

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

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

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

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

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

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

JavaScriptを学習中の方へ

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

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

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

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

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

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

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する