【JavaScript】typeofとは？使い方と判定の仕組みを初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptを学び始めると、さまざまなデータ型を扱う場面に出会うことが多いのではないでしょうか。
文字列や数値、配列やオブジェクトなど、どれもプログラムを動かす上で欠かせない存在です。
しかし、実装を進めるうちに「この変数はいま何の型なんだろう？」と悩むこともあるかもしれません。
そんなとき役立つのが、typeof という演算子です。

typeof を使うと、変数や値がどのデータ型であるかを簡単に判定できます。
たとえば文字列か数値かといった基本的な情報はもちろん、関数であれば "function" と返ってくるので、ロジックを分岐させたいときにも便利です。

この演算子を理解しておくと、思わぬエラーを防いだり、コードの保守がしやすくなったりします。
とくに初心者の皆さんは、値の型を正しく判定できるとプログラムのデバッグや実装がぐっと楽になるでしょう。

そこで本記事では、typeof の動作原理や具体的な使い方を丁寧に解説します。
さらに、実務でどう使うのか、どんな場面で便利になるかについても触れていきます。
サンプルコードを通じてイメージをつかみながら、基礎をしっかり身につけていきましょう。

この記事を読むとわかること

typeof が何をする演算子なのか
JavaScriptにおける主なデータ型と typeof での判定結果
実務での使用例や典型的な活用シーン
ほかの型チェック手段との比較や注意点

ここを入り口として、JavaScriptのデータ型に関する理解を深め、スムーズにコードを書くための手助けになればと思います。

typeofとは何か

JavaScriptの文法に組み込まれている演算子の一つが typeof です。
演算子と聞くと足し算や引き算を想像しがちですが、typeof は値の型を文字列で返す役割を持っています。

JavaScriptにおける基本概念

JavaScriptでは、変数や値が「文字列」「数値」「真偽値」「オブジェクト」「関数」など、さまざまな型をとることができます。
ただし、プログラミング初心者の皆さんにとっては「値がいま何の型なのか」を瞬時に把握するのは難しいかもしれません。
そこで typeof を使うと、以下のような形で型情報を取得できます。


console.log(typeof "Hello"); // "string"
console.log(typeof 123);     // "number"

これによって、値の型を調べたいときにサッと確認できるのが typeof の便利なところです。

typeofの基本的な使い方

使い方はとてもシンプルで、演算子 typeof の後に判定したい値や変数名を書くだけです。
たとえば typeof 変数名 や typeof (式) のように書くと、結果として文字列が返ってきます。
これを if 文などで使い、型によって分岐処理を行うことがよくあります。


const data = "JavaScript";
if (typeof data === "string") {
  console.log("これは文字列です");
} else {
  console.log("これは文字列ではありません");
}

このようにして、コードの中で型を条件に含めることで、目的に合った制御を実現しやすくなるのです。

typeofで判別できるデータ型

typeof 演算子は、JavaScriptが持つ基本データ型の大半を判定することができます。
ここでは代表的なものを見ていきましょう。
なお、JavaScriptには言語仕様として「プリミティブ型」と「オブジェクト型」が存在し、プリミティブ型には string、number、boolean、undefined、symbol、bigint などがあります。

string

文字列型であることを示します。
たとえば "Hello World" や 'ABC' のようにダブルクォーテーションやシングルクォーテーションで囲んだ値は、typeof すると "string" が返ってきます。
実務では、ユーザーが入力したテキストを扱うときなどに頻繁に使われます。


const str = "Hello";
console.log(typeof str); // "string"

number

数値型であることを示します。
整数でも小数でも、JavaScriptでは区別なくすべて "number" となります。
たとえば 42 や 3.14 などは "number" と判定されます。


const num = 42;
console.log(typeof num); // "number"

boolean

true や false が当てはまります。
条件分岐やフラグ管理でよく使われる型です。


const isVisible = false;
console.log(typeof isVisible); // "boolean"

undefined

JavaScriptにおける未定義の値を表します。
宣言だけして代入していない変数は undefined という状態になり、typeof すると "undefined" が返ってきます。


let noValue;
console.log(typeof noValue); // "undefined"

object

配列やオブジェクトリテラル、さらに null も含めて、広義でオブジェクトとみなされるものは typeof すると "object" が返ります。
このため、配列でも "object" という結果になる点は初心者の方が混乱しやすいところです。
後述する Array.isArray と組み合わせる方法なども覚えておくと便利でしょう。


