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

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

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

no image

yuga.js で、別ウィンドウで開かないドメインを追加する方法。

「yuga.js」という jQuery プラグインが便利すぎて、最近ではほとんどデフォルトで使わせていただいています。 中でも重宝しているのが、「外部リンクの場合は別ウィンドウで開く」という機能。 余 …

no image

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

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

no image

JavaScriptによるシンプルなロールオーバー。

ものすごくシンプルで使いやすいロールオーバーをご紹介。 最近、特別な理由がない限りこの方法でロールオーバーの設定をしています。 オリジナル版 使うのは「CSS HappyLife」さんの「ソースがシン …

no image

リンクしているパスから JavaScript(jQuery)でファイル名を抽出する方法。

PHP には「basename()」や「dirname()」という便利な関数があり、それぞれファイル名とディレクトリ名を、指定したパスから抽出することができます。 しかし、JavaScript にそん …