JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのTypeError：「'undefined' is not an object」エラーの原因と対処法

「TypeError: 'undefined' is not an object」というエラーは、値が undefined（未定義）のオブジェクトに対して、プロパティへのアクセスやメソッドの呼び出しを行った場合に発生します。

このエラーメッセージが表示されるのは Safari ブラウザのみという点に注意が必要です。Chrome や Firefox などのブラウザでは、同じ状況でも「Cannot read properties of undefined (reading 'xxx')」のような、少し異なる文言でエラーが出力されます。そのため、Safari でのみ発生するバグとして報告されることも多くあります。

エラーが発生する仕組み

たとえば、宣言だけで初期化されていない変数（値が undefined の状態）に対して .name のようなプロパティを読み取ろうとすると、JavaScript のエンジンはオブジェクトではないものからプロパティを取得できず、このエラーをスローします。

サンプルコード

以下は、「TypeError: 'undefined' is not an object」エラーを意図的に発生させ、try...catch 文で捕捉して画面に表示する JavaScript の例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>TypeError: 'undefined' is not an object の例</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、person オブジェクトの name プロパティにアクセスします</h3>
<script>
    var resEle = document.querySelector('.result');
    var BtnEle = document.querySelector('.Btn');
    var person;
    BtnEle.addEventListener('click', function(){
        try{
            alert(person.name);
        }
        catch(err){
            resEle.innerHTML = err;
        }
    });
</script>
</body>
</html>

コードのポイント

  • var person; によって変数 person を宣言していますが、値を代入していないため、この時点では undefined です。
  • ボタンをクリックすると alert(person.name) が実行されますが、undefined から name プロパティを読み取ろうとしてエラーが発生します。
  • try...catch 文でエラーを捕捉し、その内容を <div class="result"> 内に出力しています。

実行結果

ページを開いた直後の状態：

JavaScriptのTypeError：「 undefined is not an object」エラーの原因と対処法

「CLICK HERE」ボタンをクリックすると、次のようにエラーメッセージが表示されます。

JavaScriptのTypeError：「 undefined is not an object」エラーの原因と対処法

エラーを防ぐための対策

  • 事前に初期化する：var person = {}; のように、使用前にオブジェクトを代入しておきます。
  • 存在チェックを行う：if (person) や typeof person !== 'undefined' でアクセス前に確認します。
  • Optional Chaining を使う：alert(person?.name) と書けば、person が undefined でもエラーにならず undefined を返します（モダンブラウザ対応）。
  • try...catch で保護する：予期しないエラーで処理が中断されないよう、例外処理を入れておくと安全です。
  1. JavaScriptのRegExp（正規表現）オブジェクトとは？基本の使い方をわかりやすく解説

    RegExp（正規表現）オブジェクトは、テキストに対してパターンマッチングを行い、目的の文字列部分を検索・抽出するために使用されます。JavaScriptでは、RegExpオブジェクトを「RegExpコンストラクタ」または「リテラル構文」の2通りの方法で作成できます。 RegExpオブジェクトの作成方法 コンストラクタを使用する場合： new RegExp(pattern) リテラル構文を使用する場合： /pattern/ 主なメソッド test()：文字列がパターンに一致するかどうかを真偽値（true / false）で返します。 exec()：パターンに一致した文字列を返します。

  2. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars