jQueryで競合（コンフリクト）を避ける方法！

今回は、jQueryを使用する際、他の（jQuery以外）のライブラリと競合（コンフリクト）を避ける方法について、実際にサンプルコードを用いて、詳しく記載していこうと思います。

ページ作成の際、JavaScriptライブラリのひとつであるjQueryと、他のJavaScriptのライブラリを同一ページで使用する際に、競合（コンフリクト）が起こってしまうことがございます。そのコンフリクトを避ける方法を今回は記載していこうと思います。

という事で、それでは今回はッ、

・$()はjQueryのエイリアス
・他のライブラリと競合（コンフリクト）を避ける
・プラグイン化したメソッドの競合の避け方

上記について記載していこうと思います…。

$()はjQueryのエイリアス

今までjQueryのサンプル記事を色々と記載してきました。そしてそのコードの中には、必ず$()という記述をおこないました。この$()という記述は、セレクタで指定した要素などを、jQueryが操作するためのjQueryオブジェクトにするための記述方法です。

以前、変数thisとeach()メソッドの使い方のサンプルを記載した記事で、オブジェクトとは、プログラミングの世界では「操作の対象」といった意味合いで使われることが多いと記載いたしました。jQueryでは操作をセレクタで指定して$()内に記述することで、要素をjQueryオブジェクト化し、初めてjQueryで操作することができます。

jQuery:変数thisとeach()メソッドの使い方

jQuery:変数thisとeach()メソッドの使い方今回は、jQueryの変数で頻繁に使う変数thisとeach()メソッドについて、実際にサンプルコードを用いて、詳しく記載していこうと思います。前回、jQueryの変数につきまして…

実はこの$()はエイリアス（偽名・別名といった意味）と呼ばれるもので、本来はjQuery()と記述します。なので今まで$()と記述してきた部分は、すべてjQuery()と記述することができます。

$(function(){
$(“#tab”).jqueryTab();
});

　↓　↓　↓　↓　↓

jQuery(function(){
jQuery(“#tab”).jqueryTab();
});

例えば上記の2つのコードは全く同じものになります。しかし、jQuery()とは記述せずに、$()エイリアスを使用して記述するのが一般的になります。

他のライブラリと競合（コンフリクト）を避ける

エイリアスである$()を使用するのが一般的と記載しましたが、$()が利用できない状況もあります。それはどのような状況かというと、MooToolsやprototype.jsといった他のJavaScriptライブラリと一緒にjQueryを使用する場合になります。例えばprototype.jsには$()という関数があり、$(“id”)のように記述して使用されます。もちろんjQueryと同じようにJavaScriptですから、jQueryの$()なのかprototype.jsの$()なのか分からずライブラリ間の競合（コンフリクト）が起こってしまいます。

そのためjQueryのコードでは、$()をjQueryと書き換えてしまえば、コンフリクトはおこらず、複数のライブラリを同時に利用することも可能です。しかしすべての$()をjQuery()に書き換えるのも面倒です。そこでコンフリクトを避ける記述法を記載してみます。

$(document).ready(function(){・・・})の省略形である$(function(){・・・})。これを下記のように書き換えることで、コンフリクトを避けることができます。

$(function(){
$(“#tab”).jqueryTab();
});

　↓　↓　↓　↓　↓

jQuery(function($){
$(“#tab”).jqueryTab();
});

このように記述すると、jQuery(function($){・・・})のブレース内に記述された$()は、jQuery()として扱われるようになります。

注意：テキストエディタの一括変換機能で、「$」を「jQuery」に置き換えてしまえばイイと考えるかもしれませんが、「$」記号は正規表現などでも利用されるので、注意が必要になります。

プラグイン化したメソッドの競合の避け方

前回、独自メソッドを作成する場合には下記のように記述していました。

$.fn.メソッド名 = function(){
・・・　省略　・・・
}

この記述も、下記のように「カプセル化」することでコンフリクトを避けることができます。

(function($){
$.fn.メソッド名 = function(){
・・・　省略　・・・
}
})(jQuery);

こちらも先ほどと同じように、(function($){・・・})(jQuery)のなかに記述された$()は、jQuery()として扱われます。プラグインを作成する場合は、このように(function($){・・・})(jQuery)で囲んでカプセル化することが作法となっています。もちろんjQueryのみを利用する環境ではなくても動作しますが、どんな状況でも動作するための保険として、カプセル化しておくことをオススメします。

といことで今回は、他のJavaScriptライブラリと一緒に使う場合のコンフリクトを避ける方法について、サンプルコードを交え記載いたしました。

jQueryだけを使っている時には、カプセル化などしなくても問題ありませんが、実際にページ制作をおこなう場合は、他のJavaScriptライブラリを併用することも多々ございます。その場合は、jQueryのカプセル化をおこなう配慮が必要になるので、ぜひとも覚えておくことをオススメします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。