Javascript

【Javascript】他のコードとの衝突を避けるテクニック

Javascript関連情報

更新日：2007年11月23日

他のコードとの衝突を避けるテクニック

高橋登史朗

jQueryとprototype.jsやYahoo!UI(YUI)など他のコードとを併用する場合の注意点と作法をみておきます。 jQueryのメソッドを使い、jQueryという名前そのものを変更して他のライブラリへ組み込むこともできます。

jQuery.noConflict()で衝突を回避する

他のライブラリの$関数などとの衝突を避けるためのメソッドnoConflict()を使ってみます。このメソッドは、最初にjQuery以外のライブラリがロードされて、次にjQueryをロードした後で実行することで機能します。

(この読み込みの順番は、「$」の衝突回避の場合には必須です)

  <script src="./prototype.js">
  <script src="./jquery.js">
  
  <div id="test">Hoge Hoge</div>
  
  <script>
  
     jQuery.noConflict();

     //jQuery用コード
     jQuery("div").css("color","red");
     
     //prototype.js用コード
     $('test').style.fontSize = '3em';
     
  </script>

→サンプル

これで、jQueryの$は機能しなくなり、$関数は、prototype.jsのものが動作するようになります。

jQueryは、$("div")と書いていたものをショートカットを使わずにjQuery("div")などと書きます。

prototype.jsの方は、普通に$関数を使用できます。

では、jQuery.noConflict()が実行されたときに、jQueryのオブジェクト構成はどうなるのでしょう？シンプルなコードを使って、「通常のjQuery」と「noConflict()した場合」の違いを、もう一度、FireBugで見てみます。

【通常のjQuery】

<html>
<head>
<script src="./jquery.js" 
        type="text/javascript">
</script>
</head>
<body></body>
</html>

→サンプル

通常のjQuery

通常の場合は、「$」と「jQuery」がともに存在しています。では、次に、noConflict()した場合です。

【noConflict()した場合】

<html>
<head>
<script src="./jquery.js" 
        type="text/javascript">
</script>
<script type="text/javascript">

  jQuery.noConflict();

</script>
</head>
<body></body>
</html>

→サンプル

noConflict()した場合

noConflict()を実行すると、オブジェクト(function)だった「$」がundefind(未定義)な状態に変わっています。

prototype.jsなど$オブジェクトを持つライブラリを併記すると、このundefindな「$」がそのライブラリ、たとえばprototype.jsの「$」になります。

簡単に説明すると、jQueryは、jquery.jsが読み込まれたときに、最初に、$オブジェクトを見つけると、それをローカル変数「_$」へ一時退避します。その後、 jQuery.noConflict()が実行されると、window.$ = _$ というスクリプトで、グローバルな「$」として元に戻すのです。

これにより、prototype.jsなどの「$」は、一時、ローカルな「_$」になり、その後、もし、jQuery.noConflict()されると復活する、という仕組みになっています。

また、jQuery.noConflict()は、引数にtrueを渡すと、jQueryを返しつつ、jQueryをundefind化しますので、次ページ4番目のサンプルのように、全く新しいネームスペースをjQuery用に作成することもできるようになっています。

では、次にjQuery.noConflict()によるネームスペースの変更例を紹介します。

回答募集中のトピック（お題）

男のカバン完全カタログ

ビジネススタイルは、スーツの着こなしのルールを遵守しつつ、小物で個性を打ち出すのがセオリー。だからこそ、比較的自由度の高いバッグが重要だ。そこで今回は、「ブリーフケース」と「トートバッグ」という今おすすめのタイプから15点ずつアイテムをピックアップ。品質や素材が秀でているだけでなく、機能面も優れる才色兼備な逸品を厳選した。バッグを新調するだけで、不思議なほど心躍る。

For M タブレット版アプリvol.16配信中！

フライパン一つの超簡単男メシ

楽しく痩せるスポーツアイテム

速報！メンズファッションニュース

人気Javascriptランキング