【JavaScript】typeof演算子による確実なデータ型判定と実行時エラーを回避する実装手法

2026年1月29日

概要

JavaScriptは動的型付け言語であり、変数に代入されるデータの型が実行時に変化することがあります。予期しない型によるエラーを防ぐためには、現在の値がどのデータ型に属しているかを正しく判定する必要があります。本記事では、typeof 演算子の基本的な使い方から、特有の挙動を含めた実戦的な型チェックの方法について解説します。

仕様（入出力）

基本構文

構文	意味
`typeof operand`	オペランド（値や変数）のデータ型を判定し、その結果を小文字の文字列として返します。

データ型と判定結果の対応

データ型	typeofの結果	データの例
Undefined	`"undefined"`	`undefined`
Null	`"object"`	`null`（歴史的経緯による挙動）
Boolean	`"boolean"`	`true`, `false`
String	`"string"`	`"system_log"`, `'error'`
Symbol	`"symbol"`	`Symbol('id')`
Number	`"number"`	`1024`, `NaN`
Object	`"object"`	`{ level: 1 }`, `[10, 20]`
関数	`"function"`	`function(){}`, `class {}`

基本の使い方

typeof の直後に判定したい値または変数を記述します。括弧を用いて typeof(値) と記述することも可能ですが、演算子であるため括弧なしの記述が一般的です。戻り値は常に文字列であるため、条件文（if 文等）で型を比較する際に利用します。

コード全文（HTML / JAVASCRIPT）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>System Log Inspector</title>
</head>
<body>
    <div id="inspector-app">
        <h2>システムログ・アナライザー</h2>
        <div id="result-display">
            <p>解析待機中...</p>
        </div>
        <hr>
        <button id="btn-analyze">サンプルデータを解析</button>
    </div>
    <script type="module" src="main.js"></script>
</body>
</html>

JavaScript

/**
 * ログ監査システムの型判定モジュール
 * 担当者: admin_operator
 */

/**
 * 受け取ったデータの型を詳細に解析して表示する
 * @param {any} target - 判定対象のデータ
 */
const inspectDataType = (target) => {
  const typeResult = typeof target;
  
  // 基本的な型情報の取得
  console.log(`Value: ${target} | Type: ${typeResult}`);
  
  return typeResult;
};

const display = document.getElementById('result-display');
const analyzeBtn = document.getElementById('btn-analyze');

/** 解析結果をUIに反映する */
const runAudit = () => {
  // 多彩なデータ型を含むサンプルセット
  const samplePayloads = [
    true,                   // boolean
    404,                    // number
    "access_denied",        // string
    null,                   // object (caution)
    undefined,              // undefined
    Symbol('unique_key'),   // symbol
    [100, 200, 300],        // object (array)
    { code: "A1", msg: "OK" }, // object
    () => "action",         // function
    class Logger {}         // function
  ];

  display.innerHTML = "";
  
  samplePayloads.forEach(data => {
    const type = inspectDataType(data);
    const p = document.createElement('p');
    
    // 表示用の整形処理
    let displayValue = String(data);
    if (type === 'symbol') displayValue = "Symbol(...)";
    if (type === 'object' && data !== null) displayValue = JSON.stringify(data);
    
    p.textContent = `解析結果: [${displayValue}] は ${type} 型です`;
    display.appendChild(p);
  });
};

analyzeBtn.addEventListener('click', runAudit);

カスタムポイント

配列と純粋なオブジェクトを区別したい場合は、typeof に加えて Array.isArray(target) を組み合わせた判定ロジックに変更してください。
数値判定において、NaN（Not a Number）も "number" と判定されるため、厳密な数値チェックが必要な場合は Number.isFinite() 等の併用を提案します。

注意点

null の判定結果が "object" になる点は JavaScript の有名な仕様（不具合に近い挙動）です。値が null かどうかを調べる際は、typeof ではなく target === null と直接比較してください。
配列（Array）も "object" と返されます。リスト構造かどうかを判別する目的で typeof を使用するのは避けるべきです。
クラス定義（class）は内部的に関数として扱われるため、結果は "function" となります。

応用

typeof を利用して、引数の型に応じた処理の多重定義（オーバーロード）を模倣する例です。

/**
 * ログメッセージを整形する
 * @param {string|number|Object} input 
 */
const formatLog = (input) => {
  const inputType = typeof input;

  if (inputType === "string") {
    return `[TEXT] ${input}`;
  } 
  
  if (inputType === "number") {
    return `[CODE] #${input.toString().padStart(4, '0')}`;
  }

  if (inputType === "object" && input !== null) {
    return `[DATA] ${JSON.stringify(input)}`;
  }

  return "[UNKNOWN] Invalid input";
};

console.log(formatLog("System start"));
console.log(formatLog(404));
console.log(formatLog({ event: "login" }));

まとめ

typeof 演算子は、JavaScriptの原始的なデータ型を迅速に特定するための最も基本的な手段です。文字列、数値、真偽値といったプリミティブ型の判別には非常に有効ですが、null や Array のように "object" として返される例外的な挙動には細心の注意を払う必要があります。開発においてはこれらの特性を正しく理解し、必要に応じてより詳細な判定メソッドと組み合わせることで、実行時の型不整合によるクラッシュを防ぎ、堅牢なアプリケーション構造を維持することが可能になります。

よかったらシェアしてね！