web-dev-qa-db-ja.com

JQueryよりも純粋なJavaScriptを使用する利点

JavaScriptのみを使用する場合とJQueryのみを使用する場合の利点は何ですか?

JavaScriptとJQueryコーディングの経験は限られています。 HTMLページにそれぞれのビットとスニペットを追加しましたが、ほとんどの場合、他の言語でサーバー側のものをコーディングしました。理論的には2つのアプローチのいずれかを使用して同じことを行うことができます(もちろん、同じプロジェクトでそれらを混在させることもできます)が、常に最初から常にJQueryの使用を開始する傾向があるようですプロジェクトが要求するものは問題ではありません。

だから私は単に疑問に思っています、JQueryのみを使用せず、代わりにプレーンな古いJavaScriptを使用することには時間厳守の利点がありますか?

「明確な答えはない」または「いつまでも議論される可能性がある」と言うことができるので、これは問題ではないように見えますが、実際に「あなたはこれを行うことができます」などの時間厳守の答えを期待しています1つのアプローチと他の方法でそれを行うことはできません」。


Scrwtpのコメントによると、私はDOM処理の部分だけに言及しているのではありません。私の質問はむしろ:JQueryはライブラリです。 Javascriptの場合。他の言語の他のライブラリとは対照的に、このライブラリの奇妙な点は、JQyeryの場合、それを排他的に使用できるように設計されており、JavaScriptに直接触れる必要がないように見えることです。これは、HibernateやSQLとは対照的です。ライブラリ(またはこの場合はフレームワークですが、類推は当てはまると思います)が多くの側面を処理しますが、SQLを使用するときもSQLを使用できます。 、少なくともいくつかのフリンジケースでは。ただし、JQueryとJavascriptの場合、JQueryのみを使用してJavascriptを使用して何でも実行できます(または、少なくとも私にはそのように見えます)。


Stargazer712のコメントに従って:はい、同意します。ここでの質問は、あなたが「JavaScriptをどのように使用するかという問題」にすぎないためです。それは私が実際に尋ねることに繁栄していたものですが、私はいくつかの悪い処方を作りました。これは別の類推です: Spring Expression Language 。これは、Javaライブラリです。Javaなしでは使用できません。Javaに基づいており、それを使用しても、すべてJavaを使用できます。しかし、実際には、これを追加するだけです。ライブラリをJavaプロジェクトに追加し、Spring ELの式言語を使用してすべてのコードを記述します。これにより、コードは実質的にJavaに似なくなり、パラダイムですらあります。シフト(たとえば、これを使用すると強力な型強制がなくなります)JQueryは単なるJSライブラリであると私は理解していますが、実際には、Spring ELがJavaと同じ効果を持っているようです。つまり、プロジェクト全体でのみAPIを使用し、JavaScriptのAPIは使用しないでください。それが良いことか、落とし穴は何かなどと考えていました。

