2013年3月4日、ブログは以下のURLに移行しました。最新の記事はこちらで公開しています。
新しいブログでは、コメントやリンクが一部切れていたり、一部機能が調整中です。
新しいブログへ

jQueryとprototype.jsを共存させる方法

投稿日:2008.08.13 / カテゴリ:JavaScript / 投稿者:Tom Goodsun

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$に変更します。jQueryの中身を変更してはいけません。

これでひとまずDOMの操作的には問題ないと思います。その他の処理については未確認ですがご容赦を。

コメント

2010.01.24 11:32:48 スネーク

助かりました!

有難うございます!

2010.08.31 18:28:26 yokoring

同じく、助かりました!Thanx!

2010.12.20 15:19:57 progmasa

二日間かかって解決出来なかったのですが、おかげで解決しました。
ありがとうございます。
尚、URLは、開発機のものですので、電源が入っていない時が有ります。
完成したら、既存サイトに組み込みますが、必要ならお知らせ致します。

2011.10.07 15:02:09 みこ

参考にさせて頂きました。ありがとうございます。
グーグルクロームでは「jQuery」の動作ができませんでした。
何か他に設定があるのでしょうか?
ちなみに「prototype.js」は全て動きました。
このアイテムは閲覧専用です。コメントの投稿、投票はできません。