JavaScriptのtypeofとは？型を調べる方法を初心者向けに解説

「JavaScriptで変数の型を調べたい」と思ったことはありませんか？

「この値って文字列？数値？」 「typeof演算子って何？」 「どうやって使うの？」

そんな疑問を抱いている方は多いと思います。 でも大丈夫です！

この記事では、JavaScriptのtypeof演算子について初心者向けに詳しく解説します。 基本的な使い方から実践的な型判定まで、データ型を正確に調べる方法をわかりやすく説明していきます。

きっと「型判定ってこんなに便利だったんだ！」と感じられるはずですよ。

typeof演算子って何？基本を理解しよう

typeof演算子の役割を覚えよう

typeof演算子は、変数や値のデータ型を調べるためのJavaScriptの演算子です。

簡単に言うと、「この値は文字列？数値？オブジェクト？」といった疑問に答えてくれる便利な機能なんです。 プログラムの動作を制御したり、エラーを防いだりするために頻繁に使用されます。

基本的な書き方を覚えよう

typeof演算子の使い方は非常にシンプルです。

// 基本的な使い方
typeof 値
typeof(値)  // 括弧を使っても同じ

// 例
console.log(typeof 123);        // "number"
console.log(typeof "hello");    // "string"
console.log(typeof true);       // "boolean"

どちらの書き方でも同じ結果が得られます。 ただし、括弧なしの方が一般的ですね。

戻り値は必ず文字列として返されます。

JavaScriptの基本データ型を確認しよう

プリミティブ型をチェックしてみよう

JavaScriptには以下のプリミティブ（基本）型があります。

// 数値型 (number)
console.log(typeof 42);         // "number"
console.log(typeof 3.14);       // "number"
console.log(typeof -100);       // "number"

// 文字列型 (string)
console.log(typeof "hello");     // "string"
console.log(typeof 'world');     // "string"
console.log(typeof `template`);  // "string"

// 真偽値型 (boolean)
console.log(typeof true);        // "boolean"
console.log(typeof false);       // "boolean"

// undefined型
console.log(typeof undefined);   // "undefined"

// null型（注意：特殊なケース）
console.log(typeof null);        // "object" (これは仕様上の問題)

// シンボル型 (ES6以降)
console.log(typeof Symbol('id')); // "symbol"

// BigInt型 (ES2020以降)
console.log(typeof 123n);        // "bigint"

ここで重要なのは、nullが"object"として返されることです。 これはJavaScriptの仕様上の問題なので、覚えておきましょう。

オブジェクト型も見てみよう

プリミティブ型以外はすべてオブジェクト型です。

// オブジェクト
console.log(typeof {});          // "object"
console.log(typeof {name: "太郎"}); // "object"

// 配列
console.log(typeof []);          // "object"
console.log(typeof [1, 2, 3]);  // "object"

// 関数
console.log(typeof function(){}); // "function"

// Date
console.log(typeof new Date());  // "object"

// 正規表現
console.log(typeof /pattern/);   // "object"

注意すべきは、配列も"object"として返されることです。 配列かどうかを正確に判定するには、別の方法が必要になります。

実践的な使用例を学ぼう

変数の型チェック機能を作ろう

変数のデータ型をチェックして処理を分岐する例を見てみましょう。

function processValue(value) {
    if (typeof value === "string") {
        console.log("文字列です: " + value);
    } else if (typeof value === "number") {
        console.log("数値です: " + value);
    } else if (typeof value === "boolean") {
        console.log("真偽値です: " + value);
    } else {
        console.log("その他の型です");
    }
}

processValue("hello");    // 文字列です: hello
processValue(42);         // 数値です: 42
processValue(true);       // 真偽値です: true
processValue({});         // その他の型です

この関数では、typeof演算子の結果に基づいて適切な処理を選択しています。 型に応じた処理の分岐が簡単にできますね。

関数の引数検証をしてみよう

