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

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

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

no image

IE6、IE7 で「識別子、文字列または数がありません」というスクリプトエラーが発生する。

最近 jQuery を使うことが多く、それに伴ってデバッグ作業が増えてきました。 その中でもちょくちょく目にするのが「識別子、文字列または数がありません」というエラー。 主に IE6、IE7 で発生し …

no image

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

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

no image

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、 …

no image

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

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