javascriptかjqueryか？

Question

javascriptとjqueryの基本を一通り勉強したうえで、下記のような疑問を持ちました。
「jqueryのほうが効率的でjavascriptってそんなにかかないんじゃないの？」

そこで質問です。
jqueryよりjavascriptで書いたほうが良いプログラムやjavascriptでしかかけないプログラムなど具体的な例がありましたら教えてください。

それぞれのメリットを知りたいと思っています。
たくさんの回答をお待ちしております。

Answer 1

処理速度・DOM操作がポイントなのですね～
どちらかではなく適宜使い分けていくことが重要なのだと感じました。
たくさんの回答ありがとうございました！
まだまだ勉強不足ですが、回答いただいた内容を意識して勉強に取り組んでいきたいと思います。

Answer 2

最近は、DOMを使わないところで JavaScriptが登場することが多いので、
jQueryあればそれでいいや、なことは どんどん減っていってます。

1.node.js (io.js) などのサーバーサイド JavaScriptのケース。
サーバーサイド JavaScript の場合、ほぼすべての局面でDOMは登場しませんね。
2.virtual-DOM を使うライブラリを使う場合。
React.JS が話題になってますが、DOM自体を操作するのではなく、
fullのDOMを毎回再構築するかのような ロジックを書いておいて、
実際には 現在のDOMと違う差分だけ反映してくれる、というもの。
結果処理だけ書いておけばいいので、処理構造がシンプルになります。
(場合によっては処理も大幅に速くなります。)
3. 3Dなど、webGLを使う処理 (canvasやSVG)。
3D表現ライブラリでデファクトスタンダードな three.js などは、
jQueryを併用すると遅くなることが知られています。
4. d3.js など、データ処理をクライアントで行うもの
クライアント側処理が結構大きいものだと、専用のDOMアクセス用ライブラリも
内包されていることが多いです。
5. MVCフレームワークの多くのもの。
データフローをきちんと制御したい場合に使うフレームワークでは、Viewに
jQueryを使わないように誘導するものが多数あります。
DOM構築は HTMLテンプレートでほぼ解決するはず、とされます。

1. jQuery の対抗馬もいくつかあります。

例えば モバイル環境では、jQuery mobile 以外の選択肢も多いので、
その場合は、jQueryを前提としていないことも多いです。

※jQuery使っておけばメモリリークしない、というのはあまりに盲信かもしれませんね。
メモリのパフォーマンスには常に気を付けましょう。

Comments

[twin_bird]

回答ありがとうございました！

Answer 3

基本的にはjQueryを使った方がコード量の面でもクロスブラウザの面でも有利になります。
実績も豊富にありますから、使用を禁止されていないプロジェクトであれば積極的に使っていっても問題ないかと思います。
ただ、素のJavaScriptを知っておくとjQueryが内部で実際にはどのような処理をしているのかをソースコードを読んで把握できたり、ライブラリを何らかの事情で使えない場面でも同様のコードを自力で組めたりしていざというときに有利にはなるかと。

jQueryは体感では全くと言っていいほど差が出ませんが、内部でいろんな処理をしている分、素のJavaScriptを書くのに比べて処理速度は遅いです。
ですのでBlobやInt32Arrayなど高速に大量のデータを扱う分野ではjQueryの出番はほとんどないでしょう。
まぁこれも通常は内部実装をすべて自分で書く必要はなく、別のライブラリがありますが。

ところで、jQueryオブジェクトには配列のような性質があり、$('.content')[0]など添え字をつけることで本来のDOMオブジェクトが取得できます。（getメソッドでも同じ意味になります）
また、jQuery EventオブジェクトもoriginalEventというプロパティで本来のイベントオブジェクトを取得できます。
元々のオブジェクトにも触れる手段が用意されていることで必要な時だけ素のJavaScriptを使うという運用が可能です。

jQueryはセレクタの記述を間違えても内部の要素数が0になるだけで、記述ミスに気づきにくい欠点があるといえばあります。

Comments

[twin_bird]

回答ありがとうございました！

Answer 4

jQueryを使うことによるメリットは、以下のようなものがあると考えています。

• IE8以下が典型的な、古いブラウザ・バグのあるブラウザにも対応できる
• メソッドチェーンという形で、すっきり書ける（生DOMだと、一時変数が必要になります）
• 豊富なプラグイン

一方で、デメリットとしては以下のようなものがあります。

• 極端な条件や特定のブラウザでだけ必要な操作が裏で入るため、直接DOMを使うより重い
• 他に使うライブラリがある場合、干渉することがある

htsignさんのコメントにもありますけど、速度にシビアな部分だけDOMを使うなんていう技も可能ですし、あと、jQueryのソース自体ももちろんJavaScriptですので、読むと参考になることも多々あります。

Comments

[twin_bird]

回答ありがとうございました！

Answer 5

例えばJavaScriptだと、

var input = document.getElementById("hoge");
var val = input.value;

とした時、id:hogeのDOMが存在する時は良いですが、存在しない場合、2行目でid:hogeがundefinedとなるため、そこにvalueプロパティは存在しませんからエラーが発生してスクリプトが停止し、それ以降のスクリプトが実行されなくなります。

ですが、jQueryを使って、

var val = $("#hoge").val();

とした場合、id:hogeがあれば値が取れるし、無ければ何も起こりませんので以後のスクリプトも実行されます。

これを良しとするかしないかは要件により変わりますが、大抵の場合、JavaScriptの実行が知らないうちに止まっていると困るので、jQueryを使った方が現実的です。

また、jQueryでDOMを操作すると素のJavaScriptで操作するよりも遅いのですが、これはメモリ管理をしっかりやっているからで、知らない人が素のJavaScriptでDOMを操作しまくるとメモリリークしまくるはずです。

ですから、勉強するなら素のJavaScriptをしっかりやるべきですが、仕事で現在jQueryを使わない理由は見当たらないでしょう。

Comments

[twin_bird]

回答ありがとうございます！

Answer 6

jQueryはクロスブラウザ対策という意味ではありがたいものでしたが、HTML5、CSS3勧告によって、jQueryのありがたみはかなり薄れたと思っています。
JavaScriptネイティブで書いても、コード量は以前の半分程度で済んでしまう事が多くなりました。
あまりjQueryに頼り切らない方がコーディング力が上がり、オリジナリティのある作品ができると私は思います。

Comments

[twin_bird]

回答ありがとうございました！