関数の引数が期待する型かどうかを検証する例を作ってみましょう。

function calculateArea(width, height) {
    // 引数の型チェック
    if (typeof width !== "number" || typeof height !== "number") {
        throw new Error("幅と高さは数値である必要があります");
    }
    
    if (width <= 0 || height <= 0) {
        throw new Error("幅と高さは正の数である必要があります");
    }
    
    return width * height;
}

try {
    console.log(calculateArea(5, 3));     // 15
    console.log(calculateArea("5", 3));   // エラー
} catch (error) {
    console.log(error.message);
}

型チェックを事前に行うことで、予期しないエラーを防げます。

安全なプロパティアクセス機能も作れます。

function getSafeProperty(obj, prop) {
    if (typeof obj !== "object" || obj === null) {
        return undefined;
    }
    
    return obj[prop];
}

let user = { name: "田中", age: 25 };
console.log(getSafeProperty(user, "name"));     // 田中
console.log(getSafeProperty(null, "name"));     // undefined
console.log(getSafeProperty("string", "name")); // undefined

オブジェクトでない値に対してもエラーが発生しないよう、安全にアクセスできます。

typeof演算子の注意点を理解しよう

nullの特殊なケースを覚えよう

nullのtypeofは予期しない結果を返します。

console.log(typeof null);  // "object" (本来は"null"であるべき)

// nullを正確に判定する方法
function isNull(value) {
    return value === null;
}

// nullとオブジェクトを区別する方法
function getType(value) {
    if (value === null) {
        return "null";
    }
    return typeof value;
}

console.log(getType(null));     // "null"
console.log(getType({}));       // "object"

null値を正確に判定するには、=== nullを使った比較が必要です。

配列の判定に注意しよう

配列もオブジェクトとして判定されます。

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

// 配列を正確に判定する方法
console.log(Array.isArray([]));        // true
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({}));        // false

配列かどうかを調べるには、Array.isArray()メソッドを使いましょう。

より汎用的な型判定関数も作れます。

function getExactType(value) {
    if (value === null) return "null";
    if (Array.isArray(value)) return "array";
    return typeof value;
}

console.log(getExactType([]));    // "array"
console.log(getExactType({}));    // "object"
console.log(getExactType(null));  // "null"

この関数を使うことで、より正確な型判定ができます。

NaNの判定も知っておこう

NaN（Not a Number）も数値型として判定されます。

console.log(typeof NaN);       // "number"

// NaNを正確に判定する方法
console.log(isNaN(NaN));       // true
console.log(Number.isNaN(NaN)); // true（より厳密）

// 有効な数値かどうかを判定する関数
function isValidNumber(value) {
    return typeof value === "number" && !isNaN(value) && isFinite(value);
}

console.log(isValidNumber(42));        // true
console.log(isValidNumber(NaN));       // false
console.log(isValidNumber(Infinity));  // false

有効な数値を判定するには、typeofだけでなく追加のチェックが必要です。

高度な型判定テクニックを身につけよう

より詳細な型判定機能を作ろう

Object.prototype.toStringを使用したより詳細な型判定を見てみましょう。

function getDetailedType(value) {
    // プリミティブ型はtypeofで十分
    if (value === null) return "null";
    if (typeof value !== "object") return typeof value;
    
    // オブジェクト型はtoStringで詳細に判定
    let objectType = Object.prototype.toString.call(value);
    return objectType.slice(8, -1).toLowerCase();
}

console.log(getDetailedType([]));           // "array"
console.log(getDetailedType({}));           // "object"
console.log(getDetailedType(new Date()));   // "date"
console.log(getDetailedType(/pattern/));    // "regexp"
console.log(getDetailedType(new Map()));    // "map"
console.log(getDetailedType(new Set()));    // "set"

この方法を使うと、オブジェクトの種類もより詳しく判定できます。

カスタム型判定関数を作ろう

よく使用する型判定を関数化してみましょう。

