読者です 読者をやめる 読者になる 読者になる

/var/www/yatta47.log

やったのログ置場です。スクラップみたいな短編が多いかと。

prototype.jsって・・・・なに?

ちょっとボーっと考えていたことで、jQueryを使えば出来るじゃんと思っていて、HTMLみてscript内に読み込んでいるかな〜と思ってみていたら、jQueryは読み込んでいなくて、prototype.jsを読み込んでいるのがあった。

そこで、「prototype.js?どんなライブラリなんだろう?」と最近JavaScriptのライブラリにハマっている自分としては調べずにはいられなくて調べ出したらなにやらjQueryと競合するとの情報が!!

ってことでわかったことをφ(..)メモメモ。

 

そもそもPrototype.jsとは?

困ったときのGoogle先生に聞いてみた。

まず最初に見たページがこちら。

そうなのか・・・・かなり古くからあるのね。そしてJavaScriptフレームワークなんだね。確かに公式ホームページも Prototype JavaScript framework: a foundation for ambitious web applications ってなってる。

そして次に見たページ。

このサイトではJSライブラリについての人気グラフが出ていた。非常に面白い。ってかjQuery圧勝じゃん。

最後は困ったときのWikipedia

Prototype JavaScript Framework - Wikipedia

Prototype JavaScript Framework は、Sam Stephenson が開発したJavaScriptフレームワークであり、Ajaxフレームワークやその他のユーティリティを提供する。prototype.js という名前の1つのJavaScriptファイルで実装されている。

ふむ。フレームワークなんだな。prototype.jsを読み込んでおけば色々と便利ということだ。(身も蓋もない理解ww

ちなみに上記のWikipeiaで続きを読んでいて「フレームワークとライブラリって何が違うんだ?」というのが気になりだした。

自分の中ではライブラリというのも色々便利レベルの理解。

それもWikipediaが解決してくれた。

ソフトウェアフレームワーク - Wikipedia

ソフトウェアフレームワークは、はっきり定義されたAPIを持ち、コードを再利用可能な形で隠蔽しているという点でライブラリとよく似ている。しかし、ライブラリでは呼び出し側がプログラム全体の制御構造を指定できないが、フレームワークでは可能である。この制御の反転がソフトウェアフレームワークの特筆すべき特徴である

フレームワークは呼び出し側が上に乗る感じで、ライブラリは呼び出し側と並列ってイメージ。

f:id:yatta47:20150122231852p:plain

では、jQueryとの違いは何?

それはこちらの2つのサイトが分かりやすかった。

jQueryはクラスライブラリ、prototype.jsフレームワーク(の基盤)と思います。

prototype.js:DOMオブジェクトを返す
jQuery:独自のオブジェクト(jQueryオブジェクト)を返す

そうなんだね〜。さっきちょうど気になったところがまさに違いだったと。ライブラリなのかフレームワークなのか。全体の制御構造を指定できる/出来ないというのが大きな違いということか。

 

競合する(コンフリクト)するらしい。

このページが本当分かりやすかった。jQueryprototype.jsは競合することがあるらしい。その原因は各ライブラリの「$」の扱い

prototype.jsだと$はdocument.getElementByIdとして扱われる。jQueryでは$は「jQueryオブジェクト」として扱われる。

その違いによりうまく動かないことがあるらしい。そりゃそうだわな。構文的におかしなことになる。

 

ではそれを解決するには?

先人者達の知恵を有難く拝借。みなさん、わかりやすく解決策公開してくれてるわ〜。

簡単に言ってしまうと、
jQuery.noConflict()を追加して、jQueryだよーというコードを追加する。
・$の扱いをprototype.jsに特定して、jQueryの場合は$は使わない。
の2つの解決方法があるらしい。

まだそういう問題に遭遇したわけじゃないのでまだ机上レベルの知識だけど、この問題にぶち当たった時にはこの記事を書いたことを思い出して解決できるようにするための備忘録でした。

jQueryはちょくちょく使っているけど、そもそもprototype.jsの使い方がよくわからない。

今度使ってみよう。

広告を非表示にする
Real Time Web Analytics