JavaScriptのtypeof演算子でデータ型を判定する方法

1. typeof演算子とは？役割とデータ型の基本

1. typeof演算子とは？役割とデータ型の基本

typeof（タイプオフ）演算子は、JavaScriptで扱うデータが「数値なのか？」「文字なのか？」といった種類（データ型）を調べるための道具です。プログラミングでは、データの種類によってできること・できないことが決まっているため、型を知ることは非常に重要です。

例えば、料理をするときに「砂糖」と「塩」を間違えないようにラベルを確認するのと似ています。JavaScriptというキッチンで、中身が何であるかを確認する「ラベル確認作業」がtypeofの役割です。

プログラミング未経験の方は、まず「すべての値には種類がある」ということと、「typeofを使えばその種類をコンピュータに教えてもらえる」という点だけ押さえておけば大丈夫です。具体的な使い方は次の章で詳しく解説します。

2. typeofの基本的な使い方

2. typeofの基本的な使い方

JavaScriptで変数のデータの種類（データ型）を調べたいときは、typeof演算子を使います。使い方は非常にシンプルで、typeofの後に調べたい値や変数を記述するだけです。

プログラミング未経験の方でも分かりやすいように、日常的なデータを使ったサンプルを見てみましょう。例えば、年齢（数字）や名前（文字）、スイッチのオン・オフ（真偽値）などがどのような種類として判定されるかを確認できます。

// 数字を調べてみる
let age = 25;
console.log(typeof age);

// 文字列を調べてみる
let userName = "田中太郎";
console.log(typeof userName);

// 真偽値（はい・いいえ）を調べてみる
let holdsLicense = true;
console.log(typeof holdsLicense);

上記のコードを実行すると、ブラウザのコンソールには以下のような結果が表示されます。これがJavaScriptにおける「データ型の名前」です。

"number"
"string"
"boolean"

このように、typeofを使うことで、プログラムが扱っているデータが数値（number）なのか、文字列（string）なのか、あるいは真偽値（boolean）なのかを、文字列として取得して簡単に判別することができます。開発現場では「受け取ったデータが想定通りの種類かどうか」をチェックする際によく利用される非常に重要な機能です。

3. 変数のデータ型を調べる方法（typeof演算子）

3. 変数のデータ型を調べる方法（typeof演算子）

JavaScriptでは、変数の中に「どんな種類のデータ」が入っているのかを後から確認することができます。プログラミング初心者の方がデバッグ（プログラムのミス探し）をする際、非常に役立つテクニックです。

データ型を調べるには、typeof演算子（タイプオフ）を使います。使い方はとても簡単で、調べたい変数の前に typeof と書くだけです。

// 数値型の変数
let age = 30;
// 文字列型の変数
let name = "太郎";
// 論理型（真偽値）の変数
let isStudent = false;

// それぞれのデータ型をコンソールに表示して確認する
console.log(typeof age);
console.log(typeof name);
console.log(typeof isStudent);

このコードを実行すると、ブラウザのコンソールには以下のように出力されます。

"number"
"string"
"boolean"

実行結果を見ると、数字なら number、文字なら string、Yes/Noのデータなら boolean と表示されているのがわかりますね。このように、JavaScriptが「このデータは〇〇型だよ」と自動で判定して教えてくれるのです。

「計算がうまく合わない」「文字が連結されない」といったトラブルが起きたとき、この方法で中身が本当に自分の予想通りの型（数値なのか文字なのか）になっているかチェックしてみてください。

4. JavaScriptの主なデータ型とtypeof演算子の使い方

4. JavaScriptの主なデータ型とtypeof演算子の使い方

JavaScriptで扱うデータにはいくつかの「型（種類）」があります。プログラムを書く際、今扱っているデータが何型なのかを正しく把握することは、エラーを防ぐために非常に重要です。ここでは、実務で頻繁に登場する主要なデータ型と、その型を確認するためのtypeof演算子の結果を、プログラミングが初めての方にも分かりやすく解説します。

初心者向け：データ型を確認するサンプルコード

実際にtypeofを使って、変数の正体を調べてみましょう。例えば、「100」という数値と、「"100"」という文字列は、見た目は似ていますがコンピュータにとっては全く別物として扱われます。

// 数値を代入
let score = 100;
console.log(typeof score);

// 文字列を代入（ダブルクォーテーションで囲むのがルールです）
let userName = "たろう";
console.log(typeof userName);

// 真偽値を代入（判定フラグなどに使います）
let isLoggedIn = true;
console.log(typeof isLoggedIn);

// 変数を作っただけで、何も入れていない場合
let memo;
console.log(typeof memo);

実行結果

上記のコードを実行すると、コンソールには以下のように、それぞれの型名が表示されます。

number
string
boolean
undefined

5. 注意点：typeof演算子が「object」を返すケースと対処法

5. 注意点：typeof演算子が「object」を返すケースと対処法

JavaScriptを学び始めたばかりの方が最も驚くポイントの一つが、「配列を調べても、結果が "object" になってしまう」という現象です。

本来、オブジェクト（連想配列）はデータを「名前」で管理し、配列は「順番」で管理する別物ですが、typeof を使うとどちらも同じ「オブジェクト型」として分類されてしまいます。これはJavaScriptの歴史的な仕様によるものです。

以下のコードで、実際の挙動を確認してみましょう。

// オブジェクト（名前で管理する箱）
const user = {name: "太郎", age: 25};
console.log(typeof user); 

// 配列（順番で管理するリスト）
const colors = ["赤", "青", "緑"];
console.log(typeof colors);

実行結果：

"object"
"object"

このように、typeof だけでは「中身が普通のオブジェクトなのか、それとも配列なのか」を区別することができません。これでは、配列専用の処理（データを追加したり並び替えたりすること）をしたい時に困ってしまいます。

正確に「配列」かどうかを判定する方法

実務で「これは配列かな？」と正確に判定したい場合は、typeof ではなく Array.isArray() という専用の命令を使います。この方法は、2026年現在のモダンな開発現場でも標準的に使われている「正解」の書き方です。

const myData = ["リンゴ", "バナナ"];

if (Array.isArray(myData)) {
  console.log("これは配列です！データの個数は " + myData.length + " 個です。");
} else {
  console.log("これは配列ではありません。");
}

実行結果：

"これは配列です！データの個数は 2 個です。"

初心者のうちは、「データの種類を調べるなら基本は typeof だが、配列だけは Array.isArray() を使う」とセットで覚えておきましょう。これだけで、プログラムが思い通りに動かないというトラブルを大幅に減らすことができます。

6. typeof演算子で「関数（function）」を調べるとどうなる？

6. typeof演算子で「関数（function）」を調べるとどうなる？

JavaScriptにおいて、関数（Function）は非常に重要な役割を持っています。これまでに学んできた数値や文字列と同じように、関数に対してもtypeof演算子を使うことができますが、その結果は少し特別なものになります。

結論から言うと、関数をtypeofで調べると、結果はそのまま「"function"」と返ってきます。これは、その変数が「命令をひとまとめにしたもの（実行可能な処理）」であることを示しています。プログラミング未経験の方でも分かりやすいように、実際に動くコードで確認してみましょう。

// 「こんにちは」と表示させる「関数」を作ります
function sayHello() {
  console.log("こんにちは");
}

// sayHelloという名前の箱（関数）の中身を調べてみます
console.log(typeof sayHello);

上記のコードを実行すると、コンソールには次のように表示されます。

"function"

ここで初心者が間違えやすいポイントは、「関数の名前（sayHello）」を調べるのか、「関数を実行した結果」を調べるのかという点です。もしtypeof sayHello()のように、後ろにカッコ()をつけてしまうと、関数が動いた後の「戻り値（結果）」を調べることになってしまいます。

「この変数には計算式や命令が入っているのかな？」と、中身が関数であることを特定したい場合に、このtypeofでのチェックは非常に便利です。JavaScriptのプログラムが複雑になっても、この基本さえ押さえておけば、データの正体を簡単に見破ることができます。

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

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

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

let data = "100";

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

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

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の知識が不可欠です。

まとめ：明日から使えるチェックリスト

• 基本的な型の確認： typeofを使えば一瞬で文字列か数値か判断できる。
• undefinedのチェック： 変数が定義されているか安全に確認できる。
• nullと配列の罠： どちらも"object"になることを忘れない。
• 関数の判定： "function"として正しく判定される。

JavaScriptを使いこなす第一歩は、データを正しく扱うことです。この記事で学んだtypeof演算子を、ぜひ自分のコードの中で試してみてください。コンソールに色々なデータを入れてconsole.log(typeof ...)を実行してみるだけで、言語への理解がぐっと深まるはずですよ。