【Labs】prototypeとjQuery

こんにちは（￢ｖ￢）

今回はPrototypeとjQueryについてです。

最近のWeb制作においてJavaScriptは欠かせない存在となりました。そのJavaScript/Ajaxの中でも特にprototypeとjQueryといったフレームワークやライブラリはWeb制作の現場において必須項目となりつつあります。

今回そのprototypeやjQueryを使うために必要な準備について解説します。

prototypeとjQuery

prototypeの導入

prototype.js(http://www.prototypejs.org/)を公式サイトからダウンロードします。

ダウンロードしたファイルを任意の場所に保存します。ここでは「/common/js/」にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。

ファイル名はダウンロードしたファイル名を入力します。

今回ダウンロードしたファイルはprototype.jsなのでそれがファイル名になります。

<script src="/common/js/prototype.js"></script>

これでprototypeが使えるようになりました。

jQueryの導入

jquery.js(http://jquery.com/)を公式サイトからダウンロードします。

ダウンロードしたファイルを任意の場所に保存します。ここでは/common/js/にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。ファイル名はダウンロードしたファイル名を入力します。今回ダウンロードしたファイルはjquery-1.8.2.min.jsなのでそれがファイル名になります。

<script src="/common/js/jquery-1.8.2.min.js"></script>

これでjQueryが使えるようになりました。

prototypeとjQueryの共存

prototypeとjQueryは競合(コンフリクト)します。なのでprototypeとjQueryを一緒に使うことはできません。サイト設計の段階でどちらのライブラリを使うか決めておかなければなりません。

ただ、どうしても使わざるおえない場合があります。その場合の対処方法です。

jQueryにはjQuery.noConflict()という関数がありますのでそれを使ってprototypeとjQueryを共存させます。

まずprototypeとjQueryを読み込みます。prototype、jQueryの順で読み込ませます。prototypeのプラグインもjQueryの前に読み込ませます。

<script src="/common/js/prototype.js"></script>
<script src="/common/js/prototypeのプラグイン.js"></script>
<script src="/common/js/jquery.js"></script>

jQueryを読み込んだ後に次のコードを読み込ませます。

<script>
var j$ = jQuery.noConflict();//引数にtrueを指定すると$、jQuery共に無効になる。
</script>

あとは使用するjQueryのライブラリで定義されている$をj$に全置換すればprototypeとjQueryが共存できるようになります。

Result

サンプルデモ