jQueryの$が使えない理由（$の衝突を防ぐ）。$はjQueryのものではないですよ？

jQueryでは$を使いますが、$がjQueryとして認識されずにエラーになることがあります。

原因は$がすでにほかで使われているため、jQueryと衝突が起きています。解決方法はかんたんで即時関数を使って解決します。

$はjQueryのためにあるものではないですよ、という話。

jQueryの$の意味

jQueryでは$を使いますが、これは『jQuery』のエイリアス。$を使って『jQueryの機能を使いますよ』と宣言しています。

jQueryの機能を使うたび『jQuery』を書くのはめんどうなので、$を使うことが一般的。

$が使えない理由は定義の衝突

ごくまれに、$がjQueryとして認識されずにスクリプトエラーが発生することがありますが、これはjQueryのfunctionが、

になっているから。$.css()など未定義はありえないものでエラーになります。

エイリアス『$』をjQuery以外で使っている、プラグインなどのJavaScripがあって、それと$の定義の衝突が起きることで発生します。

衝突のことを、

ともいいます。

これを回避するには、即時関数を使ってjQueryを使うコードを囲うことで解決します。

(function($) {
  // ここにjQueryのコードを書く。
})(jQuery);

function($) {}の中で使われる$はjQueryと同じ意味です。$はjQueryを定義しているのと同じ。

jQueryを使うときは、(function($){})(jQuery)を必ず使うと決めてしまったほうがよいでしょう。

ほかで使っている$と一緒に使いたいとき

ほかで使われている$とjQueryの$をいっしょに使いたいときは、即時関数でエイリアスを変更します。

(function($, $pg) {
　　　　// ここにjQueryのコードを書く。
})(jQuery, $);

$を使っているほかのJavaScriptのエイリアスを$pgに変更しました。この即時関数の中では、jQuery以外は$pgで使います。

$がjQuery以外でもかまいません。そのときは、jQueryを$jqなどのエイリアスにします。

もう気づいている人もいるかもしれませんが、即時関数はエイリアスを定義するのに使います。即時関数の中でしか適用されないので、

になります。

おまけ

即時関数を外して『$』を『 jQuery 』と書きかえても解決できます。しかし、これだと『jQuery』を何度も書かないといけないのでおススメできません。

JavaScriptの即時関数は、HTMLをロードするときスクリプトコードが読みこまれた瞬間スクリプトを実行します。名前をもたない関数『無名関数』のひとつ。

JavaScriptは、HTMLのいたるところに挿入できます。jQueryで$が衝突するようにほかのコードに影響されやすいため、このような独特な機能をもっています。