JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」エラーが出る原因と対処法を現役エンジニアが解説【初心者向け】

JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」というエラーが出る原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

「Cannot read property ‘プロパティ名’ of undefined」とは

「Cannot read property ‘プロパティ名’ of undefined」とは、undefinedのプロパティは読めませんという意味になります。

プロパティというのはオブジェクトの中身を表す1つの要素のことです。
 

エラーが出る原因

エラーが出る原因は、アクセスしようとするプロパティの母体である、オブジェクトがundefinedであるからです。

プロパティというのは、繰り返しになりますがオブジェクトの中身を表す1つの要素です。

undefinedというのは値が代入されていない変数です。（もしくはundefinedという値が代入されている変数です。）

したがって、undefinedのプロパティとは、値のないオブジェクトのプロパティとなります。

値のないオブジェクトという言い回しは、とても奇妙ですが、要するにそのオブジェクトは中身がないわけです。（もはやオブジェクトですらありません。）

中身がないということは、中身を表す要素もありませんので、undefinedのプロパティは読めません。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

エラーを出さないための対処法

エラーを出さないための対処法を考えてみましょう。

考えるにあたって、まずはエラーを無理矢理出すことから始めてみます。

let a
console.log(a.b)

変数aは値が代入されていない変数です。

そのプロパティbにアクセスしようとしますが、これはCannot read property “b” of undefinedというエラーになります。

なお、1行目は次のように書き換えることができます。

let a = undefined

aはundefinedという値を代入した変数になります。

また、void演算子を使って、次のように書き換えることもできます。

let a = void 0

エラーを出すことができるようになったところで、このエラーを回避する手立てを考えましょう。

これは、アクセスしようとするプロパティの母体である、オブジェクトがundefinedであることを事前に判定すれば良いです。

let a
if (a) {
  console.log(a.b)
}

bというプロパティにアクセスする前に、aがundefinedであるか否かを判定するようにしました。

これで、Cannot read property “b” of undefinedというエラーは消えます。
 

筆者プロフィール

メンター久保田さん Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。