2024.06.21

JavaScript エラー「cannot read properties of undefined」の原因と解決策

Web開発でJavaScriptを使用していると、「cannot read properties of undefined」というエラーメッセージに遭遇することがあります。このエラーは、オブジェクトのプロパティにアクセスしようとした際に、そのオブジェクトが存在しない場合に発生します。

初心者にとって、このエラーメッセージは理解しにくく、解決に時間がかかることがあります。そこで、この記事では、初心者でもわかりやすく「cannot read properties of undefined」エラーの原因と解決策について説明します。

この記事でわかること

エラーメッセージの意味

「cannot read properties of undefined」エラーメッセージは、日本語で「未定義のオブジェクト、つまりundefinedなオブジェクトのプロパティを読み取ろうとしている」という意味です。

つまり、コード内で存在しないオブジェクトのプロパティにアクセスしようとしているため、エラーが発生しているのです。

「cannot read properties of undefined」エラーが発生する主な原因は以下の3つです。

変数が宣言されていない場合、または変数に値が代入されていない場合、その変数は未定義になります。未定義の変数のプロパティにアクセスしようとすると、「cannot read properties of undefined」エラーが発生します。

オブジェクトのプロパティは、オブジェクトが持つキーと値のペアです。オブジェクトが存在しても、アクセスしようとしているプロパティが存在しない場合、「cannot read properties of undefined」エラーが発生します。

nullまたはundefinedオブジェクトは、何も存在しないことを表します。nullまたはundefinedオブジェクトのプロパティにアクセスしようとすると、「cannot read properties of undefined」エラーが発生します。

「cannot read properties of undefined」エラーを解決するには、以下の方法があります。

変数が未定義の場合、変数に値を代入することでエラーを解決できます。

オブジェクトにプロパティが存在しない場合、オブジェクトにプロパティを追加することでエラーを解決できます。

nullまたはundefinedオブジェクトのプロパティにアクセスする前に、nullまたはundefinedチェックを行うことでエラーを回避できます。

「cannot read properties of undefined」エラーが発生した場合、以下の方法でデバッグを行うことができます。

コンソールログを確認する
ブラウザの開発者ツールでコンソールログを確認すると、エラーメッセージが表示されます。エラーメッセージには、エラーが発生した行番号などが表示されるので、原因を特定するヒントになります。
変数の値を確認する
変数の値がundefinedになっていないか確認します。変数の値を確認するには、コンソールでconsole.log()を使って変数の値を出力することができます。
プロパティの存在を確認する
参照しようとしているプロパティがオブジェクトに存在するかどうか確認します。オブジェクトのプロパティを確認するには、コンソールでObject.keys()を使ってオブジェクトのプロパティの一覧を出力することができます。

「cannot read properties of undefined」エラーは、変数が未定義であったり、参照しようとしているプロパティが存在しなかったりすることが原因で発生します。

エラーメッセージの内容をよく確認し、原因を特定することで問題を解決することができます。

デジタルトレンドナビ編集部

システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション（DX）など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。

View all posts