毎日ソースとにらめっこの日々で、それなりに調べたり勉強したりしているが、実際に備忘録を書くとなると億劫になってしまう。
とはいえ、後で「あれどうだっけ？」と数多あるブログから探し出すより、自分のブログで管理している方が絶対に楽なはず。
でも、後で「あれどうだっけ？」と思うことってどのくらいあるのだろうか。
自分の記憶力と、その時必要とされるスキル、環境等々が合致した時なので早々はないけど。

 

今回はレアケースなので、本当にあれどうだっけ記事になりにくいけど、1週間後は確実に忘れることなのであえて記事に。

 

prototype.jsとjQueryを同時に使って競合を回避する方法。

そもそもprototype.js、古！！とか
prototype.jsってなんだ？
とかって感じになると思う。実際私もソースを見たときに「ん？んんん？お～懐かしい」と思った。

 

あるお客さんのサイトで、PHPでバリバリにシステムを構築しており、表示まわりはprototype.jsに頼っているというおよそ10年ほど前のサイト。
文字コードがshift-jisという骨董品。いや10年前ならEUCでしょ！とおもったらDBだけはEUCっぽい。
そして、不思議なことにトップページだけはjQueryを使っている。もう本当に勘弁してほしいサイト。

 

私のミッションはスマホ化だが、既存のシステムを考慮しながらのスマホ化なのでなかなかの難易度。しかも古いソース。
トップページから仕掛、メニュー表示等をjQueryで構築した後に中ページを見るとjQueryを使っておらずprototype.js。。しかもAjaxたっぷり。
ここで、トップページ用に作ったjQueryのソースを
1.Javascriptで書き直す
2.prototype.jsで書き直す
3.jQueryもprototype.jsも両方使えるようにする
の3択。
面倒なので3→1→2の順に検討することに。

 

で今回のお題のjQueryとprototype.jsの競合回避に至る。
そもそも、1サイトでJSライブラリーを2つも使うという設計ミスともいえる状況が腹立たしいがぼやいても仕方がない。

 

jQueryもprototype.jsもJavascriptのライブラリのため、おのずと書き方は近い、というかほぼ同じ。
なので、このfunctionはprototype.js？このfunctionはjQuery？と両方を使おうとすると競合し、どちらかの表示に弊害がでる。
今回はprototype.jsの影響範囲が不明なので、jQuery側を変更する方法で実装。

 

まずはheadタグ内の記述。
まずはprototype.jsを宣言し、その後でjQueryを宣言する。後で記述したものが優先されるため、この段階でjQueryが優先される。
その後に競合回避のための記述

<script type="text/javascript">  
jQuery.noConflict();  
var j$ = jQuery;  
</script>

次にjsファイルを読み込む。

競合（conflict）をなくすために、jQuery側の記述ルールを変更するという宣言になる。
通常は

$(function() {
});

という記述だが、これを

j$(function() {
});

と$の前にjをつけて区別する。

 

これで、jQueryとprototype.jsの競合を回避できる。
まあ、jQueryとprototype.jsを両方使うなんて今後のサイトでは絶対と言っていいほどあり得ないが、過去のサイトではまだまだ可能性は0ではないので、もうこんなことしなくて済みますようにというお祓いも兼ねて。