jQueryとprototype.jsのオブジェクト構成

すべてのjQueryメソッドもそのプラグインも原則的に「jQuery」オブジェクトの内部に存在しています。 それに対して、グローバルなオブジェクトは、デフォルトでは、その「jQuery」と、jQueryのショートカットである 「$」のふたつだけです。

試しにFirefoxのデバック用アドオンであるFireBugを使ってDOM構造(ページのオブジェクト)を調べてみます。 まず、次のような単純にjquery.jsを読み込むだけのページを解析します。
<html>
<head>
<script src="./jquery.js" 
        type="text/javascript">
</script>
</head>
<body></body>
</html>
サンプル

jQueryのオブジェクト構成
jQueryのオブジェクト構成

このページを開いて、FireBugでDOMをみると上図のように表示されます。

太字で書かれた「jQuery」と「$」のふたつのカスタムオブジェクトがグローバル領域に存在していることを示しています。

jQueryでコードを書く時の変数などの名前は、このふたつの名前とバッティングしないことだけ気をつければ良いわけです。


次に、prototype.jsを調べます。

こちらも、次のような単純にprototype.jsを読み込むだけのページを作って開いてみます。
<html>
<head>
<script src="./prototype.js" 
        type="text/javascript">
</script>
</head>
<body></body>
</html>
サンプル

prototype.jsのオブジェクト構成
prototype.jsのオブジェクト構成

prototype.jsでは、多くのオブジェクトがグローバル領域に顔を出していますが、 このjQueryとの比較では、ポイントは、グローバル領域にどちらも「$」が存在してバッティングすることです。

(ちなみにprototype.jsの場合、このグローバル領域だけではなく、ネイティブなオブジェクトを拡張している部分にも注意が必要です)

試しに、ふたつのライブラリを併記して、$関数を実行してみます。
<html>
<head>
<script src="./prototype.js" 
        type="text/javascript">
</script>
<script src="./jquery.js" 
        type="text/javascript">
</script>

<script type="text/javascript">

  //jQueryコード
  $(function(){
    $("div").css("color","gold");
  });

</script>
<body>
<div>About noConflict</div>
</body>
</html>
サンプル

prototype.jsを先に書くと、jQueryは実行されて文字の色がgoldに変わりますが、prototype.js側でエラーが発生します。 もし逆にjquery.jsを先に書くと、jQueryの$がprototype.jsで上書きされるので、このjQueryコードは実行されません。

そこで、後発のjQueryには、この衝突を避ける仕組み jQuery.noConflict() メソッドが用意されています。

それを次ページで説明します。