はじめに
Cannot read property 'hoge' of undefined
Vue.jsを用いた開発をしている人なら、誰もが一度は見たことのあるエラーです。
エラーの原因が多岐に渡り、Vueのフレームワークを使い慣れていない人にとっては原因の特定が難しいのではないかと感じています。筆者も最初は戸惑いました。
そこで、ある程度Vue.jsを書けるようになってきた自分なりに、このエラーと直面した際に考えるべき原因と、対処法をまとめてみました。
Vue.js(特にVue CLI)を用いた際に注目して書いています。
Cannot read property 'hoge' of undefined とは
コード上ではエラーが出ないのに、いざ実行するとコンソールにこんなものがでて、うまく動かないことがあります。
Cannnot read property 'hoge' of undefined
日本語にすると、「undefinedのhogeというプロパティが読めないよ」という意味です。
筆者も最初勘違いしていたのですが、この場合undefinedとなっているのはhogeではなく、hogeの一つ前のオブジェクトです。例えば、piyo.hogeというコードを書いていてこのエラーが出たなら、問題があるのはhogeではなくpiyoだということになります。
英語を勉強しないとダメですね。
原因
Vue CLIでこのエラーが出る場合、大抵は以下のどれかが原因だと思います。
piyoにデータが入っていない場合
piyoにデータが入っていない場合、当然piyo.hogeにもデータは存在せず、上記のエラーが生じます。
#####コンポーネント間で変数を共有しようとしている。
vuexやpropsなどを用いない場合は、コンポーネント間で変数は共有されません。
従って、あるvueファイルで作った変数を他のvueファイルで使おうとするとすると上記のエラーが出ます。
#####関数を実行する順番を間違えている。
piyoに値を入力する関数は書いているものの、その関数を呼び出す前に使用してしまう場合です。
同一ファイルにすべて書いている場合はコードの実行順が分かりやすいですが、他のコンポーネントをimportして使用することが多いVue CLIでは分かりにくく、混乱しやすいのではないでしょうか。まずは、importされている順番を確認しましょう。
非同期処理を考慮せずに書いている。
非同期処理とは、プロジェクトがAPIなどにアクセスし、データを取ってくる間に、他の部分のコードが進んでしまうことです。上記の「関数を実行する順番を間違えている。」の仲間です。
piyo.hogeは存在するが、正しく呼び出せていない場合
ちゃんと値を代入することは出来ているのだから、正しく呼び出しましょう。ネットに転がっている普通のJavaScriptのサンプルコードをVue.jsっぽく書き直そうとしているうちに訳が分からなくなってしまい、このエラーとなる場合が多い気がします。
thisの挙動を考慮していない。
thisを用いてdataやcomputedの値を参照書いている場合に限りますが、これが原因で苦しめられる人は初学者の方に特に多そうです。
JavaScriptはthisの挙動がアロー関数の場合と通常関数の場合で異なるため、dataにアクセスしようと思ってthisを使ったのに思わぬ挙動をしていることがあります。
個人的には、アロー関数が使えるところではアロー関数を使うように心がけるとエラーが減ると思っています。
スペルミス
単純に変数のスペルを間違えてしまった場合もこのエラーが出ることがあります。
灯台下暗しとはこのことです。エラーの原因が分かった時には、嬉しさと悔しさが一緒にきて複雑です。
原因が似ているエラー
①hoge is not a function
hoge is not a function
Cannot read property 'hoge' of undefined は hoge がオブジェクトだった場合に起こるものですが、hogeが関数だった場合、上のようなエラーが出ます。
エラーへのアプローチ方法としては全く同じです。
②Cannot read property hoge of null
Cannot read property hoge of null
piyo.hogeが存在した時に、piyoが無い(null)場合、こうなります。
例えば、データが一つも入ってない場合などが挙げられます。
基本的なエラーへのアプローチはCannot read property 'hoge' of undefinedと一緒で大丈夫でしょう。
終わりに
Vue CLIに限らず、どんな言語やフレームワークでもエラーとの戦いは辛く厳しいものですが、エラーに当たったときに「新しい知見を得た！」と思ってポジティブに捉えて精進していきたいです。