2013年にウェブ制作の仕事を始めてから長らくの間、jQueryなしの素のJavaScriptを書いたことがありませんでした。すでにjQueryが普及していた環境で、そもそもjQueryとそうでないJSコードの差についてすらよく分かっていなかった気がします。ここ数年でようやく、jQueryをなるべく使わない実装を心がけるようになりました。
jQueryに代わる新しいライブラリ？Vanilla JSとは
公式サイトを真面目に読みに行ったのはいい思い出。速い、軽い、互換性バッチリ！と謳われているのはただのジョークで、jQueryも何も使わない素のJavaScriptのことをVanilla JSと呼ぶようです。そりゃ軽いはずです。何も追加でロードしないので、0KBです。
jQueryの役割と現状
jQueryを使うと、要素の選択や操作、アニメーション、AJAXなどの実装が簡素化されます。jQueryが普及した頃は、JavaScriptの対応状況がブラウザによってまちまちで、このような実装をどのブラウザでも同じように動作させるのは一苦労でした。それを解決したのがjQueryということで、その時点では欠かせない存在だったと思います。
それから何年も経って時代が変わり、かつてまちまちだったブラウザ間の対応状況も、ほとんど支障がないくらいになりました。そうなると、わざわざページサイズを増やしてまでjQueryをロードする必要があるのか？という話になります。
今でもjQueryを使うべきケース
基本的には、現在はjQueryに頼らなくてもそれほど支障がありません。それでも、jQueryを使ったほうがいいケースもあります。
既存のサイトで、jQueryが使われている
この場合は追加の容量が増える心配もないので、jQueryを使います。追加したコードだけVanilla JSで書いても、一貫性や統一感が損なわれてしまいます。
複雑なサイトで、大量のJSコードを書く必要がある
シンプルな記述で済むメリットが多い場合は、jQueryを採用したほうが効率的なのかもしれません。特にアニメーション系のコードは、Vanilla JSとCSSの組み合わせで大半はなんとかなるものの、jQueryのほうが楽に済むケースも多いです。
パフォーマンス面での違い
Vanilla JSのほうがjQueryより処理が速いという情報も見かけます。
Vanilla JSを学ぶ
jQueryからVanilal JSに移行したい人におすすめのサイトです。
よく似たタイトルのサイトですが、別物のようです。どちらも英語のサイトですが、コードを見比べるだけでも十分役に立ちます。