B-Teck!

お仕事からゲームまで幅広く

【JavaScript/jQuery】We don't need jQuery?

昔書いてたメモが出てきたので、今更ですが供養。
正直今でも作り捨てとか、とりあえず作るならjQuery使ってもいいんじゃないかな?って思ってる。

jQueryとはなんだったのか

  • ブラウザ間でJavaScriptの実装が大きく異なっていた時代に、共通の実装が行えるように差異を吸収していたライブラリ。
    • ぶっちゃけ今でも差異はあるけど頑張れる範囲になってきた
  • 簡潔な実装からWebFront界隈で広く利用されており、jQueryに依存するライブラリも多数存在した。

なぜjQueryをやめるのか

不要なライブラリを読み込むことによる動作遅延

  • ただし70〜100KB前後なので、現在の通信環境ではほぼ問題なさそう

動作が遅い

  • jQueryはブラウザ間の差異を吸収するようにできているため、現代のブラウザには不要な分岐がある。
  • jQueryオブジェクト等の生成のコストもあり、現在の環境では不必要な処理が多い。
    • ついでにDOMを直接触るため、最近の仮想DOMを用いるフレームワークとの親和性が低い

jQueryでできていたことが、ES自体の仕様として取り込まれつつある

この辺参考
- jQueryのfindなどをquerySelectorで書く - Qiita
- You Don't Need jQuery - Qiita

jQueryで指定していたアニメーションがCSSで実現できるようになった

Pros/Cons

Pros

  • 不要なファイル(jQuery本体)を読み込まなくて良くなる
  • 本来必要ではない処理コストを削減できる
    • 標準APIに移行することでjQueryへのロックインがなくなり、他のフレームワークなどと組み合わせやすい
    • 近年流行っている仮想DOMとjQueryはだいぶ相性が悪い
  • スクリプトで行うべきこと、CSSで行うべきことの責務が明確になる

Cons

  • なんだかんだいってもjQueryの互換性担保は魅力
    • 現状、IE対応でPolyfillやBabelによるトランスパイルが必要となるケースはまだある
  • jQueryの方が記述が簡潔になるケースも多い
  • 長い間使われてきているプラグインにはjQuery必須のものもある
  • 小規模の開発ではjQuery使ってさっくり作るほうが良いこともある
    • VueやReactを入れるほどではない開発規模とか、標準APIだとまだ冗長になる部分とか