「TypeError: $ is not a function. (In '$', '$' is undefined)」
というエラーメッセージが表示されていた！
ということはありませんか？
- 始めてこのエラーが出てしまった
- 同じプログラムでもサイトによってこのエラーが表示されたりされなかったりで原因がわからない
という方もご安心ください。
ここでは、エラーメッセージ「TypeError: $ is not a function. (In '$', '$' is undefined)」の解説と、このエラーを解消してスクリプトプログラムを動作させる方法を説明します。
目次
「TypeError: $ is not a function.」は何を意味している？
このエラーメッセージは一体何を表しているのか。
エラーの内容をわかりやすく翻訳すると、
あなたのサイト中のjavascript関数を参照しても、
'$'という表記に該当する関数名はが見つかりませんよ。
ということを言われています。
そもそも'$'は、javascriptとjQueryにとって公式で定義されている関数です。
それが見つからないとエラーを吐いているのですから、考えられるケースは２つです。
１つ目は、jQueryファイルそのものの呼び出しが行われていない、または呼び出しが行われる前にスクリプトプログラムが実行されているケースです。
２つ目は、jQueryの本体プログラムは読み出されているが、javascriptと干渉しないようにjQueryの'$'を認識させない設定になっているケースです。
それぞれの対処法は次に紹介していきます。
各自、自分のサイトがエラーメッセージを吐いている原因に応じて適切な対応を行えば、すぐにエラーメッセージを解消することができます。
「TypeError: $ is not a function. (In '$', '$' is undefined)」の解消方法
jQueryの本体プログラム読み込み前にプログラムが実行されているケース
jQueryを使うにはまずjQuery本体を読み込む必要があります。
まずは、スクリプトプログラムが実行される前に、
jQueryの本体プログラムが読み込まれているかどうかを確認しましょう。
読み込まれていない場合は、以下の文をスクリプトプログラムの前に記述します。
HTML
自分のサーバー上にjQuery本体プログラムを配置して、
そこから読み込みを行う場合には、以下のように記述しましょう。
HTML
スクリプトプログラムの後に読み込みが行われている場合は、
プログラムの記述位置を適切な位置（jQuery本体プログラム読み込み後の任意の箇所）に移動させましょう。
jQueryの'$'を認識させない設定になっているケース
jQueryの'$'が認識されない原因
jQueryの'$'を認識させない設定にしている理由は、
javascriptの'$'メソッドとの干渉を避けるためです。
javascriptとjQueryの両方で'$'メソッドを使っていると、プログラム実行時に'$'で始まるメソッドがjavascriptで記述したはずなのにjQueryの'$'メソッドを読んでしまったり、逆にjQueryで記述したはずなのにjavascriptの'$'メソッドを読んでしまったりといった衝突（コンフリクト：Conflict）が起きてしまいます。
こういった'$'メソッドの干渉を避けるために、
jQueryには以下の記述方式で、'$'を認識させないようにする「noConflict()」という関数が用意されています。
このコードが記述されている場合、
jQueryの本体プログラムが正常に読み込まれていても、'$'メソッドを認識してくれない、という現象が起きるのです。
javascript
jQueryの'$'を認識させるための方法
jQueryの'$'を認識させるためには、'$'メソッドの再定義を行う必要があります。
具体的には、以下のように記述を修正すれば、再定義が完了します。
javascript（定義前）
javascript（再定義後）
$を再定義したサンプルプログラム
以下は、$を再度定義したサンプルです。
上のプログラムは、
あるサイトではjavascriptとの干渉が起きず、そのままの形で利用することができていました。
しかし、他のサイトではjavascriptとの干渉が起きたため、
下のプログラムの通り、$を再定義するように変更しました。
javascript（定義前）
javascript（再定義後）
