「cannot read properties of undefined」を簡単に解説。

どうも、おじさんです。

javascriptなどで何かを制作していると、初心者の方とかはよくエラーにぶち当たると思います。
今回はその中でも一番といってもいいほどよくぶち当たるエラーの「cannot read properties of undefined」の原因と対処法について解説していきます。

なんで起きるの？
まとめ

なんで起きるの？

これに関しては例を見てもらった方が早いです。

var a = [0, 1, 2];
console.log(a[3]);         //ここでcannot read properties of undefined

このコードでは配列aの三番目の要素を呼び出しています。

ここで「何言ってんだこいつ」と気づいた方もいらっしゃると思います。
そういうことです。ないものを呼び出そうとするとこのエラーが起きるのです。

これだけではわかりづらいので実際に例を出して解説していきます。

例

例としてテトリスを作っているとします。

var pieces = [
    [
        [0, 0, 0, 0],
        [0, 0, 1, 1],
        [0, 1, 1, 0],
        [0, 0, 0, 0]
    ],[
～～～～～～～～～～～～～～～
    ],[
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0]
    ]
]

このpiecesという変数はテトリスのピースのデータを2x2の二次元配列を７つ用意した三次元配列とします。
この変数を使い、最後のピースを描画するコードを書きます。

for(var i = 0; i < 4; i++) {
    for(var n = 0; n < 4; n++) {
        if(pieces[7][i][n] != 0) {
            g.fillRect(n*10, i*10, 10, 10);
        }
    }

コードの説明は注目してほしいところ以外割愛します。
で、注目してほしいところは三行目のif文です。

ここのif文では「もしpieces変数の八個目の二次元配列のi番目のn番目の要素が0ではないとき」ということが書かれています。

そうです。エラーが起きたのはないはずの八個目の要素を呼び出そうとしていたからです！

配列の要素を指定するときには指定したい要素の順番のひとつ前の数字を指定しなければなりません。
なので正しくは7ではなく6と書かなければ7個目の配列の要素は呼び出せないのです。

このようなエラーを出さないために注意するところは、

配列などの指定方法はあっているか
そもそもそのような変数はあるのか

おもにこの二つに注意すればいいです。

まとめ

まとめです

cannot read properties of undefinedは存在しない要素を呼び出そうとしたときに出てくるエラー
このエラーを減らすには配列の指定方法、そのようなものがそもそもあるのかを確認しよう

おじさんの毎日

おじさんですぅ

「cannot read properties of undefined」を簡単に解説。

なんで起きるの？

まとめ