先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでデータの種類を調べる方法ってありますか？」

先生

「ありますよ。JavaScriptにはtypeofという演算子があって、変数や値のデータ型を簡単に調べられます。」

生徒

「演算子って何ですか？」

先生

「演算子は、計算や操作をするときに使う記号や言葉のことです。例えば+は足し算の演算子です。typeofはデータの種類を調べる演算子です。」

生徒

「具体的にどう使うんですか？」

先生

「では、基本的な使い方を見ていきましょう！」

1. typeof演算子とは？

typeof演算子は、JavaScriptの変数や値がどんな種類（データ型）かを調べるためのものです。データ型とは、数字や文字、真偽値（はい・いいえの答え）などの種類のことです。

例えば、「こんにちは」という文字は文字列（String）型、数字の100は数値（Number）型、などが代表的なデータ型です。

2. typeofの基本的な使い方

typeofの後に調べたい変数や値を書きます。すると、そのデータの種類が文字列で返ってきます。


console.log(typeof 123);          // "number"
console.log(typeof "こんにちは");   // "string"
console.log(typeof true);         // "boolean"

このように、数字は「number」、文字列は「string」、真偽値は「boolean」と表示されます。

3. 変数のデータ型を調べる例

変数に入っている値のデータ型を調べることもできます。


let age = 30;
let name = "太郎";
let isStudent = false;

console.log(typeof age);        // "number"
console.log(typeof name);       // "string"
console.log(typeof isStudent);  // "boolean"

4. JavaScriptの主なデータ型とtypeofの結果

JavaScriptでよく使う主なデータ型と、typeofが返す結果をまとめました。

数値（Number）：普通の数字。typeofは「number」
文字列（String）：テキストや文字。typeofは「string」
真偽値（Boolean）：「true」か「false」の2つだけの値。typeofは「boolean」
未定義（Undefined）：値がまだ設定されていない状態。typeofは「undefined」
オブジェクト（Object）：複数のデータをまとめたものや特別な値。typeofは「object」
関数（Function）：処理のまとまり。typeofは「function」
シンボル（Symbol）：新しい種類のデータ型。typeofは「symbol」
ビッグイント（BigInt）：とても大きな整数。typeofは「bigint」

特に重要なのは数値、文字列、真偽値、未定義、オブジェクト、関数の6つです。

5. 注意点：typeofが「object」と返す場合

オブジェクトは複雑なデータをまとめるための箱ですが、typeofで調べると、配列も"object"と返されます。

例えば：


console.log(typeof {name: "太郎"});    // "object"
console.log(typeof [1, 2, 3]);         // "object"

配列かどうかを調べたいときは、Array.isArray()という別の方法を使います。


console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray({}));         // false

6. typeofで関数を調べるとどうなる？

関数はtypeofで調べると、特別に「function」と表示されます。


function sayHello() {
  console.log("こんにちは");
}
console.log(typeof sayHello);  // "function"

7. 実際にtypeof演算子を使うシーン

typeofは、プログラムの中で変数の種類を確認して、それによって処理を変えたいときに使います。例えば、数字だったら計算をする、文字列だったら表示を変える、という具合です。


let data = "100";

if (typeof data === "number") {
  console.log("数字なので計算できます");
} else if (typeof data === "string") {
  console.log("文字列なのでそのまま表示します");
} else {
  console.log("その他のデータ型です");
}

8. まとめとしてのポイント

typeofはデータの種類を調べるための便利な演算子
数値、文字列、真偽値、未定義、オブジェクト、関数など色々な型を判定できる
配列はtypeofで「object」と返るので別の方法で判定が必要
プログラムで処理を変えたいときに役立つ

以上がJavaScriptのtypeof演算子の基本的な使い方と注意点です。ぜひ試してみてくださいね！

まとめ

ここまでJavaScriptにおけるtypeof演算子の基礎から応用、そして注意点について詳しく解説してきました。プログラミングにおいて、自分が扱っているデータが一体何なのかを正確に把握することは非常に重要です。特にJavaScriptは、変数の型を厳密に指定しなくても動く「動的型付け言語」であるため、予期せぬエラーを防ぐためにtypeofを活用する場面が多くあります。

JavaScriptのデータ型判定をマスターする重要性

開発を進めていると、外部のAPIから取得したデータや、ユーザーがフォームに入力した値が、数値なのか文字列なのかを判断しなければならない状況に必ず遭遇します。例えば、画面上では数字に見えても、プログラム内部では文字列として扱われている場合があります。そのまま計算しようとすると、足し算が文字列の結合になってしまい、バグの原因になります。そこで、事前にtypeofを使ってチェックを入れることで、安全なプログラムを書くことができるのです。

typeofの判定結果一覧と実用的なテクニック

改めて、typeof演算子を使用した際の戻り値とその挙動を整理しておきましょう。以下のサンプルコードは、実務でもよく使われる判定のパターンを網羅しています。


// プリミティブ型の判定
const num = 42;
const str = "JavaScript学習中";
const bool = true;
const undef = undefined;
const bigIntNum = 100n;
const symb = Symbol("id");

console.log(typeof num);       // "number"
console.log(typeof str);       // "string"
console.log(typeof bool);      // "boolean"
console.log(typeof undef);     // "undefined"
console.log(typeof bigIntNum);  // "bigint"
console.log(typeof symb);      // "symbol"

// オブジェクト型の注意点
const obj = { id: 1, name: "サンプル" };
const arr = [10, 20, 30];
const nul = null;

console.log(typeof obj);       // "object"
console.log(typeof arr);       // "object"（配列もobjectになる）
console.log(typeof nul);       // "object"（歴史的な理由による仕様）

上記のコードを見てわかる通り、配列（Array）やnullを判定する際には注意が必要です。これらはすべて"object"として返されてしまいます。特にnullが"object"になるのはJavaScriptの有名な仕様（バグに近い歴史的経緯）ですので、条件分岐を作る際は注意してください。

条件分岐での具体的な活用例

実際のアプリケーション開発では、引数として受け取った値に応じて処理を切り替える際に、以下のように記述することが一般的です。


function processData(input) {
  if (typeof input === "string") {
    console.log("文字列が入力されました。文字数は " + input.length + " です。");
  } else if (typeof input === "number") {
    console.log("数値が入力されました。2倍にすると " + (input * 2) + " です。");
  } else if (typeof input === "undefined") {
    console.log("値が定義されていません。");
  } else {
    console.log("その他のデータ型、またはオブジェクトです。");
  }
}

processData("Hello");
processData(50);

実行結果は以下の通りになります。


文字列が入力されました。文字数は 5 です。
数値が入力されました。2倍にすると 100 です。

型判定の精度をさらに高めるために

typeofは非常に便利ですが、万能ではありません。先ほど触れた配列の判定のように、より詳細な型を知りたい場合は、Array.isArray()やinstanceof演算子、あるいはObject.prototype.toString.call()といった手法を組み合わせて使うのがプロのエンジニアの工夫です。

最近では、JavaScriptに静的型付けの機能を導入したTypeScriptを利用する現場も増えています。TypeScriptを使うと、実行前にエディタ上で型の間違いを教えてくれるため、typeofによるチェックを減らすことができます。しかし、実行時のデータ判定には依然としてtypeofの知識が不可欠です。