const arr = [1, 2, 3];
console.log(typeof arr); // "object"

function

JavaScriptでは関数も特別なオブジェクトですが、typeof の結果は "function" と返ってきます。
これによって、他のオブジェクトと区別しやすい仕組みになっています。


function greet() {
  return "Hello";
}
console.log(typeof greet); // "function"

symbol

ES6で導入された新しいプリミティブ型の一つです。
一意の識別子を生成するときに使われ、typeof すると "symbol" が返ります。


const sym = Symbol("unique");
console.log(typeof sym); // "symbol"

bigint

非常に大きな整数を扱うために用意された型です。
9007199254740992n のように末尾に n を付けた形で記述します。
typeof すると "bigint" が返るので、巨大な整数を扱うときの分岐などで利用します。


const bigNum = 9007199254740993n;
console.log(typeof bigNum); // "bigint"

typeofの返り値一覧と具体例

JavaScriptで typeof を使ったときに返ってくる主な文字列は以下のとおりです。

"string"
"number"
"boolean"
"undefined"
"object"
"function"
"symbol"
"bigint"

たとえば、文字列リテラルの場合は "string"、数値なら "number"、関数なら "function" というように、直感的に分かりやすい返り値が得られます。
一方で、配列でも "object" が返るなど、完全に直感的とはいえない部分もあります。
実装を進めながら「どんな値が返ってくるか」をしっかり把握しておくと、思わぬバグを防ぐことにつながります。

以下のコード例では、さまざまな値に typeof を適用した結果をまとめています。


console.log(typeof "text");          // "string"
console.log(typeof 123);            // "number"
console.log(typeof true);           // "boolean"
console.log(typeof undefined);      // "undefined"
console.log(typeof null);           // "object" (注意)
console.log(typeof { key: "value" } ); // "object"
console.log(typeof [1, 2, 3]);      // "object"
console.log(typeof function() {});  // "function"
console.log(typeof Symbol("id"));   // "symbol"
console.log(typeof 10n);            // "bigint"

この一覧を目で追って、どんな型なのかイメージしながら確認すると、開発時に困りにくくなります。

よくある誤解：typeof nullは"object"

JavaScript初心者が戸惑いやすい点として、null に対して typeof を実行すると "object" が返るという仕様があります。
これはJavaScriptの歴史的な仕様上の理由によるもので、言語上の設計ミスとも言われることがあるほどです。

実務でも、null を判定するときは typeof だけではなく、=== null のような直接的な比較を使うことが多くなります。
たとえば以下のコードのように、null をきちんと区別したい場合は、typeof による判定以外を組み合わせるのが一般的です。


const data = null;
if (data === null) {
  console.log("nullです");
} else if (typeof data === "object") {
  console.log("オブジェクトです");
}

この点を知らずに「null は何らかの特殊値だから typeof null は 'null' と返るはずだ」と思い込むと、想定外の挙動に驚くかもしれません。
あらかじめ押さえておくことで、余計な混乱を避けられます。

typeof演算子の典型的な使用シーン

それでは typeof が具体的にどう役に立つのか、よくある活用シーンを見ていきましょう。
実際のプロジェクトでも用いられるケースが多いので、現場でのイメージを膨らませてみてください。

値が数値かどうかを判定する

フォームの入力値が数値かどうかを確かめるときなど、typeof で "number" をチェックできます。
ただし、文字列として受け取る可能性がある場合も多いので、そこで parseInt や Number 関数を組み合わせることもあります。
こうした実務的なフローを想定しておくと、バリデーションに役立つでしょう。


function processInput(value) {
  if (typeof value === "number") {
    console.log("数値として処理します");
    // ここで数値ならではの処理を実装
  } else {
    console.log("数値ではありません");
  }
}

processInput(100);   // "数値として処理します"
processInput("100"); // "数値ではありません"

値が文字列かどうかを判定する

たとえばAPIレスポンスを受け取って、中身が文字列かどうかをチェックしたいケースがあります。
そこでも typeof data === "string" のように書くと、安全に文字列操作が可能かを事前に判定できます。
エラーを引き起こしにくい実装方法として押さえておきたい部分です。

値が関数かどうかを判定する

