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

初心者向けにJavaScriptで「Cannot read property 'プロパティ名' of undefined」というエラーが出る原因と対処法について現役エンジニアが解説しています。undefinedとは中身が設定されていない変数にアクセスしようとした場合に発生するエラーです。if文などで判定し対処できます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」というエラーが出る原因と対処法について詳しく説明していくね!

大石ゆかり

お願いします!

 

「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サービス公開を習得できる、オンラインブートキャンプを開催しています。

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