jQuery逆引きリファレンス

jQuery逆引きリファレンス

jQueryを他のライブラリと共存させるには?(jQuery.noConflict)

2017年3月23日

他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。

  • このエントリーをはてなブックマークに追加

 jQueryでは、他のライブラリとの競合を避けるために、グローバル変数は最小限となるように考慮されています。jQueryが公開しているグローバル変数は、じつにjQueryとそのエイリアスである$にすぎません。これによって、他のライブラリとの競合を最大限回避しているわけです。

 もっとも、そのjQueryですら、例えばprototype.jsなどと共存させる場合には要注意です。prototype.jsであれば、グローバル関数$を持つため、名前が衝突してしまうのです。jQueryでは、このような競合を回避するために、jQuery.noConflictというメソッドを用意しています。

 まずは、具体的な例を見ていきましょう。以下は、jQueryとprototype.jsとを同一のページで利用する例です。

HTML
<!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とprototype.jsとを同じページで利用する例(noConflict_proto.html)
jQueryとprototype.jsの結果を反映
jQueryとprototype.jsの結果を反映

 jQuery.noConflictメソッドを引数なしで呼び出した場合には、jQueryの$だけが無効化されます。この場合、jQueryの機能は全て「jQuery~」で呼び出します(1)。

 また、prototype.jsの$()関数が正しく動作する点も確認してください。

「jQuery」に別名を付けたい場合

 ただし、「jQuery」という名前が冗長で、毎度タイプするのは避けたい思う人もいるでしょう。その場合は、名前「jQuery」に別名を与えることもできます。

 以下は、先ほどの例を別名記法で書き換えたものです。

JavaScript
// 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';
});
「jQuery」に別名を与える例(noConflict_alias.html)

 別名を与えるには、noConflictメソッドの戻り値を別名(変数)に代入するだけです(1)。これによって、この例であれば$jでjQueryの機能にアクセスできるようになります。

 なお、上のコードで指定しているnoConflictメソッドの引数trueは「名前『jQuery』『$』を無効化する」という意味です(この場合、「jQuery~」のように名前「jQuery」を使用することはできません)。

 果たして、2でも$jで正しくjQueryを利用できていることが確認できます。

「jQuery」を使ったコードを即時関数でくくる

 冗長な名前「jQuery」を使いたくない場合の別解として、即時関数*1を利用する方法もあります。

  • *1 関数を、変数のスコープを閉じ込める枠組みとして利用するJavaScriptのイディオム。定義した関数をその場で実行する構文から、このように呼ばれます。
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';
});
jQueryのコードを即時関数でくくったコード(noConflict_immed.html)

 太字の部分「(function($) {~})(jQuery);」が即時関数です(1)。即時関数の仮引数$に対して、jQueryオブジェクトを渡すことで、即時関数の中ではこれまで通り、$でjQueryの機能にアクセスできるわけです(2)。

 即時関数の外では、確かに$が(jQueryではなく)prototype.jsを指している点(3)にも注目です。

処理対象:jQuery名前衝突の回避 カテゴリ:ユーティリティ
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で複数のバージョンをロードする方法を説明する。

69. 要素セットを指定の条件で絞り込むには?(filter)

filterメソッドを使って、jQueryオブジェクトで保持している現在の要素セットを、指定された条件で絞り込む方法を説明する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社