イベントハンドラやコールバック関数を渡すような仕様にしているとき、実際に渡ってきた値が関数かどうかをチェックしたい場面があります。
そういうときは typeof callback === "function" のように書くと、想定外の型が来た場合に早めに弾くことができるでしょう。


function executeCallback(cb) {
  if (typeof cb === "function") {
    cb();
  } else {
    console.log("コールバックではありません");
  }
}

executeCallback(() => console.log("関数が実行されました"));
executeCallback("not function");

型によって分岐処理を行う

複雑なロジックになると「文字列が来たらこうする、数値が来たらこうする、オブジェクトならこうする」というふうに複数の型に応じた処理を書き分けることがあります。
その際に switch文 などと組み合わせる例も少なくありません。


function handleData(data) {
  switch (typeof data) {
    case "string":
      console.log("文字列ですね");
      break;
    case "number":
      console.log("数値ですね");
      break;
    case "object":
      console.log("オブジェクトや配列かもしれません");
      break;
    default:
      console.log("その他の型かもしれません");
  }
}

このように、用途によって typeof の判定を差し込む場所はさまざまです。
ただし一部のケースでは、typeof では区別しきれない場面もあります。
そこで次に、別の型チェック方法と比較してみましょう。

ほかの型チェックとの比較

typeof は手軽に使えて便利な反面、null が "object" と返ることや、配列とオブジェクトを区別できないなどの制約があります。
状況によっては、instanceof や Array.isArray といった他の方法を利用する方が適切な場合もあるでしょう。

instanceofとの違い

instanceof は、あるインスタンスが特定のクラスやコンストラクタ関数のオブジェクトであるかを判定するときに使います。
たとえば、myDate instanceof Date のように書いて、myDate が Date オブジェクトかどうかをチェックできるわけです。
一方、typeof はあくまでも「プリミティブ型かオブジェクトか」をざっくり知るためのものなので、細かいクラスレベルの判定には不向きです。


const myDate = new Date();
console.log(myDate instanceof Date); // true
console.log(typeof myDate);          // "object"

Array.isArrayとの使い分け

配列であるかどうかを判定するときは、typeof arr が "object" となるため、arr が本当に配列なのかオブジェクトなのかが区別しづらいです。
そこで Array.isArray を使うと、正しく配列かどうかを判定できます。


const arr = [1, 2, 3];
if (Array.isArray(arr)) {
  console.log("これは配列です");
}

このように、状況に応じて typeof 以外の方法と組み合わせながら、柔軟に型チェックを行うことが大事です。

typeof だけに頼ると、配列を区別したい場面などで不便が生じる可能性があります。
実務の要件に合わせて instanceof や Array.isArray、あるいは直接的な比較演算を組み合わせることが多いです。

typeofを使った実務上の注意点

typeof 演算子は手軽に型を判定できる反面、注意して使わないと、思わぬバグを生むこともあります。
ここでは、実務でよく話題になるポイントに目を向けてみましょう。

エラー処理やバリデーションでの活用

たとえば、APIから受け取ったデータが想定の型でない場合に、エラー処理を行うことがあります。
そのとき typeof を活用して事前にチェックしておけば、アプリがクラッシュするリスクを下げられます。
一方で、JavaScriptの型変換（暗黙的な型変換など）が起こるシーンでは、思わぬ型が入ってくることもあるので油断は禁物です。

typeofでは区別しきれない場面

先ほど紹介したとおり、null は "object" と返る仕様ですし、配列とオブジェクトを区別することもできません。
また、あまり多くないケースかもしれませんが、JavaScriptのクラスを使って生成されたインスタンスが、どんな種類のクラスなのかを typeof だけで見分けるのは不可能です。
実務では、これらの仕様を把握した上で、必要に応じて instanceof などを使い分ける必要があります。


class CustomClass {}
const instance = new CustomClass();
console.log(typeof instance); // "object"
console.log(instance instanceof CustomClass); // true

このように、typeof とそれ以外のチェック方法をうまく組み合わせながら、チームのコーディング規約やプロジェクトの要件に合わせるのがコツです。

typeofとTypeScriptの型システム

JavaScriptを使いこなすうちに、型安全性を高めるためにTypeScriptへ移行したいと思う方もいるでしょう。
TypeScriptではコンパイル時に型をチェックできるため、実行前に型エラーを見つけやすくなります。

型安全の向上

TypeScriptなら、コード上で変数に型を付与することができるため、そもそも typeof を頻繁に使う必要が減るかもしれません。
しかし、それでも実行時に値の型を判定したいシーンはあるので、TypeScriptのプロジェクトであっても typeof は役立ちます。

演算子と型ガード

TypeScriptには タイプガード という機能があり、typeof を使った条件分岐などを行うと、コンパイラがその分岐内では型が特定できるようになります。
たとえば以下のように書くと、typeof data === "string" のブロック内では、data は自動的に「文字列」として推論されます。


function process(data: string | number) {
  if (typeof data === "string") {
    // ここでは data は string として扱われる
    console.log(data.toUpperCase());
  } else {
    // ここでは data は number として扱われる
    console.log(data.toFixed(2));
  }
}

このように TypeScript の型システムとも親和性があり、実行時の型判定とコンパイル時の型チェックが連携して、より安全なコードを書きやすくなります。

typeof演算子を活用するためのサンプルコード

最後に、もう少しまとまった形で typeof を活用するサンプルコードを見てみましょう。
ここでは、さまざまなデータ型を渡せる関数を用意し、中身によって違う処理をするイメージを紹介します。

基本的な判定例

以下の例は、渡された引数が文字列なのか数値なのか、それ以外なのかを分けて、別々の処理を行います。


function handleValue(value) {
  if (typeof value === "string") {
    console.log("文字列の長さは:", value.length);
  } else if (typeof value === "number") {
    console.log("数値を2倍すると:", value * 2);
  } else {
    console.log("その他の型:", typeof value);
  }
}

handleValue("Hello"); // 文字列の長さは: 5
handleValue(42);      // 数値を2倍すると: 84
handleValue(true);    // その他の型: boolean

このように「型ごとにどんな操作が可能か」を考えて実装すると、意図しない操作によるエラーを減らすことができます。

実践的なユースケース例

次は、オブジェクトや配列、関数まで含めて分岐するもう少し複雑な例です。
APIレスポンスなど、どんな型が返るか分からないデータを一括して処理するイメージで書いてみました。


function processData(data) {
  switch (typeof data) {
    case "string":
      console.log("受け取った文字列:", data);
      break;
    case "number":
      console.log("受け取った数値:", data);
      break;
    case "boolean":
      console.log("受け取った真偽値:", data);
      break;
    case "function":
      console.log("関数が渡されました");
      data(); // コールバックを実行する
      break;
    case "object":
      if (data === null) {
        console.log("null値です");
      } else if (Array.isArray(data)) {
        console.log("配列を受け取りました。要素数:", data.length);
      } else {
        console.log("オブジェクトを受け取りました");
      }
      break;
    default:
      console.log("その他の型:", typeof data);
  }
}

// テスト実行例
processData("Sample string");
processData(123);
processData(false);
processData([1, 2, 3]);
processData({ name: "User" });
processData(() => console.log("コールバックが呼ばれました"));
processData(null);

このようなコードを書けば、大まかに型の違いを仕分けた上で処理を切り替えられます。
実務で想定外のデータ型が来た場合にも、早めに気づきやすくなるでしょう。

型ごとにどんなプロパティが使えるかは異なるので、事前にしっかり判定しておくことが大切です。
とくにオブジェクトか配列かを分けたいときは、Array.isArray などを組み合わせるのが定番です。

まとめ

ここまで、JavaScriptの typeof 演算子を中心に、判定できるデータ型や代表的な使用例、他の型チェック方法との違いなどを解説しました。

皆さんが実際にコードを書く際、変数や関数にどんな型の値が入るかが分からない場面は意外と多いものです。
そんなときに typeof を活用すれば、実装を進めるうえでの混乱を軽減し、エラーを未然に防ぎやすくなります。

ただし、null が "object" になるなどの特徴的な部分や、配列とオブジェクトを区別できないなどの制限もあるため、必要に応じて instanceof や Array.isArray、直接的な比較演算などを使い分けましょう。

プログラミング初心者の皆さんは、まずは typeof で気軽に型を確かめながらコーディングに慣れてみるのがおすすめです。
そこから自分なりに「もっと細かくチェックしたい」と思ったら、さらに他の型チェック手法を試してみると、知識がぐんと広がるはずです。

JavaScriptで開発を進めるうえでの基礎知識として、ぜひ活用してみてください。
今後の学習や実装の現場でも、きっと役立つ場面が多いでしょう。