jQuery - noConflict() メソッド

❮ 前章へ 次章へ ❯

jQueryを使用する一方で、ページに他のフレームワークを使用したい場合はどうなりますか?


jQuery と 他の JavaScript フレームワーク

既にご存じの通り、jQuery は jQuery へのショートカットとして $ サインを使用しています。

他にも、人気のある次のような JavaScript フレームワークがあります:Angular、Backbone、Ember、Knockout など

他の JavaScript フレームワークもショートカットとして $ サインを使用している場合はどうしますか?

2 種類のフレームワークが同じショートカットを使用している場合、一方のスクリプトは動作を停止するかもしれません。

jQuery チームは、すでにこの問題について考え、noConflict() メソッドを実装しています。



jQuery noConflict() メソッド

noConflict() メソッドは、$ ショートカット識別子のホールド(支配)を解除するので、 他のスクリプトがそれを使用できるようになります。

もちろん、ショートカットの代わりに単純にフルネームを書くことで、jQuery を使用することができます:

$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery is still working!");
    });
});
Try it Yourself »

非常に簡単に独自のショートカットを作成することもできます。 noConflict() メソッドは、jQuery のへの参照を返すので、後で使用するため変数に保存します。次に、その例を示します:

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery is still working!");
    });
});
Try it Yourself »

$ ショートカットを使用しているが、そのすべてを変更したくない jQuery コードのブロックがある場合、 ready メソッドへのパラメータとして $ サインを渡すことができます。 これは、この関数内部で $ を用いて jQuery へのアクセスを可能にします - 関数の外では "jQuery" を使用する必要があります:

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery is still working!");
    });
});
Try it Yourself »

jQuery Misc リファレンス

すべての jQuery Misc メソッドの完全な概要については、 jQuery Misc リファレンスをご覧ください。


❮ 前章へ 次章へ ❯