JavaScriptのnull/undefinedエラーを防ぐ実践的なチェック方法

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

JavaScriptを書いていて「TypeError: Cannot read property of null」というエラーに遭遇したことはありませんか？

このエラーは、存在しないデータにアクセスしようとしたときに発生します。

今回は、nullやundefinedを適切にチェックする方法について解説します。

エラーが発生する仕組みとは？

このエラーは、値が存在しない状態でプロパティにアクセスしようとすると発生します。

たとえば、以下のようなコードを見てみましょう。

const user = null;
console.log(user.name); // TypeError: Cannot read property 'name' of null

userがnullなのに、その中のnameプロパティを読もうとしています。

存在しないものから何かを取り出そうとしているため、エラーになるのです。

同様のエラーは、以下のような場面でもよく発生します。

APIからのレスポンスが期待と異なるとき。DOM要素が見つからないとき。オブジェクトのネストが深い場合。配列の要素が存在しないとき。

これらの状況では、事前のチェックが重要になります。

nullとundefinedの違い

JavaScriptには「値がない」を表す2つの値があります。

それぞれの特徴を理解しておくことが大切です。

null：意図的に空にした状態

let currentUser = null;
console.log(currentUser);        // null
console.log(typeof currentUser); // "object"

nullは、プログラマーが意図的に「空っぽ」にした状態を表します。

「値をリセットした」「まだ値が決まっていない」といった場面で使われます。

undefined：まだ値が設定されていない状態

let userName;
console.log(userName);        // undefined
console.log(typeof userName); // "undefined"

undefinedは、変数を宣言したけれど値を入れていない状態です。

また、オブジェクトに存在しないプロパティにアクセスしたときも返されます。

基本的なnullチェックの方法

データの存在確認には、いくつかの方法があります。

厳密等価演算子（===）を使う方法

function checkUserInfo(user) {
    if (user === null) {
        console.log('ユーザー情報がnullです');
        return false;
    }

    if (user === undefined) {
        console.log('ユーザー情報が未設定です');
        return false;
    }

    console.log('ユーザー情報があります');
    return true;
}

この方法では、nullとundefinedを個別にチェックできます。

それぞれの状態に応じた処理を分けたい場合に便利です。

等価演算子（==）でまとめてチェック

function hasValue(data) {
    if (data == null) {
        console.log('データがありません');
        return false;
    }

    console.log('データがあります:', data);
    return true;
}

data == nullという書き方で、nullとundefinedを同時にチェックできます。

これはJavaScriptの仕様で、nullとundefinedは互いに等しいとみなされるためです。

最新の構文を使った安全なアクセス方法

ES2020以降では、より簡潔に書ける新しい構文が追加されました。

オプショナルチェーニング（?.）

function displayUserInfo(user) {
    const userName = user?.name ?? '名前なし';
    const userEmail = user?.contact?.email ?? 'メールアドレスなし';

    console.log(`名前: ${userName}`);
    console.log(`メール: ${userEmail}`);
}

// nullでもエラーにならない
displayUserInfo(null);
// 一部のプロパティがなくても大丈夫
displayUserInfo({ name: '田中花子' });

?.を使うと、途中でnullやundefinedがあってもエラーになりません。

プロパティが存在しない場合は、undefinedが返されます。

null合体演算子（??）

function getConfiguration(config) {
    return {
        port: config?.port ?? 3000,
        host: config?.host ?? 'localhost',
        debug: config?.debug ?? false
    };
}

// nullの場合はデフォルト値が使われる
console.log(getConfiguration(null));
// { port: 3000, host: 'localhost', debug: false }

??演算子は、左側がnullまたはundefinedの場合のみ右側の値を返します。

0や空文字は有効な値として扱われるため、||演算子より適切な場合が多いです。

DOM操作での実践的な対処法

Webページの要素を操作する際も、nullチェックは欠かせません。

要素の存在確認

function updateElementText(selector, text) {
    const element = document.querySelector(selector);

    if (element === null) {
        console.warn(`要素が見つかりません: ${selector}`);
        return;
    }

    element.textContent = text;
}

// 使用例
updateElementText('#username', '太郎さん');
updateElementText('#non-existent', 'テスト'); // 警告が出るがエラーにならない

要素が見つからない場合の処理を明確にすることで、予期しないエラーを防げます。

イベントリスナーの安全な追加

function addClickHandler(selector, handler) {
    const element = document.querySelector(selector);

    if (element !== null) {
        element.addEventListener('click', handler);
        return true;
    }

    console.warn(`クリックイベントを追加できません: ${selector}`);
    return false;
}

イベントリスナーを追加する前に、要素の存在を確認します。

これにより、ページの構造が変わってもエラーを回避できます。

フォーム入力値の検証

ユーザーからの入力を扱う際は、特に慎重なチェックが必要です。

基本的な入力チェック

function validateInput(formId, fieldName) {
    const form = document.getElementById(formId);
    if (form === null) {
        console.error('フォームが見つかりません');
        return false;
    }

    const field = form.querySelector(`[name="${fieldName}"]`);
    if (field === null) {
        console.error(`フィールドが見つかりません: ${fieldName}`);
        return false;
    }

    const value = field.value;
    if (value == null || value.trim() === '') {
        console.log('入力値が空です');
        return false;
    }

    return true;
}

フォーム、フィールド、値の各段階でチェックを行います。

エラーメッセージを適切に出力することで、問題の特定が容易になります。

よくある間違いと正しい書き方

null判定でよく見かける間違いを紹介します。

typeofを使ったnullチェックの落とし穴

// 間違った方法
if (typeof value === 'null') {
    // このコードは実行されない
}

// 正しい方法
if (value === null) {
    // nullの場合に実行される
}

typeof nullは"object"を返すという、JavaScriptの有名な仕様があります。

そのため、typeofでnullをチェックすることはできません。

論理否定演算子の使い方

// 0や空文字も除外してしまう
if (!value) {
    console.log('値がありません');
}

// nullとundefinedのみをチェック
if (value == null) {
    console.log('値がnullまたはundefinedです');
}

!valueは、0、空文字、falseなども「偽」として扱います。

意図しない値まで除外しないよう注意が必要です。

まとめ

JavaScriptでnullやundefinedを適切に扱うことは、エラーの少ないコードを書く上で重要です。

基本的なチェック方法から、最新の構文まで様々な手法があります。

状況に応じて適切な方法を選択することが大切です。

特にオプショナルチェーニングとnull合体演算子は、コードを簡潔に保ちながら安全性を高められる優れた機能です。

これらの技術を活用して、堅牢なWebアプリケーションを作っていきましょう。