btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

JavaScript・jQuery

jQueryとprototype.jsを同時に使うには

投稿日:

最近、JavaScriptのライブラリを使って動きを付けたりすることが多くなってきました。
特に多用するのが、ライブラリの代表格である「jQuery」と「prototype.js」の2つ。
ただ、どちらも「$」関数を使用しているため、これらのライブラリを同時に使うと正常に動作しません。

しかし、jQueryには他のライブラリと共存するための回避策が初めから用意されているのです。

すごいぞ、jQuery!

jQuery.noConflict() を使って「$」の衝突回避

今回、参考にしたのは以下のサイトです。

で、いろいろ調べていろいろ考えた挙げ句、僕が実際に使ってる(使わせていただいている)のは以下のコードです。

<script><!--
jQuery.noConflict();
jQuery(document).ready(function($){
	// ここでは、$はjQueryとして使えます。
});
// ここでは、$はprototype.jsの動作をします。
//--></script>

他にも状況に応じていくつか方法があるみたいです。
が、「ほとんどの場合で問題なく動くであろう」ということと、「一番単純で簡潔っぽい」ということを理由に、上記を採用。

複数のサイトで導入しましたが、今のところちゃんと動いています。

jQuery.noConflict() を使うことによって発生する不具合

jQuery.noConflict() は非常に便利なのですが、油断しているとこういうこと↓もあるみたいです。
jQuery.noConflictで罠 – masahilog

上記コードのように「$」を「jQuery」に置き換えてしまうと、「$」使用が前提のライブラリが動かなくなってしまう、ということですね。
当たり前っちゃ当たり前なんでしょうけど(でも事前に気づく自信なし)。

解決策としては、ライブラリ内も同じように「$」を「jQuery」に置き換えてしまうと大丈夫のようです。
実際そういう場面に直面したことがないので何とも言えないですが。

でもこの先いつかぶち当たってしまうそうなので、とりあえず備忘的メモ。

雑感

今回はいつにも増して「らしい」とか「みたい」が多いような気がします。

プログラミングもちゃんと勉強しないとだなぁ。







-JavaScript・jQuery
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

yuga.js という非常に便利な JavaScript があります。 多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例 …

no image

JSライブラリ「jQuery」と「prototype.js」の特徴。

数あるJavascriptライブラリの中で代表的な「jQuery」と「prototype.js」。 今までは何らかの機能が必要になった際にググったり本で調べたりして、見付けたものをベースに何とか形にし …

no image

ActionScript 3.0 で Javascript を呼び出してウィンドウを閉じる方法。

ググっても情報がなぜか少ないので、とりあえずメモ的にアップ。 window.open() なんかで開いたサブウィンドウを、テキストリンクやボタンで閉じるための方法です。 HTML でウィンドウを閉じる …

no image

yuga.js で、外部リンクを別ウィンドウで開く機能を area 要素にも適用する方法。

小ネタです。 JavaScript が分かる人なら何の造作もないことなんですけど、分からなくて困ってる人が居るかも知れないので一応メモ。

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …