• ベストアンサー

JqueryとPrototypeの比較

スマートフォン向けサイトを作るにあたって、 Javascriptを使って動きのあるサイトを作成したいと思っています。 JqueryとPrototypeのどちらかを使って作る場合、 それぞれのメリットやデメリットなどがありましたら、 教えていただけないでしょうか？

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

JqueryとPrototypeどちらも一長一短といった所です。 はっきりいうと作りたい物や開発環境によって変えるのがいいです。 またどちらも共存して使う事も可能ですが出来れば統一した方がいいでしょう。 まずJqueryのメリットですが 視覚的なエフェクトに関してはprottypeにくらべてはるかに優秀です。 protypeがid要素のみにしか指定できないのに対して、classやtagなども指定できるので cssのような感覚でビジュアルのエフェクトを構築できます。 質問者のように動きのあるサイトを作成したいという事であればこちらのが いいかもしれません。 prottypeのメリットとしては jqueryに比べ、初心者にはとっつきにくい箇所がありますが JAVAなどのオブジェクト指向型コードをバリバリやってきた人にとっては こちらのが理解しやすいと思います。 またjavascriptの持ち味である非同期通信などもこちらのがわかりやすく操作しやすいです。 前述したメリットは逆に言えば反対にデメリットと受け取ってもらってかまいません。 また大規模開発なでフレームワークなどを使う場合はなど jqueryは標準でsymfonyなどをバインドしていたりとそれぞれ特徴もあります。 ご自身の開発環境等と照らして調べてみてください。 個人的にスマホ向けサイトで動きのある～という事ですし どちらも初めてという事であればjqueryをお勧めします。

TMEspion
質問者

お礼

回答ありがとうございます。 >どちらも一長一短 こちらでも調べてはみたのですが、その様ですね。 >classやtagなども指定できるのでcssのような感覚 普段、ウェブサイトのコーディングをしているので、 これはかなりポイント高いです。 サンプルをダウンロードして使う程度とはいえ、 Jqueryはある程度触った事があるので、 知らないPrototypeを始めるよりも 少しは知っているJqueryの方を勉強していこうかと思います。

その他の回答 (3)

noname#140045
noname#140045
回答No.4

No.1です。 チョット補足ですが、私の書いたのは、自分でプログラミングする時の話をしています。 （つまり、プラグインのように出来合のものを組み込むのでなく） また、jQueryを覚えるのならば「jQueryデザイン入門」がお勧めです。 http://www.amazon.co.jp/Web%E5%88%B6%E4%BD%9C%E3%81%AE%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%86-jQuery%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80-WEB-PROFESSIONAL-%E8%A5%BF%E7%95%91/dp/4048684116

TMEspion
質問者

お礼

補足ありがとうございます。 お勧めありがとうございます。 自分でも探してみたいと思います。

回答No.3

jQueryはクラスライブラリ、prototype.jsはフレームワーク（の基盤） と思います。 まあ、それぞれのサイトにも「JavaScriptライブラリ」、「フレームワーク」とありますし。 基盤しか有りませんから、扱うにはその上層部分、たとえばscript.acuro.usのようなクラスライブラリが必要だったり、もしくは自分で作らなければならないと思います。 jQueryのようなXPathは使えませんが、prototype.jsにもそれようの要素選択方法は提供されています。 http://api.prototypejs.org/dom/dollar-dollar/ http://api.prototypejs.org/dom/Element/ jQueryはjQueryオブジェクトを返すのに対し、prototype.jsはJavaScriptオブジェクト（HTML要素そのものだとか、Arrayオブジェクトだとか）を返す違いがありますから、 それを混同すると、扱いにくくなると思います。 prototype.jsはスーパークラスを拡張するということで、 Javaなどの他の言語ではスーパークラスの拡張は良くないと言われていますし（汚染と言われる。私もこの考えにはどちらかというと賛成です）、 ですが、JavaScript"らしい"作り方だと思います。 昔は、jQueryはjQuery単体で利用できる（<script>タグが1つで済む）けど、 prototype.jsはprototype.jsを利用したライブラリを併用しないとダメだった、と言うことでjQueryの方が扱いやすいと思ってましたが、 最近はjQueryプラグインを大量に必要だったりとか、自分で作らないとダメだったりとか、 結局<script>１つで出来なくなって、 そういう理由なら、どっちでもいいやと思うようになってきました。

TMEspion
質問者

お礼

回答ありがとうございます。 >最近はjQueryプラグインを大量に必要だったりとか、結局<script>１つで出来なく・・・ 確かに。 結局は作り手の好みの問題っぽいですね。

noname#140045
noname#140045
回答No.1

ゴメンなさい。 Prototypeについては、よくわからないのですが、Javascriptのクラスライブラリみたいなのではと思ったのですが、違うでしょうか。 つまり、Javascriptの知識は基本的に必須であると。 jQueryに関しては、Javascriptも混在できる１つの言語のようなものです。 ですから、簡単なことであればjQueryだけでJavascriptの記述を知らなくともできます。 Javascriptを覚えて、それから自分がやりたいことが具体的に何を使ってやればいいか、調べられるような知識を付けてはいかがでしょう。 でも、jQueryにはHTML,CSSの知識は必須ですが、それさえ覚えればそんなに難しい言語ではありませんので、手始めにjQueryだけで自分のやろうとしていることが実現できるか調べられてはいかがでしょう。 ※私もさほど詳しい訳ではないので、記述に誤りがありましたらばお詫びいたします。

TMEspion
質問者

お礼

回答ありがとうございます。 参考になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • jQueryとprototypeの共存

    prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { 　　　　jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>

  • Prototypeを使っていて困ったことがあります。

    Prototypeを使っていて困ったことがあります。 以下のようなソースでprototypeでtest.htmlを読み込みました。 そしたら困った事が2点出てきました。 (1)test.html内のjavascriptが動かない test.html内で使用しているprototypeやjquery等が全く動きません。 何か解決策はあるのでしょうか？ (2)test.htmlからtest1.htmlのdiv idに対して更新が行えない 読み込んだ先でも読み込み元のdiv idにファイルで更新が出来ると思い込んでおり これが出来ない為、かなり致命的な事になってしまいました。。 何とかできないでしょうか？ [test1.html] <html> <head> <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript"> function test() { new Ajax.Updater('title','test.html',{method: 'get'}); } </script> </head> <body> <div id="title"> ここにファイルを読み込む。 </div> <input type="button" value="操作" onclick="test()"/> </body> </html> 以上、よろしくお願いします。

  • prototype.jsとjquery.jsの併用がうまくいきません。

    prototype.jsとjquery.jsの併用がうまくいきません。 2つの機能をページに組み込みたいと思っています。 (1)横並びの画像が自動的にスクロールする (2)画像をクリックすると、ライトボックスで表示する 参考にしたのは下記のサイトです。 http://logicbox.net/jquery/simplyscroll/ http://www.lokeshdhakar.com/projects/lightbox2/ しかし、実際にページを作ってみるとどちらかの機能しか有効になりません。 どちらもいくつかのjsファイルを<script>タグで読み込みますが、 後から読み込んだ方しか有効に機能しないのです。 スクロールの方はjquery.jsを、ライトボックスの方はprototype.jsを使っているのですが、 それが良くないのでしょうか。 両方を機能させるにはどう直したらいいのか、ご教授下さい。 もしくは、両方がうまく機能しているサイトがあれば、URLを教えて下さい。 よろしくお願いします。

  • JQuery などの Javascript ライブラリを Google

    JQuery などの Javascript ライブラリを Google ライブラリからロードするメリット・デメリット教えて。

  • prototype.jsはJSのラッパなのですか？

    prototype.jsはJavaScriptのラッパといってもよいのでしょうか？ また、jQueryはJSのラッパなのでしょうか？ ラッパの概念がどうにも理解できず、困っています。教えてください。

  • jQueryについて教えてください

    jQueryというJSがあるのは誰もがご存知だと思います。 私も名前や少しだけ使ったことがありますが、いまいち漠然として分かりません。 初歩的な質問で申し訳ないのですが、 極論から言うとjQueryでいったいどの位の表現？機能を使うことができるのですか？ 本も買ってみたり、ネットでも調べると何かしらjQueryを使ったプログラムはありますが、それが全てではないと思いますし、むしろ極一部だと思います。 jQueryを使うと、どんな事を、どうやったら、何ができる？ って事がどうして皆さん分かるのでしょうか？ 例えば何かイメージしてる動きがあって、それはネットで調べれば近い情報は出てくると思います。 しかし、jQueryである必要も無ければ、jQueryの方が楽な場合もあると思います。 だけどjQueryだとなぜ楽に作れるのか、それが理解できなくて困っています。 JavaScriptの知識はかじる程度しかないですが、 jQueryを理解するにはjQueryのソースを理解しないと、何ができるかは判断できないのでしょうか？ また、「jQueryでできることの一覧」みたいなサイトってありますか？ あと、jQueryで使えるライブラリの意味がいまいち分かりませんが、 これはjQueryを理解してる人が、使いやすいように作った別のJSファイルって認識で良いのでしょうか？ どうも根本的な事を理解しきれてなくて、教えていただきたく。

  • コンストラクタとプロトタイプについて

    ネットで検索したりして調べているのですがいまいちわからなかった箇所が あるので質問させていただきます。 コンストラクタで設定するのとプロトタイプで設定する違いがいまいちわかりません。 例えば function Test { this.prop = hoge; } Test.prototype.prop1 = hogehoge; の場合 コンストラクタのほうが優先されてhogeがでるのはわかるのですが 下記の場合はプロタイプのほうが優先されてhogehogeと出てしまうのは どうしてでしょうか？ <script language="javascript"> <!-- //コンストラクタ function Test(){alert("hoge"); } //prototypeでセット Test.prototype=alert("hogehoge"); //オブジェクト作成 var TEST = new Test(); window.onload=TEST; --> </script>

  • javascriptとjQueryについて

    javascriptの基礎部分を学びその後、jQueryを学習しました。 ある程度jQueryはできるようになりました。 しかしjQueryはjavascriptのライブラリでjavascriptを簡単に書けるということなのでjavascriptも深いところまで学習すべきか迷っています。 jQueryを学習したのならjavascriptは深いところまでしなくてもいいのでしょうか？ やはり使用用途で学習するべきとか変わってくるものなのでしょうか？ もし変わってくる場合、こういうことがしたいならjQueryではできないからjavascriptも学習すべきなど簡単な例など出せれたらよろしくお願いします。 現在はPHPとmySQLを学習しています。 質問文が下手で伝わりにくいかもしれないですがよろしくお願いします。

  • javascript・Jqueryなにをどこまで？

    本を使ってjavascriptの勉強を始めました。 使用している本→（よくわかるJavaScriptの教科書） ●勉強の動機 javascript勉強の動機ですが、現在スマフォサイトのマークア ップをメインに仕事をしており、今後もさらにjavascriptでの技術が使用されると思い始めました！ ●疑問 javascriptを簡単に使用できるJQueryの使い方も書いてあり、 jＱueryだけを覚えるだけで、難しいjavascriptを覚える必要があるのか疑問に思ってます。 他のサイトでjavascriptを覚えないとJQeryサンプルの編集ができないため、覚える必要があると 書いてありましたが、そのようにサンプルを編集する機会は実際どの多いのでしょうか。 また、話が変わりますが、フロントエンジニアに皆さん求めるレベルなどがありましたら、教えてほしいです。 ●今私ができる事 HTML５ CSS PHPの基礎は理解しています。 JQeryを使った、画像の切り替えやslideDown等を使った簡単な動きを書くこと。 長文になりましたら、どうぞよろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する