jQueryで他ライブラリとのコンフリクトを防ぐ:noConflict()

jQueryを他のJavaScriptのライブラリと併用する場合、jQueryを表す「$」などがコンフリクトしてしまい正常に動作しないことがあります。 そこで、jQueryでnoConflictメソッドを使いコンフリクトを避けるための方法を紹介します。 参照:jQueryにおける「$(ドルマーク)」の意味

$を使えなくすることでコンフリクトを防ぐnoConflict()

noConflictメソッドを実行すると、「$」を使ってjQueryを書くことができなくなります。これによって、他のライブラリと「$」がコンフリクトすることを避けることができます。 noConflictメソッドを使ってコンフリクトを防ぐ3通りのサンプルついて説明していきます。

1. $ではなくjQueryを使う

最も簡単な方法は、「$」の代わりに「jQuery」を使うという方法です。jQueryにおいて「jQuery」と「$」は、同じなのでこのように書くことができます。
jQuery.noConflict();
jQuery("#target").hide();

2. ほかの文字に置き換える

任意の名前をつけた変数にnoConflictメソッドの返り値を入れてあげることで、その変数名を$の代わりに使うことができます。 以下では、$の代わりに$jという変数名を使っています。
var $j = jQuery.noConflict();
$j("#target").hide();

3. 即時関数を使う

即時関数は、関数定義と同時に実行するための構文です。即時関数の書式は以下のようになります。
(function (引数) {
  //code
})(渡す値);
jQueryを引数として、即時関数に渡すことで関数内で$を使えるようにしています。
jQuery.noConflict();
(function($) { 
  $("#target").hide();
})(jQuery);
処理の内容としては、以下のコードと等価です。
jQuery.noConflict();
function dallar($) {
  $("#target").hide();
}
dallar(jQuery);