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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
jquery image

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

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

jQueryの$の意味

jQueryでは$を使います。これは"jQuery"のエイリアスです。$を使って『jQueryの機能を使いますよ』ということを表しています。

jQueryの機能を使うたびに"jQuery"の文字列を記述するのは面倒なので$を使うことが一般的です。

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

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

jQueryのfunctionが"undefined"となります。$.css()など未定義はありえないものでなってしまいます。

これは、エイリアス"$"をjQuery以外で使っているJavaScriptのプラグインがあって、それと$の定義の衝突が起きることで発生します。衝突のことを『コンフリクト(Confrict)』と呼ぶことが多いです。

それを回避するには、次のように即時関数を使って、jQueryを使うコードをくくることで解決できます。

(function($) {
  // ここにjQueryを使用したコードを書く。
})(jQuery);

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

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

他で使われている$と併用したいとき

他で使われている$とJavascriptの$を併用したいときは、即時関数でエイリアスを変更します。

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

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

$を他のプラグインで使ってもかまいません。そのときは、Javascriptのほうを$jqなどのエイリアスを使います。

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

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

おまけ

即時関数を外して"$"の部分を"jQuery"と書き換えても解決することができます。しかし、この方法だと"jQuery"を何度も書かなければならないのでおすすめできません。

JavaScriptの即時関数は、HTMLをロードするとき、スクリプトコードが記述されたところが読み込まれたと同時にスクリプトを実行します。名前を持たない関数『無名関数』の1つです。

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

 

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

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

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

tadtadya.com

_

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

*

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

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