めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

jQueryとPrototype.jsを併用/共存してみる

JavaScript

普段、お仕事ではPrototype.jsばかりを利用しています。だいたい事足りるからです。JavaScriptを強化/改造（？）して、使うあたりはプログラマー好みかもしれません。Prototype.jsは、ガンダムで例えるならGアーマーです。さらにいうなら、GP03がデンドロビュームになって「なんじゃこりゃ〜」と思える物でもあります。

MG 1/100 RX-78GP03S ガンダム試作3号機ステイメン (機動戦士ガンダム0083 STARDUST MEMORY)

MG 1/100 RX-78GP03S ガンダム試作3号機ステイメン (機動戦士ガンダム0083 STARDUST MEMORY)


HGUC 1/144 RX-78GP03 ガンダムGP03 デンドロビウム (機動戦士ガンダム0083 STARDUST MEMORY)

HGUC 1/144 RX-78GP03 ガンダムGP03 デンドロビウム (機動戦士ガンダム0083 STARDUST MEMORY)


そんなPrototype.jsですが、おそらくデザイナーさんには、不向きかもしれません。強化し過ぎで、何が何やら...AT車で快適なドライブというよりも、MT車で車を操作するの楽しむのがPrototype.jsのような感じだからかもしれません。

そこで、jQueryとPrototype.jsを併用してみることは可能なのか調べてみました。ポイントは、$()の取り扱いです。jQueryでは$がjQueryオブジェクトとされています。Prototype.jsの$()とかぶる訳です。そこで調べてみると、jQuery側が後発なのか、これを回避する手段が用意されていました。実際に試してみたのが、以下のソースです。

jQueryとPrototype.jsを併用/共存したHTML+JavaScript

  • Prototype.jsにより、「Prototype.js + jQuery」が「Prototype.js only」になります
  • jQuryによりtoggleボタンを押すと、赤いブロック要素が出てきます。もう一回押すと、消えます
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<style>
div {
     width: 200px;
     height: 200px;
     background: red;
     display: none;
}
</style>
<script type="text/javascript" charset="UTF-8" src="../lib/prototype.js"></script>
<script type="text/javascript" charset="UTF-8" src="../lib/jquery-1.3.2.js"></script>
</head>
<title>Prototype.js + jQuery TEST</title>
<body>
<h1 id="title">Prototype.js + jQuery</h1>

<p><button id="toggle">toggle</button></p>

<div>display:none</div>
<script type="text/javascript">
$(function(){
     jQuery('#toggle').click(function(){
          jQuery('div:not(:animated)').toggle();
     });
})

jQuery.noConflict();

function test(){
     $('title').innerHTML = 'Prototype.js Only';
}
window.onload = test;
</script>
</body>
</html>

併用するポイント

いくつかポイントがありました。これで、デザイナーさんとも仲良くJavaScriptを書く事が出来るかもしれません。

  • prototype.jsを先に読み込み、次にjQueryを読み込む
  • jQuery.noConflict();を実行します。これで回避が可能
    • jQuery.noConflict();の返り値を利用してスクリプトを書く事ができます
    • でも、面倒ではあるのでjQueryというオブジェクトを利用した方がいい。これだと、jQuery.noConflict();を利用していなくてもそのまま動く
    • プラグイン配布するのであれば、jQueryで書いた方がいいと思う（たぶん）