jQueryを他のJSライブラリと共存させる方法

$(function (){
  /*処理を記述　たとえば...*/
  $('button').click(function(){
    $('div#target').show();
  });
});

を表示するという簡単なものですが、この中でも3つ$記号が使われています。
専門用語は弱いので、端折りますが、jQueryだけでなく、$に特別な意味を持たせて使っているJavaScriptライブラリはいくつかあるようです。
よく見聞きするものでは、prototype.jsなどがあります。使ったことはないので詳しくは語れませんが…。

そのため、他のライブラリと同時に使った場合、$に違う意味が与えられてしまうため、jQueryが動かなくなってしまうようです。コンフリクトとかいうそうですが、古いMacユーザーには懐かしい響きです。
では、このような場合、どうしたらよいのでしょう。

対策1:ここは穏便におねがいします。〜jQuery.noconflict();を使う その1〜

コンフリクト(衝突)して動かなくなってしまうので
jQuery.noConflict()関数というのを使って$を使うのを遠慮します。
これは、$という文字をjQueryに置き換えてしまうような感じです。
（実際はjQueryの省略が$らしいですが… ）

サンプル2

jQuery.noconflict();
jQuery(function (){
	/*処理を記述 例えば...*/
	jQuery('button').click(function(){
		jQuery('div#target').show();
	});
});

これで、他のライブラリと共存して、jQueryが動くようです。ただ
このままでは、jQueryが長すぎるので別の文字に置き換えることもできます。

対策2:対策1のjQueryを他の文字に置き換える 〜jQuery.noconflict();を使う その2〜

var j = jQuery.noconflict();
j(function (){
	/*処理を記述たとえば...*/
	j('button').click(function(){
		j('div#target').show();
	});
});

配布されているjQueryプラグインのソースを見ると、使われている場合があるのでそれらを参考にするのもいいかもしれませんね。

対策3 :それでも$を使いたい 〜(function($) {})(jQuery);で囲む〜

これで問題は解消しました。が、過去の資産を使おうとした場合、すべて置き換えなくてはならないため非常に手間がかかりますね。
そこで、$記号が使える範囲を一定の範囲内に限定することにより使えるようにする方法があります。
サンプル3

(function($) {
  $(function (){
    /*処理を記述たとえば...*/
    $('button').click(function(){
      $('div#target').show();
    });
  });
})(jQuery);

「(function($) {」と「})(jQuery);」の中でのみ$記号がjQueryの働きをして外側には影響を及ぼさないようです。
この方法、最初はすごく苦手だったんです。
ちゃんと書いてるつもりだったのに動かない。なんでだー？！ってなって、あきらめて1の方法で仕方なく作業したこともあったのですが、
最近気づきました。これ↓

$(function (){

});

を入れ忘れていたらしいということに。(function($)って打つと似てるから忘れちゃってたみたいです。
これは、ページの読み込みが完了したらjQueryを動かしますというお約束の文字列なので入ってなかったら動くわけない。

調べ始めたときは、対策3が本命だと思ってたのですが、有名なjQueryプラグインでも対策2のものがあったりするのでどれがベストなのかは決めかねてます。

今までjQueryのコーディングの勉強してるだけなら気にすることはなかったのに、一歩外へ出てみると気をつけることが増えますね。
例えば、CMSなどに組み込む場合は注意が必要みたいですね。

参考サイト

jQuery.noConflict() – jQuery 日本語リファレンス