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()によるネームスペースの変更例を紹介します。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！