(そして、はい、みんなの答えを読んだ後、私はそれを理解しています:

a。私の質問はある程度まで無意味です

b。質問が完全に正確であったとしても、答えはほぼ「いいえ、常にJQueryのみを使用することはできません」

87
Shivan Dragon

まず、jQueryのみを使用することは不可能です。jQueryが行うのは、一連のメソッドを含む$オブジェクトをグローバルスコープに追加することだけです。プロトタイプのようなさらに操作的なライブラリは、JavaScriptの代替ではなく、一般的な問題を解決するためのツールベルトです。

ツールベルトにjQueryを追加する主な利点は次のとおりです。

  • ブラウザーの互換性-.attr()のようなことを行うことは、ネイティブの代替手段よりもはるかに簡単であり、ブラウザー間で壊れることはありません。
  • 通常は複雑な操作の簡略化-XHRメソッドの適切に記述されたクロスブラウザー互換バージョンを表示したい場合は、$。ajaxのソースを確認してください-このメソッドだけでも、jQのオーバーヘッドにほとんど価値があります。
  • DOM選択-イベントのバインドやDOM要素の選択などの単純なことは複雑で、ブラウザーごとに異なる場合があります。多くの知識がなければ、それらは簡単に書くことができず、ページの速度が低下します。
  • 将来の機能へのアクセス-.indexOfや.bindなどはネイティブのJavaScriptですが、多くのブラウザではまだサポートされていません。ただし、これらのメソッドのjQueryバージョンを使用すると、ブラウザー間でそれらをサポートできます。

Javascriptは単なるクライアント側言語ではなくなりました。jQueryはDOMに依存しているため、サーバーに移行するのはひどい候補です。時間をかけてjQueryを使用している理由を理解し(この質問は素晴らしい最初のステップです!)、必要なときに評価することを強くお勧めします。 jQueryは危険な場合があります。主な危険のいくつかは次のとおりです。

  • コードの品質-jQueryには巨大なコミュニティがあり、習得に時間がかかりません。これは、多くの不十分に書かれたオープンソースプラグインにとって完璧な嵐です。
  • 非効率-jQueryは非効率的に書くのは簡単です。たとえば、forループの代わりにjQueryのeachを使用する必要はなく、場合によってはパフォーマンスに影響を与える可能性があります。 JSPerf にあるこの情報についてのたくさんの良い情報
  • bloat-j​​Queryは巨大なライブラリです。ほとんどの場合、その機能の小さなサブセットを使用して、ライブラリ全体を取得します。 zepto.jsやunderscore.jsなど、機能のサブセットを提供する優れた代替手段がいくつかあります。状況によっては、ニーズに合った適切なライブラリを選択することで、バイトを節約できます。

結局のところ、jQueryは、適切に使用すると、非常に便利で役立つライブラリになります。ただし、JavaScriptの代替ではありませんzepto.js[〜#〜] yui [〜#〜]DojoMooTools 、および Prototype -現在のプロジェクトには、これらの1つがはるかに適している場合があります。

JavaScriptは誤解されている言語であり、ほとんどの人が最近、スクリプト言語以上のものと見なされています。私はそれについてもっと読むことを本当にお勧めします、ここに始めるためのいくつかの良い場所があります:

編集07/2014-この投稿がまだ注目を集めていることに気付いたので、たくさんのリンクを追加しました。これらは順不同ですが、参考になるはずです。

  • Ben Almanのブログ -ここには多くのベストプラクティスがあります。私はそれらすべてに同意するわけではありませんが、彼のブログから常に新しいことを学びます。
  • コードアカデミー -基本的なJavaScriptおよびjQueryトレーニング。時々、基本に戻ると役立ちます。
  • Javascript Garden -javascriptのよりトリッキーまたは誤解されている機能に関する投稿。 お願いすべてを理解できるまで、時々これを読んでください。
  • Bocoup -これらはトレーニングクラスです。近くにいる場合は、それに行きます。最高のJSスピーカーと教師の多くがこれらを教えています。
  • Paul Irishのブログ -厳密にはJSではありませんが、ここには多くのベストプラクティスが書かれています。彼とベンのTwitterフィードはどちらもフォローに最適です。
  • Javascript:The Good Parts -Douglas Crockford著のこの本は、しばしば「The Javascript Bible」と呼ばれ、javascriptの理解を始めるのに最適な場所です。
  • Isaac Schlueterのブログ -Isaacはnpmの作成者であり、ノードコアで動作します。彼は、コードの慣例についてではなく、JavaScriptコミュニティについて多くのことを書いていますが、あなたが本当にjsに慣れているのであれば、素晴らしい読み物です。
  • Douglas CrockfordのJavascript -ブレンダンアイヒがJavaScriptの父親である場合、ダグラスはJavaScriptの率直な叔父です。彼は、JSON仕様、JavaScript聖書、およびJavaScriptの癖と気象の上昇に関する数多くのすばらしい投稿の著者です。
  • ブレンダンアイヒのブログ -ブレンダンはjavascriptの作成者です。彼は自分のブログであらゆる種類のばかげたものについて書いており、人としての欠点はありますが、彼のjavascriptの投稿は貴重です。
  • James Hallidayの(@substack)ブログ -サブスタックは間違いなく、コミュニティで最も重要なnode.js開発者です。モジュール、彼が書いたすべてのものは読む価値があります。
  • Max Ogdenのブログ Max Ogdenはもう1つの多作のnode.js作者であり、何かを教えるブログ投稿を書くのに優れています。彼は猫のためのjavascriptの作者でもあります(私が信じている他の人もいます)。
  • 猫用Javascript -これは猫の観点からJavaScriptの基本を説明する短いチュートリアルです。初心者の方は、こちらをお読みください。それは楽しいし、多くの本が通信するのに何週間もかかることを1時間で教えてくれる。
  • Nicholas Zakasのブログ Nicholasはいくつかの素晴らしいJavaScriptの本の著者です: JavaScriptでのオブジェクト指向プログラミングMaintainable JavascriptProfessional Web開発者向けのJavaScript 、および 高性能Javascript 。彼は主にクライアントに焦点を当てていますが、数多くのベストプラクティスとパフォーマンスのヒントを持っています。
  • Guillermo Rauchのブログ -Guillermoはもう1つの多作のnode.js開発者であり、Socket.ioとMongooseで主に有名です。彼のブログ(そして彼の新しい本 Smashing Node.js )はどちらも素晴らしいリソースです。

私が考えていない、または知らないすばらしいリソースが他にもたくさんあると思います。他の回答者もそのリストに自由に追加してください。

113
Jesse

利点はありますが、実際に欠点を上回るかどうかは議論の余地があります。

主なものは、帯域幅を節約し、応答を速くすることです。 jQueryはさらに30kbを応答に追加します。一部のネットワーク(および一部の国)では、さらに数ミリ秒かかる場合があります。一方、Webサーバーを使用してキャッシュを簡単に設定できます(または、Xionが言ったように、Googleのサイトからキャッシュを使用するので、自分のサイトに影響を与えず、キャッシュされます)。

2つ目は、ごく一部の非常に単純な機能しか必要としない場合があり、jQueryをダウンロードして設定するだけで、必要なものを実装するだけの場合よりも時間がかかる場合があることです。

そして最後に、独自のフレームワークをロールバックすることもできますが、これは主に悪い考えですが、一部の人々には理由があります。

ただし学習曲線に怯えているという理由だけでjQueryを破棄する場合は、再考する必要があります。特にそれはかなり優しい。

17
Yam Marcovic

私が知る限り、 JQueryMooToolsなどのライブラリと比較して、バニラJavaScriptを使用する利点は2つだけです。 など.

  • ライブラリには、帯域幅を消費するペイロードがあります。しかし、他の回答ですでに指摘されているように、gzip圧縮とキャッシュでこれを制限できます。 jQueryのサブセットのみが必要な場合は、 SizzleJS で実行でき、MooToolsでは、必要な 機能セットを選択するオプションがあります と同じ方法で Modernizr を行います。
  • 図書館は大きく、学ぶには少し時間がかかります。繰り返しになりますが、これは開発者にとって一度きりの投資です...そして、JavaScriptライブラリを知ることは、あなたの履歴書に見事に見えます。
  • (ボーナス)ライブラリは シルバーの弾丸ではありません ですから、もしあなたがホイールを再発明したいなら、これは間違いなく行く方法です。

JavaScriptライブラリを使用する理由を指摘することは価値があります。

  • 開発をサポートするために独自のフレームワークを作成する必要はありません。オープンソースであるため、動作を知りたい場合は、コードをチェックしてください。
  • ライブラリはブラウザの互換性を解決します。 DOMとjavascriptの両方には、ブラウザ間でいくつかの違いがあります。自分を直してハックする必要がある場合、これは非常に時間のかかるものです。
  • JavaScriptライブラリを使用することは事実上のインターネット標準であり、それらのほとんどは現在十分に文書化されており、ほとんどのWeb開発者(JavaScriptを知っている)はそれらの使用方法を知っています。
  • ライブラリを使用する場合、JavaScriptをあきらめる必要はありません。それでも、タイプ、オブジェクト、 クロージャ がどのように機能するかなどのJavascriptを知る必要があります。
  • ほとんどのライブラリはモジュール化されており、プラグインの作成や require および AMDパターン の使用に長い時間はかかりません。
  • CSSがDOMから要素を選択することは非常に役立ちます。
  • (ボーナス) CoffeeScript でも使用できます。

私はかつてjQueryが大きくて怖かったため、Vanilla javascriptの使用に固執したWebショップで働いていました。この決定は、主に孤独な「JavaScript開発者」の影響を受けており、多くのブラウザのバグと開発の遅れの原因であり、彼のコードベースに取り込もうとするのは手間がかかりました。独自のフレームワークを書くのは良い考えのように思えるかもしれませんが、もしあなたが新しい開発者を雇いたいのなら、彼らはすぐにすぐにに参加することはできません。次に、考慮すべき バス係数 の問題もあります。

以前言ったように、私はそこで働いていました...他の場所には緑の牧草地がありました。 :^)

14
Spoike

私はたまたま両方の使用をかなり混ぜ合わせます。これの最大の理由は、一部のアプリケーション(chrome extensions)と考える)では、クロスブラウザーのサポートは必要ないということです。つまり、遷移などの機能を持つcss3のような新しい進歩を利用できますjqueryの使用に比べてコードを単純化できます。

また、私はしばしば何か特別なことをしています。他の人と同じように、車輪を再発明するべきではないと言っていました。しかし、あなたがいくつかのクレイジーな機能を実行するように求められたとき、私はしばしば自分でそれを書く方がはるかに簡単だと思います。

また、jquery以外を使用しない開発者とも協力してきました。そして私は、彼らが望んでいたことをするjqueryプラグインを見つけることができなかった場合よりもはるかに頻繁に機能を侵害したと言わざるを得ません。

Web開発のある時点で、ライブラリに事前にパッケージ化されていないものを実行するよう求められます。したがって、その時点で、ベース言語が実際にどのように機能するかを理解するようにしてください。

したがってTLDC:両方を使用します。バニラだけを使用すると不利になり、バニラの内外を知らず、常にjqueryを使用するよう主張する場合は不利になります。

10
Ryan

JQueryなしでは実行できないと私が考えることができる唯一のことは、JQueryプラグインを使用することです。それでも、プラグインが必要とするものだけを提供する独自のJSライブラリを作成できます。

JQueryはJavascriptで記述されたオープンソースのJavaScriptライブラリです。あなたはソースを見て、それによってそれがすることを何でもする方法を学ぶことができます。

プレーンな古いJavaScriptを使用せずにJQueryを使用することはできません。おそらくdocument.getElementById、ただし関数と変数は標準のJavaScriptの方法で定義します。標準のforループを作成することもできます。

JQueryを使用することの主な利点は、他のサードパーティ製ライブラリとほとんど同じです。つまり、アプリケーションに固有のロジックを実装するために多くのコードを記述する必要はありません。

サイズはあなたを怖がらせないでください。 CDNバージョン は、最初のページがヒットした後にユーザーのブラウザーによってキャッシュされる、約33,000のダウンロードです。

6
Mike Partridge

パフォーマンスが心配な場合は、可能な限り Vanilla js を使用してください。フレームワークは、帯域幅オーバーヘッドだけでなく、処理オーバーヘッドも追加します。また、jQueryには、かなり古いブラウザーのブラウザー互換性も備わっています。

モバイルアプリやゲーム(または両方を組み合わせたもの)に取り組んでいる場合は、まずパフォーマンスが必要であり、効率を再ソーシングします。

jQueryとプラグインは開発をスピードアップする可能性がありますが、特にサードパーティのjqueryプラグインに依存している場合は、それらが内部で何をしているのかを知っている必要があります。それらの多くは、コードの品質と効率の悪い例です。

jQueryは、ネイティブJavaScriptよりも2〜10倍遅くなる可能性があります。また、インターフェースを適切に設計せず、ネイティブよりもはるかに遅いjQueryセレクターに依存しすぎることを開発者に容易に奨励できます。

6
Jan Prieser