1. BRSF

    No comment

    BRSF
Changes in body
Source | HTML | Preview

javascriptやjQueryなどの関連のライブラリをコーディングしていると頻繁に遭遇するエラーメッセージ。

Cannot read property 'toLowerCase' of undefined

これって何ぞや?日本語で直訳すると

"未定義のtoLowerCase"のプロパティが読み取れません

という意味になります。ではtoLowerCaseとは何でしょうか?答えはtoLowerCase()メソッドを呼び出そうとして起こるエラーで、toLowerCaseメソッドとは、文字列の値を小文字に変換して新しい文字列を返す働きを持ちます。

…とはいえ、ソースを確認しても、どこにもそのようなコードで思い当たる場所が存在しない、ということがよくあります。どうやらそのエラーは、DOM要素に対する子要素が定義されていない(読み取れない)ときにも起こります。

具体的に?

たとえば、このようなときに起こります。まずはサンプル1にあるような、プルダウンメニューから選択した値を取得するだけの、簡単なプログラムを記述してみます。

サンプル1
$('select').on(change,function(){
    val = $(this).val();
    console.log(val);
})

このイベント部分を、サンプル2のように関数化させます。

サンプル2
$('select').on(change,function(){
    myFunc();
})

myFunc = function(){
   val = $(this).val();
   console.log(val);
}

このとき、$(this)が何を指しているのかわからないので、上記のエラーが起きてしまいます。特に、関数を外部ファイル化しようとしたときに、そのままコピペなんてことをしてしまうと、このエラーに遭遇する率が高いわけです。

この場合は、DOMオブジェクトも関数の引数に入れないといけません。

サンプル3
$('select').on(change,function(){
    sel = $(this);
    myFunc(sel);
})

myFunc = function(sel){
   val = sel.val();
   console.log(val);
}

これは一部の例ですが、このエラーが出たら、まずは、自分で定義した関数を見直してみることをオススメします。なお、ブラウザの開発ツールなどで、エラー元を辿っても、複雑なjQueryソース上(toLowerCaseメソッドの定義関数部分)に飛ばされてしまい、余計に混乱するだけです。

※類似のエラーもだいたい、代名詞部分の定義をプログラムが読み取れない、つまり具体的な値が示されていないときに起こります。借り物のプログラムをコピペしたときのセレクタ名が異なる(同様にオブジェクトが読み取れないのでエラーが発生します)、関数の外部ファイル化などには注意を払いましょう。※類似のエラーもだいたい、代名詞部分の定義をプログラムが読み取れない、つまり具体的な値が示されていないときに起こります。借り物のプログラムをコピペしたときのセレクタ名が異なっていないか(同様にオブジェクトが読み取れないのでエラーが発生します)、関数の外部ファイルなどでthisの定義が曖昧になっていないか、などに注意を払いましょう。