// 型判定のユーティリティ関数
const TypeChecker = {
    isString: (value) => typeof value === "string",
    isNumber: (value) => typeof value === "number" && !isNaN(value),
    isBoolean: (value) => typeof value === "boolean",
    isFunction: (value) => typeof value === "function",
    isObject: (value) => typeof value === "object" && value !== null && !Array.isArray(value),
    isArray: (value) => Array.isArray(value),
    isNull: (value) => value === null,
    isUndefined: (value) => typeof value === "undefined",
    isEmpty: (value) => value === null || typeof value === "undefined" || value === ""
};

// 使用例
console.log(TypeChecker.isString("hello"));   // true
console.log(TypeChecker.isNumber(42));        // true
console.log(TypeChecker.isArray([1, 2, 3]));  // true
console.log(TypeChecker.isEmpty(""));         // true

このオブジェクトを使うことで、より読みやすく安全な型判定ができます。

実用的な応用例を学ぼう

API応答の型検証機能を作ろう

APIから取得したデータの型を検証する例を見てみましょう。

function validateApiResponse(data) {
    let errors = [];
    
    // データ全体のチェック
    if (typeof data !== "object" || data === null) {
        errors.push("データがオブジェクトではありません");
        return errors;
    }
    
    // 必須フィールドのチェック
    if (typeof data.id !== "number") {
        errors.push("idは数値である必要があります");
    }
    
    if (typeof data.name !== "string") {
        errors.push("nameは文字列である必要があります");
    }
    
    if (typeof data.email !== "string") {
        errors.push("emailは文字列である必要があります");
    }
    
    // オプショナルフィールドのチェック
    if (data.age !== undefined && typeof data.age !== "number") {
        errors.push("ageは数値である必要があります");
    }
    
    return errors;
}

この関数では、データの型を一つずつ検証しています。

使用例も見てみましょう。

let apiData = {
    id: 1,
    name: "田中太郎",
    email: "tanaka@example.com",
    age: "25"  // 間違った型
};

let validationErrors = validateApiResponse(apiData);
if (validationErrors.length > 0) {
    console.log("検証エラー:");
    validationErrors.forEach(error => console.log("- " + error));
}

型が期待されるものと違う場合、エラーメッセージが表示されます。

動的な関数実行機能を実装しよう

型に応じて異なる処理を実行する例を作ってみましょう。

function processData(data) {
    switch (typeof data) {
        case "string":
            return data.toUpperCase();
        
        case "number":
            return data * 2;
        
        case "boolean":
            return data ? "真" : "偽";
        
        case "object":
            if (data === null) {
                return "null値です";
            }
            if (Array.isArray(data)) {
                return `配列: ${data.length}個の要素`;
            }
            return `オブジェクト: ${Object.keys(data).length}個のプロパティ`;
        
        case "function":
            return "関数です";
        
        case "undefined":
            return "未定義です";
        
        default:
            return "不明な型です";
    }
}

使用例はこんな感じです。

console.log(processData("hello"));        // "HELLO"
console.log(processData(21));             // 42
console.log(processData(true));           // "真"
console.log(processData([1, 2, 3]));      // "配列: 3個の要素"
console.log(processData({a: 1, b: 2}));   // "オブジェクト: 2個のプロパティ"

型に応じて適切な処理を選択できるのがわかりますね。

設定値の型安全な処理機能

設定オブジェクトの値を型安全に処理する例も見てみましょう。

function applyConfig(config, defaults) {
    let result = {};
    
    for (let key in defaults) {
        let defaultValue = defaults[key];
        let configValue = config[key];
        
        // 設定値が存在し、かつ同じ型の場合のみ適用
        if (configValue !== undefined && 
            typeof configValue === typeof defaultValue) {
            result[key] = configValue;
        } else {
            result[key] = defaultValue;
            
            // 型が一致しない場合の警告
            if (configValue !== undefined) {
                console.warn(`設定項目'${key}'の型が正しくありません。デフォルト値を使用します。`);
            }
        }
    }
    
    return result;
}

