BLOGスタッフブログ

インソースマーケティングデザイン

2014.11.18 コーディング

prototype.jsとjQueryの競合を避ける!

こんにちは。新人デザイナーの虎澤です。

デザイナー…なのですが、今回はデザインとは関係無いお話をひとつさせていただきたいと思います。

☆prototype.jsとjQueryの競合を回避する方法

先日、業務の中でprototype.jsとjQueryの両方を取り入れなければならないケースに遭いました。

そこではまってしまったのがこのふたつの競合です。

どうやら、このふたつを使いつつ「$」を書くとエラーがでてスクリプトが動作しなくなってしまうようです。

なぜエラーになるかというと…。

prototype.jsでは、$は「document.getElementById」として扱われ、jQueryでは、$はjQueryオブジェクトを指します。

それぞれで$の役割が全く異なり、取得できる要素が違ってくるためなのだそうです。

さて、原因がわかったところで、どうすればこのふたつの競合を回避できるのか?

方法は二通り。

●prototype.js をjQueryよりも先にロードするように記述し、「$」と記述するところを「jQuery」にする

●jQuery.noConflict()を使う

具体的な書き方は、こちらのサイトなどで詳しく解説されています。

これでまたひとつ勉強になりました。

まだまだ勉強しなくてはならないことだらけですね!

日々精進してまいります。

以上、虎澤でした!

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します