1. BRSF

    No comment

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