November 17, 2006 10:46 PM by ooi1

大井宏友です。

AJAX開発のライブラリとしてメジャーなprototype.js。 僕はAJAXじゃないJavaScript開発をする際にも結構便利なのでよく使用しているのですが、 ThickBoxというJavaScriptライブラリと共存しようとするとコンフリクトしてしまうことが分かりました。

prototype.jsが便利なわけ

もともとはAJAXのためのJavaScriptライブラリなわけですが、それだけではなく、

1. DOM要素へのアクセスが簡単
2. イベントリスナー登録
3. マルチブラウザ対応(IE/FF/Safari/...)

というところ、特に3番目はブラウザ判別をして別々のロジックを書かなくてもいいので非常に便利、ついつい使ってしまいます。

ThickBoxはHTMLページもLightBoxチックに表示

サムネイル画像をクリックすると画像を画面遷移なしに拡大表示するLightBox.jsという有名なライブラリがありますが、 ThickBoxはそれと似た動きを画像だけでなくHTMLページにもつけることができます。

このThickBoxは、 URLを見ると分かるとおり、jQueryという別のJavaScriptライブラリのデモとして作られていたりします。

prototype.jsとjQueryの「$()」の違い

jQueryは、prototype.jsに触発されて開発したという、 prototype.js同様JavaScriptプログラミングを楽にするためのライブラリで大体似たような機能＋視覚効果を与える機能を提供していて、 関数名も似ていたりするのですが、動きが少し違います。

prototype.jsの$()はID要素へのショートカット

$("test")は、document.getElementById("test")のショートカットです。 また似た関数に$F("test")というのがあって、これはフォーム要素（textareaとか、ラジオボタンとか） の値を取得するもので、document.getElementById("test").valueのショートカットになります。

どちらもdocument.getElementByIdという長ったらしい決まり文句が１～２文字だけに置き換えることができるので重宝します。

jQueryの$()は多機能

$("test")と指定すると、まずtestというタグの要素を探しにいって、なかったらIDがtestという要素を探しに行く、 という動きをします。後者はprototype.jsと同じような動きですが、前者はたとえば$("p").css("font", "12px Courier")とすると全てのpタグのスタイルを変更できたりします。

また初期化として

$(document).onready( function(){
　　//初期化系の処理
})

と書くのがおまじないのようで、これはprototype.jsにはまったくない機能かなあと思います。

両方使ってみると…

prototype.jsとThickBoxを両方使いたいので、まずjQueryをリンクし、 次にprototypeをリンクしてみました。すると、ThickBoxの初期化で$(document)を使っているため、 エラーになります。prototype.jsを後に書いたため、$()関数はprototype.jsのものがイキになっているので当たり前ですね。

では逆にprototype.jsのあとにjQueryをリンクすると（これが推奨らしい）、$("test")、 $F("test")とID要素名でDOMにアクセスしていた部分がエラーになってしまいます。

両者を共存するには?

$()関数を使うときはjQueryの仕様にあわせる感じがよいと思います。

ただ、今回僕がこの問題に遭遇したときがそうだったのですが、prototype.jsだけで実装とテストを進めてきて、 最後の最後でヘルプ画面をかっこよく出すためにThickBoxを適用した場合は、jQuery仕様に書き直すのはちょっとリスキー。 そんな場合はあえて$()ショートカットをやめて、document.getElementByIdで書き直すのも男らしいと思います。

参考ページ

• http://fladdict.net/blog/2006/06/jsjquery1.html
• http://rakuto.blogspot.com/2006/02/jquery-prototypejavascript.html

tags：JavaScript  jQuery  LightBox  prototype  ThickBox