裏紙に書く程度の内容

jQuery noConflictで衝突を回避する

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

ほかのライブラリを使うならnoconflictを使って回避しましょう

についてです。

コンフリクトを避ける

Javascriptのライブラリでは、”$”関数が使われることが多々あるようです。
その為、jQueryの”$”とコンフリクト(衝突)してしまい、バグを生むことがあります。

これを回避するためには以下のようにしましょう、ということです。

var $j = jQuery.noConflict();
$j('#myDiv').hide();

noConflict()で、jQueryの”$”オブジェクトを取り出せます。これを上記例では$jに格納しています。

こうすると$('#myDiv')と書いていたところが、上記のように$j('#myDiv')などと書け、他ライブラリとの衝突を避けられます。

上記以外の方法

TipsではnoConflict()でリネームする方法が紹介されていますが、これ以外にも衝突を避ける方法はあります。

$ではなくjQueryを使う

jQueryではいつも書いている$jQueryのエイリアスです。
つまり、$('#hoge')は、jQuery('#hoge')と書くのと同じことなので、$をやめてjQueryと書いてしまえばいい。

注意点として、衝突しているライブラリで$を使っていたらそれがjQueryなのかもう一方のライブラリなのかわからなくなってしまいます。

そんな時は以下。

jQuery.noConflict();

やはりnoConflict()を使う必要があるのですが、こうするとjQueryの$は無効になり、衝突が回避されます。

即時関数の中で$を使う

さらにもう一つの方法。

元のコードが以下だったとします。

$('#hoge').click(function() {
    // 何らかの処理
});

これを以下のように書き換えます。

jQuery.noConflict();

(function($) {
    $('#hoge').click(function() {
        // 何らかの処理
    });
})(jQuery);

1行目では前述の方法と同じ理由でnoConflict()を使って$を無効化しています。

その後、本来のコードを(function($) {})(jquery);で囲っています。
これは即時関数と呼ばれるもので、引数に指定した$はローカル変数となり、$がjQueryとして使用できます。

あとから衝突するようなライブラリを追加した場合はリファクタリングがひつようですが、この方法なら既存コードをそのまま流用できるのでベンリですね。

使う機会はあるのか?

しかしながらこれ、必要でしょうか?

以前に比べてjQueryも広く使われるようになっています。

その為、jQueryを使うことを前提としたライブラリ・プラギンも多く、それ以外の物がどうしても必要になる場面ってほとんどないんじゃないかと。

実際私もここ何年かは$の衝突で困ったことはありません。なので、noConflict()はもはや無用かもしれません。

結論

使う機会はないかもしれないが、知識としては覚えておこう。
Tipsとしてリストアップするのはびみょう。

Index