【JavaScript】jQueryって遅い？？不要？？って疑問に対する自分なりの答え

はじめに

2017年12月頃から業務でWeb開発を始めてから、
セレクタ「$」らくやわ〜と、
なんとなく便利でjQueryを使ってきたけど、

• jQueryは遅い
• jQueryはもう不要

という意見をTwitterやQiitaで拝見したのですが、
知識の疎い自分には「？？」な感じでした。

そのため、今回は上記の意見についてちょっと調べて、
自分なりに腹落ちさせた答えを出してみました。

お願い

色々な記事を拝見し、自分なりに解釈した内容を記述しておりますので、
間違い等ありましたら、ご指摘いただけると助かります。
m(＿ ＿)m

調査過程

この疑問を解消するためググったところ、以下のQiita記事がHITしました。

qiita.com

コメント欄を見ると、かなり議論されていますね。。。
自分なりにかなりざっくり概要をまとめてみると、

• jQueryはブラウザ毎に仕様が異なる時代に、コードを統一かつ量を減らす目的で作られたよ
• jQueryが遅いのは、append()でのDOM操作を都度行った際にブラウザレンダリングが発生するためだよ（と思われる）
  • 逆に要素をまとめてappend()してしまえば速度低下を抑えられるよ
• コンポーネント（要素）ベースで操作可能なライブラリ（React,Vue.jsなど）台頭によりわざわざDOM（jQuery）での操作不要なんじゃない？

ブラウザレンダリング？ は、以下参照。

www.yoheim.net

要素に参照するタイミングでレンダリングが発生するっぽいですね・・・

あと、jQueryに関係なく、DOM操作を行うタイミングでレンダリングが発生するあたり、
Qiita記事内の「append()してしまえば速度低下を抑えられる」は納得できますね。

自分なりの答え

結果、以下のような答えとなりました。

jQueryは遅い？？

• 都度append()等でDOM操作を行う度、レンダリングもその都度発生するためだよ
  • append()の使用頻度を極力減らしたりして、DOM操作のタイミングを減らそうね

jQueryはもう不要？？

• IE8のようなブラウザも対象だったら使った方がよいね
  • 対象外であれば、使っても使わなくてもいいかもね

---

って感じですね。
かの爆速表示で有名なdev.toでも、jQuery使っているみたいだし、
（用途までは調べてないですが・・・）

dev.to/app/assets/javascripts at master · thepracticaldev/dev.to · GitHub

ほんとに使い方次第で速度が変わるんだろうな・・・

おわり

答えが出せて、概ねすっきりしました。
プライベートではデモの時みたいな時以外、
jQueryは極力使用せず（お世話にならず）、 コード書いてみようかなと思いますが、
実業務だったら、開発対象のブラウザにIE8を含められていたら、
コード量を鑑みてjQueryを採用・・・てな感じですかね。

あと、DOM操作を行う場合、レンダリングを考慮し、
極力DOM操作のタイミングを減らすような工夫をしていこうかな。

それにしてもブラウザレンダリング・・・

知らなかったのはエンジニアとしてまだまだだなと思いましたが、
まあ、今回知れたってことでよしとしようかな・・・