jQueryの$が使えない理由($の衝突を防ぐ方法)

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
en_US en_US
jquery image
イラストACの画像をもとに加工しています。

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)を必ず使うと決めてしまったほうがよいでしょう。

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

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

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

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

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

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

変数の汚染防止

になります。

$のコンフリクトは即時関数のエイリアスで回避する

おまけ

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

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

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

最近Webカテゴリでよく読まれている記事です。
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!