1. BRSF

    No comment

    BRSF
Changes in body
Source | HTML | Preview
@@ -1,52 +1,52 @@
javascriptやjQueryなどの関連のライブラリをコーディングしていると頻繁に遭遇するエラーメッセージ。
**Cannot read property 'toLowerCase' of undefined**
これって何ぞや?日本語で直訳すると
-**"toLowerCase"のプロパティが定義されていません**
+**"未定義のtoLowerCase"のプロパティが読み取れません**
という意味になる。ではtoLowerCaseとは何か?答えはtoLowerCase()メソッドを呼び出そうとして起こるエラーで、toLowerCaseメソッドとは、文字列の値を小文字に変換して新しい文字列を返す働きを持つ。
…なのだが、ソースを確認しても、どこにもそのようなコードで思い当たる場所が存在しない、ということがよくある。どうやらそのエラーは、**DOM要素に対する子要素が定義されていない(読み取れない)**ときにも起こる。
#具体的に?
たとえば、このようなときに起こる。まずはサンプル1にあるような、プルダウンメニューから選択した値を取得するだけの、簡単なプログラムを記述してみる。
```javascript:サンプル1
$('select').on(change,function(){
val = $(this).find('option:selected').val();
console.log(val);
})
```
このイベント部分を、サンプル2のように関数化させる。
```javascript:サンプル2
$('select').on(change,function(){
myFunc();
})
myFunc = function(){
val = $(this).find('option:selected').val();
console.log(val);
}
```
このとき、$(this)が何を指しているのかわからないので、上記のエラーが起きる。特に、関数を外部ファイル化しようとしたときに、そのままコピペなんてことをしてしまうと、このエラーに遭遇する率が高い。
この場合は、DOMオブジェクトも関数の引数に入れないといけない。
```javascript:サンプル3
$('select').on(change,function(){
sel = $(this);
myFunc(sel);
})
myFunc = function(sel){
val = sel.find('option:selected').val();
console.log(val);
}
```
これは一部の例だが、このように、このエラーが出たら、まずは、自分で定義した関数を見直してみるのをオススメする。なお、ブラウザの開発ツールなどで、エラー元を辿っても、複雑なjQueryソース上、toLowerCaseメソッドの定義関数部分に飛ばされてしまい、余計に混乱するだけである。