JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」エラーが出る原因と対処法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで「Cannot read property 'プロパティ名' of undefined」というエラーが出る原因と対処法について現役エンジニアが解説しています。undefinedとは中身が設定されていない変数にアクセスしようとした場合に発生するエラーです。if文などで判定し対処できます。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
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サービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。