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

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

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

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

jQueryの$の意味

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

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

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

undefined

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

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

衝突のことを、

コンフリクト（Confrict）

ともいいます。

これを回避するには、即時関数を使って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で$が衝突するようにほかのコードに影響されやすいため、このような独特な機能をもっています。

前の投稿

webpack5, sass-loaderはnode-sassのバージョンに影響される

jQuery, HTMLの読み込みが完了してから実行する。

次の投稿

JavaScriptの本

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。