JavaScriptの「typeof」を5分で完全理解！初心者が陥りがちな7つの罠と解決法

こんにちは、とまだです。

JavaScriptを学習していて、「変数の型がわからなくてエラーになった」「なんでnullがobjectなの？」と混乱したことはありませんか？

実は私も最初、typeof演算子の挙動に振り回されて、何時間もデバッグに費やしたことがあります。プログラミングスクールで教えていた時も、受講生から「typeofの結果が予想と違う」という相談を何度も受けました。

今回は、JavaScriptのtypeof演算子を「荷物の仕分け」に例えながら、初心者が陥りがちな罠とその解決法を、わかりやすく解説していきます。

typeof演算子とは？荷物仕分けで理解する基本概念

JavaScriptのtypeof演算子って、難しく感じますよね。

でも実は、配送センターでの荷物仕分けと同じようなものなんです。

配送センターを想像してみてください。

• さまざまな荷物が運ばれてきます
• それぞれの荷物には種類があります（書類、食品、壊れ物など）
• 種類によって扱い方が変わります

JavaScriptのtypeofも同じです。

// 荷物（値）の種類を確認
console.log(typeof "こんにちは");     // "string" （文字列）
console.log(typeof 42);                // "number" （数値）
console.log(typeof true);              // "boolean"（真偽値）

ここで、typeofが仕分け係、右側の値が荷物、返される文字列（"string"など）が荷物の種類ラベルにあたります。

なぜtypeofが必要なのか

「変数の型なんて、見ればわかるじゃない？」

そう思うかもしれません。

でも実際の開発では、こんな場面に遭遇します。

// APIから受け取ったデータ（中身がわからない）
let userData = fetchUserData();

// userDataは数値？文字列？オブジェクト？
// 型によって処理を変える必要がある

例えば、ユーザーの年齢を処理する場合を考えてみましょう。

typeofを使わない場合：

function calculateAge(birthYear) {
  // birthYearが文字列だったら...？
  return 2025 - birthYear;  // "2025" - "1990" = 35（たまたま動く）
  // でも "2025" - "abc" = NaN（壊れる！）
}

typeofを使う場合：

function calculateAge(birthYear) {
  if (typeof birthYear === "number") {
    return 2025 - birthYear;
  } else if (typeof birthYear === "string") {
    // 文字列なら数値に変換してから計算
    return 2025 - parseInt(birthYear);
  } else {
    return "無効な入力です";
  }
}

安全で確実な処理ができるようになりました！

typeofの基本的な使い方と返される7つの型

typeof演算子は、7種類の文字列のいずれかを返します。

1. "string" - 文字列型

console.log(typeof "Hello");           // "string"
console.log(typeof 'JavaScript');      // "string"
console.log(typeof `テンプレート`);    // "string"
console.log(typeof "123");             // "string" （数字でも""で囲めば文字列）

文字列は引用符（シングル、ダブル、バッククォート）で囲まれた値です。

2. "number" - 数値型

console.log(typeof 42);                // "number"
console.log(typeof 3.14);              // "number"
console.log(typeof -100);              // "number"
console.log(typeof NaN);               // "number" （要注意！）
console.log(typeof Infinity);          // "number"

整数も小数も、JavaScriptではすべて"number"として扱われます。

3. "boolean" - 真偽値型

console.log(typeof true);              // "boolean"
console.log(typeof false);             // "boolean"
console.log(typeof (1 > 2));           // "boolean" （比較の結果）

true（真）かfalse（偽）の2つの値のみを持ちます。

4. "undefined" - 未定義型

let x;
console.log(typeof x);                 // "undefined"
console.log(typeof undefined);         // "undefined"
console.log(typeof notDeclared);       // "undefined" （宣言されていない変数も）

値が設定されていない変数は"undefined"になります。

5. "object" - オブジェクト型

console.log(typeof {name: "田中"});    // "object"
console.log(typeof [1, 2, 3]);         // "object" （配列も！）
console.log(typeof new Date());        // "object"
console.log(typeof null);              // "object" （バグだけど仕様...）

オブジェクト、配列、日付など、複雑なデータ構造は"object"になります。

6. "function" - 関数型

console.log(typeof function() {});     // "function"
console.log(typeof Math.max);          // "function"
console.log(typeof (() => {}));        // "function" （アロー関数も）

関数は特別扱いされ、"function"という独自の型を返します。

7. "symbol" - シンボル型

console.log(typeof Symbol());          // "symbol"
console.log(typeof Symbol("id"));      // "symbol"

ES6で追加された、一意の識別子を作るための型です。

初心者が陥りがちな7つの罠と解決法

罠1: nullが"object"として判定される

これはJavaScriptの有名なバグです。

console.log(typeof null);  // "object" （えっ？）

解決法：

// nullチェックは厳密等価演算子を使う
function checkNull(value) {
  if (value === null) {
    return "これはnullです";
  } else if (typeof value === "object") {
    return "これは本当のオブジェクトです";
  }
}

罠2: 配列が"object"として判定される

配列も"object"と判定されるため、区別ができません。

console.log(typeof [1, 2, 3]);  // "object"
console.log(typeof {a: 1});     // "object" （同じ...）

解決法：

// Array.isArray()を使う
function checkArray(value) {
  if (Array.isArray(value)) {
    return "これは配列です";
  } else if (typeof value === "object" && value !== null) {
    return "これはオブジェクトです";
  }
}

罠3: NaNが"number"として判定される

「数値じゃない」という意味なのに"number"...。

console.log(typeof NaN);  // "number" （Not a Numberなのに...）

解決法：

// Number.isNaN()を使う
function checkNumber(value) {
  if (typeof value === "number") {
    if (Number.isNaN(value)) {
      return "これはNaNです";
    } else {
      return "これは正常な数値です";
    }
  }
}

罠4: 未宣言の変数もundefinedになる

宣言していない変数も"undefined"と判定されます。

console.log(typeof undeclaredVariable);  // "undefined" （エラーにならない）

解決法：

// try-catchと組み合わせる
function checkVariable(varName) {
  try {
    // 実際に変数を参照してみる
    eval(varName);
    return `${varName}は存在します`;
  } catch (e) {
    return `${varName}は宣言されていません`;
  }
}

罠5: newで作ったプリミティブ型がobjectになる

コンストラクタで作ると型が変わってしまいます。

console.log(typeof "hello");           // "string"
console.log(typeof new String("hello"));  // "object" （！？）

解決法：

// プリミティブ型のコンストラクタは使わない
// 使う必要がある場合は.valueOf()で値を取り出す
let str = new String("hello");
console.log(typeof str.valueOf());  // "string"

罠6: 関数も実はobjectの一種

関数は"function"を返しますが、実はオブジェクトです。

function myFunc() {}
console.log(typeof myFunc);           // "function"
console.log(myFunc instanceof Object);  // true（オブジェクトでもある）

解決法：

// 用途に応じて判定方法を使い分ける
function checkType(value) {
  if (typeof value === "function") {
    return "実行可能な関数です";
  } else if (typeof value === "object") {
    return "通常のオブジェクトです";
  }
}

罠7: typeofの結果は必ず小文字

返される文字列はすべて小文字です。

// よくある間違い
if (typeof value === "String") {  // ❌ 大文字はダメ
  // この中は実行されない
}

// 正しい書き方
if (typeof value === "string") {  // ✅ 小文字で
  // 正しく動作する
}

実践的な使用例：フォーム入力のバリデーション

実際の開発でtypeofを使う例を見てみましょう。

// ユーザー入力を安全に処理する関数
function validateUserInput(input) {
  // まず型をチェック
  const inputType = typeof input;
  
  // 型に応じた処理
  switch (inputType) {
    case "string":
      // 文字列の場合：空文字チェック
      if (input.trim() === "") {
        return { valid: false, message: "入力が空です" };
      }
      return { valid: true, value: input.trim() };
      
    case "number":
      // 数値の場合：NaNと範囲チェック
      if (Number.isNaN(input)) {
        return { valid: false, message: "無効な数値です" };
      }
      if (input < 0 || input > 100) {
        return { valid: false, message: "0〜100の範囲で入力してください" };
      }
      return { valid: true, value: input };
      
    case "boolean":
      // 真偽値の場合：そのまま返す
      return { valid: true, value: input };
      
    case "undefined":
      // 未定義の場合：エラー
      return { valid: false, message: "入力がありません" };
      
    default:
      // その他の型：エラー
      return { valid: false, message: "サポートされていない入力形式です" };
  }
}

// 使用例
console.log(validateUserInput("田中太郎"));  // { valid: true, value: "田中太郎" }
console.log(validateUserInput(25));          // { valid: true, value: 25 }
console.log(validateUserInput(""));          // { valid: false, message: "入力が空です" }
console.log(validateUserInput(NaN));         // { valid: false, message: "無効な数値です" }

このように、typeofを使うことで、さまざまな入力に対して適切な処理を行えます。

まとめ：typeofマスターへの第一歩

JavaScriptのtypeof演算子について、理解は深まりましたか？

今回学んだポイントをまとめると：

1. typeofは値の型を文字列で返す演算子
2. 返される型は7種類（string, number, boolean, undefined, object, function, symbol）
3. nullやNaNなど、直感に反する挙動がある
4. 配列の判定には**Array.isArray()**を併用
5. 実際の開発では型チェックで安全なコードを書ける

typeofは一見シンプルですが、JavaScriptの型システムを理解する上で重要な概念です。

もしJavaScriptの基礎からしっかり学びたい方は、Learning NextのJavaScriptカリキュラムがおすすめです。エラー処理やDOM操作など、実践的な内容を体系的に学べます。月額2,000円程度で、JavaScriptだけでなくTypeScriptやReactなども学び放題なので、コスパも抜群ですよ。

プログラミング学習で大切なのは、一つ一つの概念を確実に理解していくこと。typeofをマスターしたあなたは、また一歩JavaScriptマスターに近づきました！

次はJavaScriptのエラー解決ガイドも読んでみてください。typeofを使ったエラー回避のテクニックも紹介しています。