jQueryとprototype.jsを共存させる方法
AjaxやJavaScriptでDOMを使う機会がふえている。この技術の進化でデザインとプログラムという区切りが明確になったのか、あやふやになったのかはさておき、オープンソースのライブラリを使う機会は少なくない。
ここでは特に有名な2つのJavaScriptライブラリの共存方法をご紹介します。
いろんなサイトで紹介されているのすでに問題はないと思いますが、自分の備忘録的な形で残します。
prototype.jsとjQueryは実は競合（コンフリクト）します。通常に読み込んでも、イベントが発生してもエラーになることは少ないと思いますが、思ったとおりの処理が実行されない、いわゆる構文的には正しいがユーザーが期待する処理がされないということがあります（実行時エラーとか言いますが）。
その中でもそれぞれに共通して実装されている「$」という一見不思議なコード。
prototype.jsでは「window.document.getElementById」というメソッドの代用品として定義されています。一方jQueryではオブジェクトを参照す変数として定義されています（まったくの推測）。 この2つが競合してうまく動かないのです。え？ メソッドと変数は別物ですよねとお考えのあなた。私もそんなにしっかり見ていないので確証はないのですが、おそらく両方とも変数か何かに定義されているのでしょう。
これを競合させない方法です。
それでは実際のコードです。
<script type="text/javascript" src="./calendar/prototype.js"></script> <script type="text/javascript" src="./calendar/jquery.js"></script>
まず、読み込ませ方ですが、prototype.js、jQueryの順番で読み込ませます。
次にjQueryを読み込んだすぐあとに以下のコードを記述します。
<script type="text/javascript"> jQuery.noConflict(); var j$ = jQuery; </script>
このnoConflict()というメソッドはjQueryがもっているもので、何でも他のライブラリとの衝突を避けるためのものだそうです。そこで重要なのが次の行。jQueryが使っている$という部品を別の名前にします。サイトを回って見ると「$j」とかってしてるところもありますが、個人的にPerlやPHPの変数みたいな感じがするのであまりすきではありません。
あとはjQueryを利用したライブラリで定義されている$をすべてj$に変更します。ｊQueryの中身を変更してはいけません。
これでひとまずDOMの操作的には問題ないと思います。その他の処理については未確認ですがご容赦を。