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

この記事ではJavaScriptで発生する『Cannot read properties of undefined』エラーの原因と解決方法について説明しています。以下の内容を説明します。

  • 「Cannot read properties of undefined」エラーとは
  • 「Cannot read properties of undefined」エラーの原因と解決方法
    • 未定義のオブジェクトのプロパティにアクセスする
    • 未定義の配列の要素にアクセスする
    • 存在しないDOM要素にアクセスする

分かりやすく説明するように心掛けていますので、ご参考になれば幸いです。

「Cannot read properties of undefined」エラーとは

「Cannot read properties of undefined」エラーは「未定義(undefined)のオブジェクトのプロパティにアクセスした時」や「未定義(undefined)の配列の要素にアクセスした時」に発生するエラーです。

例えば、以下のサンプルコードでは、未定義(undefined)のobjオブジェクトのnameプロパティにアクセスしています。

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

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

未定義(undefined)のプロパティを読み取ることができません(reading 'name')

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

未定義(undefined)に対してnameプロパティを読み取ることができません

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

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

「Cannot read properties of undefined」エラーは以下の原因で発生します。

  • 未定義のオブジェクトのプロパティにアクセスする
  • 未定義の配列の要素にアクセスする
  • 存在しないDOM要素にアクセスする

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

原因1: 未定義のオブジェクトのプロパティにアクセスする

以下のサンプルコードでは、未定義(undefined)のobjオブジェクトのnameプロパティにアクセスしています。

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

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

このエラーを修正するためには、以下に示すようにオブジェクトにプロパティを追加します。

const obj = { name: 'Taro' };
console.log(obj.name);
// ログ出力
// Taro

補足(青色)

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

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

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

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

const obj = 'hogehoge';
console.log(obj.name);
// ログ出力
// undefined

上記のサンプルコードでは、obj は文字列型で定義されています。この場合、エラーは発生せず、undefinedが出力されます。

原因2: 未定義の配列の要素にアクセスする

以下のサンプルコードでは、未定義(undefined)の配列arrの要素にアクセスしています。

const arr = undefined; // 配列arrは未定義(undefined)である
console.log(arr[0]);
// 以下のエラー発生
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

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

このエラーを修正するためには、配列arrにアクセスする前に配列要素を追加します。

const arr = [1, 2, 3];
console.log(arr[0]);
// ログ出力
// 1

補足(青色)

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

const arr = [1, 2, 3];
console.log(arr[3]);
// ログ出力
// undefined

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

原因3: 存在しないDOM要素にアクセスする

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

  • アクセスしたいDOM要素が存在しない
    • 指定したIDやクラス名を持つDOM要素がHTMLドキュメント内に存在しない場合、getElementByIdやquerySelectorなどのメソッドはnullを返します。その結果、これらの要素のプロパティにアクセスしようとするとエラーが発生します。
  • DOM要素にアクセスする際のスペルミス
    • ID、クラス名、タグ名などを間違って指定すると、存在しない要素を参照しようとしてエラーが発生します。
  • DOM要素が読み込まれる前にDOM要素にアクセスする
    • HTMLドキュメントのパーシングが完了する前にJavaScriptコードが実行されると、まだ存在しないDOM要素にアクセスしようとしてエラーが生じます。

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

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

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

本記事のまとめ

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

  • 「Cannot read properties of undefined」エラーとは
  • 「Cannot read properties of undefined」エラーの原因と解決方法
    • 未定義のオブジェクトのプロパティにアクセスする
    • 未定義の配列の要素にアクセスする
    • 存在しないDOM要素にアクセスする

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