株式会社RJC　技術サイト

$の競合

これまでに「$」とは何なのか解説してきましたが、$がただの変数名なら、同じ$という変数名を他で使っていたらどうなるのでしょうか。
ローカル変数ならともかく、グローバル変数で同じ変数名を使った場合どうなるのか、
結論から言うと「後勝ち」になります。jQueryと、「$」というグローバル変数を使う他の何か（例えばprototype.js）のどちらか「後に読み込んだ方に上書き」されます。
「jQuery」も「prototype.js」も両方を使う必要に迫られた場合、どうすれば良いか解説します。
まず、「$」は「jQuery」の別名であることを思い出してください。
そして、jQueryには「$」という変数名が競合した場合に備えてnoConflict関数が用意されています。
具体的には次のコードでprototype.jsとjQueryの両方を使用することができます。

<script src="prototype.js"></script>
<script src="prototype-plugin.js"></script>
<script src="jquery-1.11.2.js"></script>
<script>
	jQuery.noConflict();
	var $j = jQuery;
</script>
<script src="main.js"></script>

HTMLで外部JavaScriptファイルを読み込む順番に気をつけてください。
まず、「$」という変数を使う他の何か（今回はprototype.jsとそのプラグイン）を先に記述します。
その後でjQueryを読み込みnoConflict関数を実行、「$j」という新たなjQueryの別名を作ります。
これで、その後に読み込むmain.jsの中でprototype.jsを使うときは「$」、jQueryを使うときは「jQuery」や「$j」で使うことができます。
ちなみに、同じ方法でjQueryの複数のバージョンを共存させることができます。
その場合、「$」だけでなく「jQuery」も競合するため、noConflict関数にtrueを渡して「jQuery」も元の値に戻します。

<script src="jquery-1.11.2.js"></script>
<script src="jquery-2.1.3.js"></script>
<script>
	var jq213 = jQuery.noConflict(true);
</script>
<script src="main.js"></script>

これで「$」や「jQuery」でバージョン1.11.2のjQuery、「jq213」でバージョン2.1.3のjQueryを使うことができます。
さて、$関数が身近に感じられたところで、$関数に関数を渡すとreadyイベントに登録されると説明したことを思い出してください。
これは既に学んだ通り、$関数が「$(document).ready」関数のショートカットになっているからです。
では、$関数に関数以外を渡したらどうなるのか次のページで解説します。

TOPへ戻る