$の衝突を防ぐjQueryのnoConflictメソッド

jjQueryを利用していて$が使えず、jQueryが動作しない場面に遭遇した。どうも原因はjQuery.noConflict()だったようなのでその使い方を調べた。

jQuery.noConflict()の挙動

基本的には$が関数として使えなくなるだけで難しいところはない。

//$関数を無効にする
jQuery.noConflict();

//$は無効になってるのでアラートはでない
$(function() {
  alert("hoge");
});

//jQueryは無効になってないのでこれは動く
jQuery(function() {
  jQuery('li').css('color','blue');
});

ちなみにjQuery.noConflict(true)とすればjQueryすら利用できなくなる。

noConflictメソッドが利用される場面

これが利用される場面は、jQueryと併用したい他のライブラリがある場合。例えばprototype.jsなどは$関数を利用しているので、併用しようとすると動作しなくなる。他のライブラリで$を利用できるようにするためにnoConflictメソッドを使う。

WordPressなんかだと様々なライブラリを受け入れるために、jQueryではこの記述が採用されていたりする。したがって、すべての$をjQueryで置き換えるか、以下のようなカプセル化を用いて$を使う。

jQuery(function($){
  //この中では$が使える
  $('li').css('color','red');
});
 
//即時関数なら
(function($){
  $('div').css('background', 'red');
})(jQuery);

上記のようにすることでWordPressでもjQueryを安全に動作させることができる。