JavaScriptの空文字判定、実は奥が深い話

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

フォームが空っぽなのに送信されてしまう。

そんな困った経験、ありませんか？

今回は現役のエンジニアとして、JavaScriptの空文字判定について解説します。

空文字判定には5つのパターンがある

JavaScriptで「空」を表す状態は、実は5つもあります。

冷蔵庫に例えると分かりやすいでしょう。

まず、完全に空っぽの状態。 これが空文字 "" です。

次に、冷蔵庫自体がない状態。 これが null です。

そして、まだ買い物に行っていない状態。 これが undefined です。

さらに、スペーサーだけ入っている状態。 これがスペースのみ " " です。

最後に、ちゃんと食材がある状態。 これが有効な内容 "鶏肉" です。

なぜ単純な比較では不十分なのか

多くの人が最初に書くコードはこれです。

const userInput = "";
if (userInput === "") {
    console.log("空っぽです");
}

しかし、これだけでは不十分です。

なぜなら、null や undefined、スペースだけの入力を見逃してしまうからです。

実践的な空文字判定の方法

基本の三段構えチェック

まず、null と undefined をチェックします。

次に、文字列かどうかを確認します。

最後に、長さが0かどうかを判定します。

function isEmpty(value) {
    // null と undefined をチェック
    if (value == null) {
        return true;
    }

    // 文字列以外は除外
    if (typeof value !== 'string') {
        return false;
    }

    // 長さが0なら空文字
    return value.length === 0;
}

この関数を使うと、様々なケースに対応できます。

console.log(isEmpty(""));        // true
console.log(isEmpty(null));      // true
console.log(isEmpty(undefined)); // true
console.log(isEmpty("Hello"));   // false

スペースだけの入力も空として扱う

ユーザーがスペースだけ入力することもあります。

これは見た目には何かあるように見えます。

でも、実際には無意味な入力です。

function isBlank(value) {
    // null・undefinedチェック
    if (value == null) {
        return true;
    }

    // 文字列に変換してtrimで判定
    return String(value).trim() === '';
}

trim() メソッドは前後の空白を削除します。

これにより、スペースだけの入力も空と判定できます。

console.log(isBlank(""));         // true
console.log(isBlank("   "));      // true
console.log(isBlank("　"));       // true（全角スペース）
console.log(isBlank(" a "));      // false

短く書きたい場合のワンライナー

const isEmpty = (value) => !value || !value.toString().trim();

このワンライナーは論理演算子を活用しています。

ただし、0や false も空と判定してしまいます。

要件に応じて使い分けが必要です。

console.log(isEmpty(""));         // true
console.log(isEmpty(null));       // true
console.log(isEmpty(undefined));  // true
console.log(isEmpty("   "));      // true
console.log(isEmpty(0));          // true (数値の0も空とみなす)
console.log(isEmpty("Hello"));    // false

型に厳密な判定方法

文字列型のみを対象にしたい場合はこちらです。

function isEmptyString(value) {
    // 文字列型のみを対象とする
    if (typeof value !== 'string') {
        return false;
    }

    // トリムして長さをチェック
    return value.trim().length === 0;
}

この方法は型に厳密です。

予期しない結果を避けられます。

console.log(isEmptyString(""));       // true
console.log(isEmptyString("   "));    // true
console.log(isEmptyString(null));     // false（文字列ではない）
console.log(isEmptyString(0));        // false（文字列ではない）

実務でよく使う汎用的な関数

function isNullOrEmpty(value) {
    return value == null || String(value).trim() === '';
}

function hasValue(value) {
    return !isNullOrEmpty(value);
}

この hasValue 関数は直感的です。

「値があるかどうか」という発想で書けます。

console.log(hasValue(""));          // false
console.log(hasValue("   "));       // false
console.log(hasValue(null));        // false
console.log(hasValue(undefined));   // false
console.log(hasValue("Hello"));     // true
console.log(hasValue("0"));         // true（文字列の"0"は有効）

フォームバリデーションでの活用

実際にフォームで使ってみましょう。

document.getElementById('userForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;

    // 空文字チェック
    if (isNullOrEmpty(name)) {
        alert('お名前を入力してください');
        return;
    }

    if (isNullOrEmpty(email)) {
        alert('メールアドレスを入力してください');
        return;
    }

    // 送信処理
    console.log('送信OK:', { name, email });
});

function isNullOrEmpty(value) {
    return value == null || String(value).trim() === '';
}

スペースだけの入力もしっかりキャッチできます。

全角スペースにも対応しています。

APIレスポンスでの活用

外部APIからデータを取得する際も空文字判定は重要です。

async function fetchUserProfile(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();

        // ユーザー名のチェック
        if (isNullOrEmpty(userData.name)) {
            return {
                ...userData,
                name: '名前未設定' // デフォルト値
            };
        }

        return userData;
    } catch (error) {
        console.error('ユーザー情報の取得に失敗:', error);
        return null;
    }
}

function isNullOrEmpty(value) {
    return value == null || String(value).trim() === '';
}

APIから空のデータが返ってきても対応できます。

適切なデフォルト値を設定することで、エラーを防げます。

よくある落とし穴

数値の0と文字列の"0"の違い

console.log(isNullOrEmpty(0));    // true（数値の0）
console.log(isNullOrEmpty("0"));  // false（文字列の"0"）

数値の0は空として扱われることがあります。

文字列の"0"は有効な値です。

要件によって使い分けが必要です。

配列やオブジェクトの扱い

console.log(isNullOrEmpty([]));   // false（空配列）
console.log(isNullOrEmpty({}));   // false（空オブジェクト）

配列やオブジェクトは別の判定が必要です。

専用の関数を作ることをおすすめします。

特殊な空白文字への注意

const specialSpace = '\u200B'; // ゼロ幅スペース
console.log(specialSpace.trim()); // 削除されない場合がある

国際化対応が必要な場合は注意が必要です。

より厳密なバリデーションを検討しましょう。

動作確認のためのテスト

function testIsNullOrEmpty() {
    const testCases = [
        { input: "", expected: true, description: "空文字" },
        { input: "   ", expected: true, description: "スペースのみ" },
        { input: null, expected: true, description: "null" },
        { input: undefined, expected: true, description: "undefined" },
        { input: "Hello", expected: false, description: "通常の文字列" },
        { input: "0", expected: false, description: "文字列の0" },
        { input: 0, expected: true, description: "数値の0" }
    ];

    testCases.forEach(({ input, expected, description }) => {
        const result = isNullOrEmpty(input);
        const status = result === expected ? "✅" : "❌";
        console.log(`${status} ${description}: ${result}`);
    });
}

function isNullOrEmpty(value) {
    return value == null || String(value).trim() === '';
}

// テスト実行
testIsNullOrEmpty();

テストで様々なケースを確認しましょう。

想定外のケースを事前に見つけられます。

まとめ

JavaScriptの空文字判定は意外と複雑です。

""、null、undefined、スペースなど、様々なパターンがあります。

trim() を使えばスペースだけの入力も対応できます。

実務では isNullOrEmpty 関数が便利です。

1つの関数ですべてのケースに対応できます。

数値の0や配列・オブジェクトの扱いには注意しましょう。

要件に応じて使い分けることが大切です。

もしJavaScriptをもっと体系的に学びたい方は、Learning Next SchoolのJavaScriptコースがおすすめです。