Help us understand the problem. What is going on with this article?

Cannot read property 'toLowerCase' of undefinedのとき何を確認すべきか?

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(); //$thisが何なのか関数内で示されていない!
   console.log(val);
}

このときプルダウンメニューのchangeイベントが実行されたタイミングで、$(this)が何を指しているのかわからないので、上記のエラーが発生します。特に、プログラムの一部を関数化、外部ファイル化しようとしたときに、そのままコピペなんてことをしてしまうと、このエラーに遭遇する率が高いわけです。

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

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

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

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

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

BRSF
職業、PG・SE・DBエンジニア。オープン環境のwebプログラムをメインにシステム構築担当。使用言語はPHP(cakePHP、Laravel含)jQuery、JavaScript、ExcelVBA、Perl、Ruby、Python。現在Vue、React、Angular強化中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした