Cannot set properties of undefined/nullエラーとは？原因と解決策を解説！

この記事ではJavaScriptで発生する『Cannot set properties of undefined』や『Cannot set properties of null』というエラーの原因と解決策について、以下の内容をサンプルコードを用いてわかりやすく解説します。ご参考になれば幸いです。

  • Cannot set properties of undefined/nullエラーとは
  • Cannot set properties of undefined/nullエラーの原因と解決方法
    • 未定義（undefined）のオブジェクトにプロパティを設定する
    • null値のオブジェクトにプロパティを設定する
    • 未定義（undefined）の配列の要素に値を設定する
    • null値の配列の要素に値を設定する
    • 存在しないDOM要素にプロパティを設定する

「Cannot set properties of undefined/null」エラーとは

Cannot set properties of undefined/nullエラーは、「未定義（undefined）やnullのオブジェクトに対してプロパティを設定した時」や「未定義（undefined）やnullの配列の要素に対して値を設定した時」に発生するエラーです。

例えば、以下のサンプルコードでは、未定義（undefined）のobjオブジェクトに対してnameプロパティを設定しようとしています。

const obj = undefined; // objオブジェクトは未定義（undefined）である
obj.name = 'Taro';
// 以下のエラー発生
// Uncaught TypeError: Cannot set properties of undefined (setting 'name')

上記のサンプルコードを実行すると、Cannot set properties of undefined (setting 'name')というエラーが発生します。このエラーを直訳すると以下の意味になります。

未定義（undefined）のプロパティにセットすることができません(setting 'name')

ただし、ニュアンス的には以下が正しいです。

未定義（undefined）のオブジェクトにnameプロパティを設定できない

objオブジェクトに対してnameプロパティを設定しようとしたが、objオブジェクトは未定義（undefined）なのでこのエラーが発生しているのですね。

「Cannot set properties of undefined/null」エラーの原因と解決方法

Cannot set properties of undefined/nullエラーは以下の原因で発生します。

  • 未定義（undefined）のオブジェクトにプロパティを設定する
  • null値のオブジェクトにプロパティを設定する
  • 未定義（undefined）の配列の要素に値を設定する
  • null値の配列の要素に値を設定する
  • 存在しないDOM要素にプロパティを設定する

ではこれから、各原因についてサンプルコードを用いてわかりやすく説明します。また、各原因の解決方法についても説明します。

原因1: 未定義（undefined）のオブジェクトにプロパティを設定する

以下のサンプルコードでは、未定義（undefined）のobjオブジェクトに対してnameプロパティを設定しようとしています。

const obj = undefined; // objオブジェクトは未定義（undefined）である
obj.name = 'Taro';
// 以下のエラー発生
// Uncaught TypeError: Cannot set properties of undefined (setting 'name')

上記のサンプルコードを実行すると、Cannot set properties of undefined (setting 'name')というエラーが発生します。

原因2: null値のオブジェクトにプロパティを設定する

以下のサンプルコードでは、null値のobjオブジェクトに対してnameプロパティを設定しようとしています。

const obj = null; // objオブジェクトはnull値である
obj.name = 'Taro';
// 以下のエラー発生
// Uncaught TypeError: Cannot set properties of null (setting 'name')

上記のサンプルコードを実行すると、Cannot set properties of null (setting 'name')というエラーが発生します。

「原因1」と「原因2」の解決方法

オブジェクトを使用する前に、適切に初期化することでエラーを防ぐことができます。

const obj = {};        // 空のオブジェクトとして初期化
obj.name = 'Taro';     // 問題なく動作
console.log(obj.name); // ログ出力: Taro

補足

オブジェクトが定義されているが、特定のプロパティがない場合にはエラーは発生しません。

const obj = { data: 'Taro' }; // nameプロパティはない
obj.name = 'Taro';            // 問題なく動作
console.log(obj.name);        // ログ出力: Taro

上記のサンプルコードでは、objオブジェクトは定義されていますがnameプロパティは存在しません。この場合、エラーは発生せず、問題なく動作します。

また、オブジェクト型ではない型で定義されている場合にもエラーは発生しません。この場合、エラーは発生せず、undefinedが出力されます。

const obj = 'hogehoge';  // objはオブジェクトではない
obj.name = 'Taro';       // 問題なく動作
console.log(obj.name);   // ログ出力: Undefined

