jQuery逆引きリファレンス
jQueryを他のライブラリと共存させるには？（jQuery.noConflict）
他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。
jQueryでは、他のライブラリとの競合を避けるために、グローバル変数は最小限となるように考慮されています。jQueryが公開しているグローバル変数は、じつにjQueryとそのエイリアスである$にすぎません。これによって、他のライブラリとの競合を最大限回避しているわけです。
もっとも、そのjQueryですら、例えばprototype.jsなどと共存させる場合には要注意です。prototype.jsであれば、グローバル関数$を持つため、名前が衝突してしまうのです。jQueryでは、このような競合を回避するために、jQuery.noConflictというメソッドを用意しています。
まずは、具体的な例を見ていきましょう。以下は、jQueryとprototype.jsとを同一のページで利用する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul id="books">
<li class="new">ASP.NET MVC実践プログラミング</li>
<li>10日でおぼえるjQuery入門教室</li>
<li>JavaScript本格入門</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script>
// jQueryの$関数を無効化
jQuery.noConflict();
// 1jQueryの機能は「jQuery～」でのみ呼び出せる
jQuery(function() {
jQuery('li.new').css({ backgroundColor: 'Yellow', color: 'Red'});
// 2prototype.jsの$()関数が正しく呼び出せる
$('books').style.border = 'double 1px #F00';
});
</script>
</body>
</html>
|
jQuery.noConflictメソッドを引数なしで呼び出した場合には、jQueryの$だけが無効化されます。この場合、jQueryの機能は全て「jQuery～」で呼び出します（1）。
また、prototype.jsの$()関数が正しく動作する点も確認してください。
「jQuery」に別名を付けたい場合
ただし、「jQuery」という名前が冗長で、毎度タイプするのは避けたい思う人もいるでしょう。その場合は、名前「jQuery」に別名を与えることもできます。
以下は、先ほどの例を別名記法で書き換えたものです。
|
// 1「jQuery」に別名「$j」を付与
var $j = jQuery.noConflict(true);
// 2「$j」でjQueryの機能を呼び出す
$j(function() {
$j('li.new').css({ backgroundColor: 'Yellow', color: 'Red'});
$('books').style.border = 'double 1px #F00';
});
|
別名を与えるには、noConflictメソッドの戻り値を別名（変数）に代入するだけです（1）。これによって、この例であれば$jでjQueryの機能にアクセスできるようになります。
なお、上のコードで指定しているnoConflictメソッドの引数trueは「名前『jQuery』『$』を無効化する」という意味です（この場合、「jQuery～」のように名前「jQuery」を使用することはできません）。
果たして、2でも$jで正しくjQueryを利用できていることが確認できます。
「jQuery」を使ったコードを即時関数でくくる
冗長な名前「jQuery」を使いたくない場合の別解として、即時関数*1を利用する方法もあります。
- *1 関数を、変数のスコープを閉じ込める枠組みとして利用するJavaScriptのイディオム。定義した関数をその場で実行する構文から、このように呼ばれます。
|
// jQueryの$関数を無効化
jQuery.noConflict();
jQuery(function() {
// 1即時関数の引数にjQueryを与える（仮引数は「$」）
(function($) {
// 2jQueryの機能に「$」でアクセスできる
$('li.new').css({ backgroundColor: 'Yellow', color: 'Red'});
})(jQuery);
// 3prototype.jsの機能にも「$」でアクセスできる
$('books').style.border = 'double 1px #F00';
});
|
太字の部分「(function($) {～})(jQuery);」が即時関数です（1）。即時関数の仮引数$に対して、jQueryオブジェクトを渡すことで、即時関数の中ではこれまで通り、$でjQueryの機能にアクセスできるわけです（2）。
即時関数の外では、確かに$が（jQueryではなく）prototype.jsを指している点（3）にも注目です。
API：window.jQueryオブジェクト カテゴリ：Types（型）
API：jQuery()｜$() カテゴリ：Core（コア）
API：jQuery.noConflict() カテゴリ：Core（コア） ｜その他（Miscellaneous）> セットアップメソッド（Setup Methods）
※以下では、本稿の前後を合わせて5回分（第65回～第69回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
65. イベントリスナーをそのままに、要素を削除するには？（detach）
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除／再生成ではなく、非表示／表示の利用推奨についても言及する。
66. 特定のAjax通信でのみグローバルイベントを無効化するには？（$.ajax［global］）
Ajax通信の開始／終了／成功／失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。
67. 【現在、表示中】≫ jQueryを他のライブラリと共存させるには？（jQuery.noConflict）
他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。
68. 異なるバージョンのjQueryを共存させるには？（jQuery.noConflict）
jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。
