JavaScriptの値の型を判定しよう! typeofの使い方を徹底解説

こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。

JavaScriptのコードを書く際に、変数の型を知りたいときってよくありますよね。
また、どのクラスのインスタンスなのかを知りたい場合も多いです。

今回はそんな時に使える、JavaScriptのtypeofについて解説したいと思います。

この記事は下記の流れで解説していきます。

【基礎】そもそも型とは?
【基礎】typeofの基本的な型判定方法
【発展】typeofで配列やラッパークラスを判定する方法
【発展】typeofとinstanceofの違い

typeofの使い方をマスターし、正しい場面で使いこなせるよう、しっかり学習を進めていきましょう。

そもそも型とは?

JavaScriptの型判定について解説する前に、そもそも型(かた)とはどんなものなのか、きちんと理解するところから始めましょう。

プログラミングの世界に限らず日常の世界でも”文字”という言葉は色々なものを指しますよね。
日本語のひらがなや英語、それに数字など様々な種類に分類されます。

プログラミングの世界でもコンピュータが扱う”データ”という言葉が指すものとして、いくつかの種類が存在しています。
その種類のことを一般的に””と呼んでいます。

例えば、日本語の”おはよう”という文字のデータは文字列型(もしくはString型)と呼ばれ、数字の1や100などは数値型と呼ばれています。

さらにその中で、JavaScriptの基本的な型のことを組み込み型(もしくはプリミティブ型)と呼んでいます。

今回やるような判定の際は、下記のような型がよく使われています。
まだこれでも一部ですが、ひとまずこれだけ押さえておけばOKです。

型名値の例判定で表示される値備考
数値型1,2,3などnumber
文字列型おはよう、abcなどstringString型とも呼ばれる
真偽値型True / Falseboolean
Null型nullobject
Undefined型undefinedundefined何も代入されていない変数に設定されている値
関数function() {}function
他のオブジェクト{a: 1}object

型には本当に色々な種類があります。
一気に覚えるのは大変だと思うので、必要な時に確認してみるといいですね。

型を判定するtypeofの使い方

型の種類についてバッチリ理解できたところで、型の判定方法について確認していきましょう。

型の判定には、typeofという演算子を使います。

基本的な書き方は下記のように、typeofの後ろに型を判定したい値を記述するだけです。

では、これを使って様々な型を判定して、より理解を深めていきましょう。

組み込み型(プリミティブ型)の場合

typeof演算子で判定するものとして、まずは、文字列や数値型などの組み込み型(プリミティブ型)のtypeofの判定結果を見ていきましょう。

実行結果:

以上のように、組み込み型に対して、typeofは正しく動作しているようですね。

また、「typeof (typeof 0) = string」となっているように、typeofの返り値はstring型であることがわかります。

関数やオブジェクト型の場合

次は、関数オブジェクトに対するtypeofの結果を見ていきましょう。

実行結果:

関数やクラス、Mathの組み込み関数などは、"function"と判定されていますね。

また、オブジェクトは"object"と正しく判定されていますが、配列やラッパークラスも”object”と判定されています。

ラッパーオブジェクトは、組み込み型をオブジェクト化したものですので、"object"と判定されてしまうのです
これでは厳密な判定とは言えませんね。

そんな時、はArray.isArray()メソッドを使えば、配列の場合はtrue、配列以外の場合はfalseを返してくれます。

配列やラッパークラスを判定する

typeofでは、ラッパーオブジェクトがObjectと判定され、ArrayもObjectと判定されていました。

もっと細かく判定ができるよう、これらを改善する関数を作ってみましょう。

下記のgetClassName()という関数を作成してみました。

引数がundefinednullの場合は、いずれもオブジェクトではないのでそのまま返り値にしています。
この判断にtypeofを使用しています

nullかどうかは、オブジェクトに===演算子を使って直接nullかを判断するようにしました。

それ以外の場合はprototype名を取得し、その中から正規表現にてクラス名を抜き出しています。
これは、typeofの機能ではありません

では、作成した関数を以下のコードで判定してみましょう。

実行結果:

以上のように、組み込み型およびArrayについてもそのクラス名を取得できています。

また、関数のクラス名も取得できていますね。

類似メソッドinstanceofとの違い

typeof演算子と似たような判定処理を行う演算子にinstanceof演算子があります。

instanceof演算子オブジェクトがどのクラスのインスタンスかを判定する際に使用します。

使い方は簡単、instanceofに続けて調べたいオブジェクトを指定するだけです。

実行結果:

以上のように、配列は、ArrayとObjectのインスタンスでした。
これはArrayがObjectを継承したオブジェクトだからですね。

また、組み込み型には、instanceofは使用できませんでした

これは、組み込み型はオブジェクトを継承した"もの(オブジェクト)"ではなく、単なる""なので、組み込み型がなんらかのオブジェクトのインスタンスになることはないからです。

まとめ

いかがでしたか?
typeof演算子は、変数の型を取得するのに便利ですね。

最後に、ポイントをおさらいしておきましょう。

・組み込み型のラッパークラスに対してはうまく動作しない
・instanceof演算子は、オブジェクトがどのインスタンスなのかの判定ができる
・組み込み型のラッパークラスも正しく判定できている
・typeof演算子をうまく関数化すれば便利なコードができる

皆さんもぜひ、ご自分で関数化してみてください。

使い方を忘れてしまったら、是非この記事を思い出してくださいね

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

貝原 輝昌

貝原 輝昌

こんにちは!貝原(@touhicomu)と申します。
現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
以下の活動も行っています。
 ・笑楽井石のブログ
 ・エクセル関数を日本語化するソフト
 ・エクセルVBAを日本語で記述するソフト

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説