実際に使ってみるとこんな感じです。

let defaults = {
    theme: "light",
    fontSize: 14,
    autoSave: true,
    maxItems: 100
};

let userConfig = {
    theme: "dark",
    fontSize: "large",  // 間違った型
    autoSave: false,
    timeout: 5000       // 未定義のプロパティ
};

let finalConfig = applyConfig(userConfig, defaults);
console.log(finalConfig);
// { theme: "dark", fontSize: 14, autoSave: false, maxItems: 100 }

型が一致しない設定値は無視され、デフォルト値が使用されます。

よくある間違いとその対策

indexOf()の戻り値の扱いに注意

よくある間違いとして、typeof演算子の結果を間違って使ってしまうことがあります。

// 間違った例
function badTypeCheck(value) {
    if (typeof value) { // 間違い！常にtrueになる
        console.log("値があります");
    } else {
        console.log("値がありません");
    }
}

// 正しい例
function correctTypeCheck(value) {
    if (typeof value !== "undefined") { // 正しい！
        console.log("値があります");
    } else {
        console.log("値がありません");
    }
}

typeof演算子の結果は文字列なので、適切に比較することが重要です。

大文字小文字の考慮不足

型名は必ず小文字で返されることに注意しましょう。

// 間違った例
function wrongTypeCheck(value) {
    if (typeof value === "String") { // 間違い！大文字
        return "文字列です";
    }
    return "文字列ではありません";
}

// 正しい例
function correctTypeCheck(value) {
    if (typeof value === "string") { // 正しい！小文字
        return "文字列です";
    }
    return "文字列ではありません";
}

型名は常に小文字で比較するようにしましょう。

パフォーマンスの問題

大量のデータを扱う時は、パフォーマンスにも注意が必要です。

// 非効率な例
function inefficientTypeFilter(items) {
    let numbers = [];
    let strings = [];
    
    // 毎回typeof演算子を実行（非効率）
    items.forEach(item => {
        if (typeof item === "number") {
            numbers.push(item);
        }
        if (typeof item === "string") {
            strings.push(item);
        }
    });
    
    return { numbers, strings };
}

// 効率化された例
function efficientTypeFilter(items) {
    let numbers = [];
    let strings = [];
    
    // 一度だけ型をチェックして振り分け
    items.forEach(item => {
        let type = typeof item;
        if (type === "number") {
            numbers.push(item);
        } else if (type === "string") {
            strings.push(item);
        }
    });
    
    return { numbers, strings };
}

typeof演算子の結果を変数に保存することで、パフォーマンスを改善できます。

まとめ

JavaScriptのtypeof演算子について詳しく解説しました。

基本的なポイントをおさらい

typeof演算子の重要な特徴を確認しましょう。

• typeof演算子はデータ型を文字列で返す
• nullは"object"として返される特殊なケース
• 配列も"object"として返される
• 型に応じた処理の分岐が可能

これらの特徴を理解することが重要です。

実践的な活用法を身につけよう

以下のような場面で活用できます。

• 関数の引数検証: 期待する型かチェック
• API応答の検証: データの整合性確認
• 設定値の処理: 型安全な設定管理
• 動的な処理分岐: 型に応じた適切な処理

注意すべきポイントを確認

typeof演算子を使う際の注意点も覚えておきましょう。

• null値は別途チェックが必要
• 配列判定にはArray.isArray()を使用
• NaN判定には追加のチェックが必要
• 型名は常に小文字で比較

適切なtypeof演算子の使用により、より安全で保守しやすいJavaScriptアプリケーションが作れるようになります。

まずは基本的な使い方から始めて、徐々に高度なテクニックも取り入れてみてください。 ぜひ今日から、これらの知識を活用してより良い型判定機能を実装してみませんか？