原因3: 未定義（undefined）の配列の要素に値を設定する

以下のサンプルコードでは、未定義（undefined）の配列arrの配列の要素に対して値を設定しようとしています。

const arr = undefined; // 配列arrは未定義（undefined）である
arr[0] = 1;
// 以下のエラー発生
// Uncaught TypeError: Cannot set properties of undefined (setting '0')

上記のサンプルコードを実行すると、Cannot set properties of undefined (setting '0')というエラーが発生します。配列arrの0番目の要素arr[0]に値を設定ようとしたが、配列arrは未定義（undefined）なのでこのエラーが発生しているのですね。

原因4: null値の配列の要素に値を設定する

以下のサンプルコードでは、null値の配列arrの配列の要素に対して値を設定しようとしています。

const arr = null; // 配列arrはnull値である
arr[0] = 1;
// 以下のエラー発生
// Uncaught TypeError: Cannot set properties of null (setting '0')

上記のサンプルコードを実行すると、Cannot set properties of null (setting '0')というエラーが発生します。

「原因3」と「原因4」の解決方法

配列を使用する前に、適切に初期化することでエラーを防ぐことができます。

let arr = [];        // 空の配列として初期化
arr[0] = 1;          // 問題なく動作
console.log(arr);    // ログ出力: [ 1 ]

補足

配列が定義されているが、特定の要素がない場合にはエラーは発生しません。

let arr = [1, 2, 3]; // 要素は3つしかない
arr[10] = 1;         // 問題なく動作
console.log(arr);    // ログ出力: [ 1, 2, 3, <7 empty items>, 1 ]

上記のサンプルコードでは、配列arrは定義されていますが10番目の要素arr[10]は存在しません。この場合、エラーは発生せず、問題なく動作します。

また、配列ではなく、文字列や数値型で定義されている場合もエラーは発生しません。

const  arr = 'hogehoge'; // arrは配列ではない
arr[10] = 1; // 問題なく動作
console.log(arr); // ログ出力: 'hogehoge'

原因5: 存在しないDOM要素にプロパティを設定する

JavaScriptでDOM(ドキュメントオブジェクトモデル)を操作する際にもCannot set properties of undefined/nullエラーが発生することがあります。主に以下の原因で発生します。

  • アクセスしたいDOM要素が存在しない
    • 指定したIDやクラス名を持つDOM要素がHTMLドキュメント内に存在しない場合、getElementByIdやquerySelectorなどのメソッドはnullを返します。その結果、これらの要素のプロパティに値を設定するとエラーが発生します。
  • DOM要素が読み込まれる前にDOM要素にアクセスする
    • JavaScriptがHTMLの構造を読み込む前に実行されている場合（例えば、<script>タグが<body>要素の上部にある場合）、getElementByIdやquerySelectorなどのメソッドはnullを返します。その結果、これらの要素のプロパティに値を設定するとエラーが発生します。

以下のサンプルコードでは、idが002の要素を参照していますが、HTML内にはidが001の要素しか存在しないため、getElementById('002')はnullを返します。その結果、nullのtextContentプロパティに値を設定しようとしてCannot set properties of null (setting 'textContent')というエラーが発生します。

<!DOCTYPE html>
<html>
  <body>
    <h1 id="001">Hello</h1>
    <script>
      const element = document.getElementById('002');
      element.textContent = 'hogehoge'; // エラー発生
      // 以下のエラー発生
      // Uncaught TypeError: Cannot set properties of null (setting 'textContent')
    </script>
  </body>
</html>

このエラーを修正するためには、正しいidを参照するか、HTMLに対応する要素を追加する必要があります。

本記事のまとめ

この記事ではJavaScriptで発生する『Cannot set properties of undefined』や『Cannot set properties of null』エラーについて、以下の内容を説明しました。

  • Cannot set properties of undefined/nullエラーとは
  • Cannot set properties of undefined/nullエラーの原因と解決方法
    • 未定義（undefined）のオブジェクトにプロパティを設定する
    • null値のオブジェクトにプロパティを設定する
    • 未定義（undefined）の配列の要素に値を設定する
    • null値の配列の要素に値を設定する
    • 存在しないDOM要素にプロパティを設定する

お読み頂きありがとうございました。