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

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

目次

• 「Cannot read property 'プロパティ名' of undefined」とは
• エラーが出た時の解消方法
• エラーを出さないようにする予防策
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

 

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

JavaScriptの開発をしていると、以下のようなエラーに遭遇することがあります。

このエラーは、JavaScript初心者にとって1つの大きな混乱ポイントです。

なぜなら、以下に挙げる2つの「罠」があるからです。

罠1：「TypeError」は、タイプミスではない！

エラー文の前半を見るとTypeErrorとあります。

そのまま読むと「タイプエラー」となり、なにか入力ミスをしているのかな？と思われるかもしれません。

しかし、プログラミングの文脈においてTypeは「型」を表します。

型とは文字列型や数値型など、値の種類を表す概念で、TypeErrorというのは型に関係のあるエラーですよ、という意味になります。

Uncaught TypeErrorは、さまざまな種類のエラーの頭に書いてあることが多く、エラー文の本体はその後ろの部分です。

罠2：「’プロパティ名’ of undefined」は、「プロパティ名がundefined」なのではない！

undefinedというのは「未定義」のことですが、このエラーにおいてundefinedなのは一体何なのでしょうか？

直感的には’プロパティ名’の部分なのかな、と思うかもしれませんが、実は違います。

ここがこのエラーの最も複雑な部分なので、コードを追いながら見ていきましょう。

 

次のコードを見てください。

const fruits = {
  apple: {
    price: 100
  }
}

変数fruitsにはオブジェクトが代入されており、そのプロパティ（中身）として、appleという情報が存在しています。

※オブジェクトの構造について理解したいという方は、以下の記事も参考にしてください。

JavaScriptでオブジェクトにプロパティを追加する方法を現役エンジニアが解説【初心者向け】

 

ここで、以下のように書くとどうなるでしょうか。

console.log(fruits.orange);

 

fruitsオブジェクトにorangeというプロパティは定義されていないため、コンソールにはundefinedという値が表示されます。

（ここで登場したundefinedをよく覚えておいてください！）

 

さて、次に以下のコードを書いてみます。

console.log(fruits.orange.price);

さきほど出力したfruits.orangeは、undefinedでしたね。

そのundefinedという値に対して、ここではpriceというプロパティにアクセスしようとしています。

この瞬間に出現するエラーが、Cannot read property ‘price’ of undefined （undefinedに対してpriceというプロパティは読み込めませんという意味）です！

このように、undefinedな値に対して何かプロパティにアクセスしようとした時に、そんなアクセスは不可能ですと教えてくれるのが、このエラーの本質的な意味です。

 

エラーが出た時の解消方法

Cannot read property〜と出たら、まずはエラー箇所がどこかを特定しましょう。

エラー表示の一番右側に、該当の行数が表示されています。

今回は7行目なので、画像上のコードの7行目を確認すると、確かにその箇所に fruits.orange.price とエラー原因になる記述がありますね。

エラー箇所さえ見つけてしまえば、このエラーはコードの不具合を教えてくれる親切な人のように接することができます。

 

例えば、先ほどの

const fruits = {
  apple: { 
    price: 100
  }
}
console.log(fruits.orange.price);
//Cannot read 'price' of undefined

は、undefinedに対するpriceということだから、fruits.orangeがundefinedなんだな！と知ることができます。

 

あとはエラーの対象がundefinedになることを避けるように、コードを修正すれば、このエラーは役目を果たして消えてくれます。

const fruits = {
  //プロパティ名をorangeに変更
  orange: {
    price: 100
  }
}
console.log(fruits.orange.price); //100と表示される

 

[PR] フロントエンドで副業する学習方法を動画で公開中

エラーを出さないようにする予防策

上記で説明した通り、このエラーは修正すべき箇所を教えてくれるため、発生しないようにしようと考えすぎる必要はありません。

修正点がわかったら、そこを直せば解決だからです。

しかし、実装のスピードという面で見ると、できるだけエラーに引っかからず進みたいものです。

そのためには、自分の書いている変数にどんな値が入るかを常に想定しながらコードを組むことが重要です。

undefinedにならないように最初から配慮し、必要に応じて条件分岐を設けるなどの工夫で、このエラーとの遭遇頻度は徐々に減らすことができます。

とはいえ、プロでも時々起こしてしまうエラーです。

最初のうちは、出たエラーを解消する経験を積み重ねることで成長していきましょう！

 

今回は以上です。

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！