何故この記事を書こうと思ったか

JavaScriptの定番ライブラリであるjQueryは, 最近以前と比べて必要とされなくなってきました. その理由はよく, Reactなどの他のフレームワークが登場したせいだと勘違いされています. しかし, jQueryが必要とされなくなってきた理由は標準DOM APIの進歩によるものです. この記事ではそれを書いていきます.

なお, この記事ではReact Nativeについて触れる必要がないため, React DOMのことも一緒くたにReactと記述します.

また, 私がweb開発を開始したのは3年前ぐらいからなので, 昔のことは調べて書いています. 間違っているならば指摘をお願いします.

先行した記事

この記事は2年ぐらい前から書こうと思っていたのですが, アドベントカレンダーに登録してから調べてみたら割と記事がありました.

• jQuery不要論について考える
• You Don't Need jQuery - Qiita
• jQueryは有害なのか | プログラミング | POSTD

この記事は被りになってしまいますが, まあ被っても良いですよね.

jQueryはReactやAngularやVueによって置き換えられるわけではありません

私は2015年に専修大学で｢オブジェクト指向システム｣という講義を履修していました. その講義ではjQueryを教えていました. 私は当時からjQueryは好きではなかったので, 講義後に｢何故この2015年にjQueryを教えるのですか?｣と聞いてみました. そうしたら｢ReactやAngularなどと言った新しい技術はすぐに無くなるかもしれないのでjQueryを教える｣という回答が帰ってきました.

当時からその回答にはあまりしっくりきませんでしたが, 講義後の時間が少なかったこともあり, うまい反論を思いつきませんでした. しかし, その後Reactを実用してみて, やはりこの答えは噛み合ってないなという結論に至りました.

何故なら, ReactやAngularとjQueryは併用できるからです.

jQueryはJavaScriptのただのライブラリです. これがReactなどと併用できないわけはありません. Angularにはあまり詳しくありませんが.

例えばReactは自身がmountされる以下のDOM以外は触らないため, その他の部分はこれまで通りDOMを直接操作出来ます. またcomponentDidUpdateという関数があり, これを使えばReactが管理する以下のDOMを直接操作することすら可能です.

勿論ReactでDOMを仮想DOMを使わずに直接操作することはアンチパターンですが, それは直接DOM操作という行為が問題になっているだけで, jQueryに問題があるわけではありません.

とは言え, ReactなどでDOMを構築できるので, jQueryの豊富なDOM操作メソッドが必要とされてこなくなったと言う要因はあります. しかし, これは決定的な理由ではありません.

querySelectorAllの登場

jQueryのメインの機能は, Queryという名前からわかるように, クエリから要素を取ってくる機能です.

これはquerySelectorAllの登場によってjQueryを使わなくて済むようになりました. document.querySelectorAll - Web API インターフェイス | MDN

querySelectorAllがIEで使えるようになったのはIE9からなので, 完全に実用段階に入ったのはIE9の公開日である2011年でしょうか.

attachEventのaddEventListenerへの統合

jQueryは独自のイベント機構を備えています.

DOM APIの標準イベントメソッドは, IE9以前はaddEventListenerではなくattachEventを使う必要がありました.

IE9 より前の Internet Explorer では、標準の addEventListener ではなく、 attachEvent を使わなければなりません。IE をサポートするためには、上記の例を以下のように修正しなけれなりません。

EventTarget.addEventListener - Web API インターフェイス | MDN

当時は, これらの互換性を気にして個別に対応するより, jQueryのイベント機構を利用するほうが楽でした.

これもIE9の登場でaddEventListenerだけを使えばよくなり, jQueryのイベント機構を使う強い理由はなくなりました.

カスタムイベントもIE9からサポートされるようになりました. CustomEvent - Web API インターフェイス | MDN

ActiveXObject("Msxml2.XMLHTTP.6.0")のXMLHttpRequestへの統合

XMLHttpRequestはIE7以前はサポートされておらず, ほぼ同等の機能を持つActiveXObject("Msxml2.XMLHTTP.6.0")を使う必要がありました. これも当時はjQueryのajax機能を使えば楽をすることが出来ました.

しかし, 今はXMLHttpRequestは殆どのブラウザで使えるようになり, 直接使って問題なくなりました.

fetch APIの登場

とは言えどXMLHttpRequestは多少煩雑で, $.ajaxを使って簡潔に書きたいという欲求も多少ありました.

SuperAgentのようなajax単体のライブラリを使う人も居ました.

しかし, これからはFetch API - Web API インターフェイス | MDNを使えば, 標準APIだけでも簡潔にネットワーク通信を行うことが可能です.

IEを切り捨てて良い環境に限りますが, もうIEはアップデートしないので, 切り捨てて良いケースは増えると思います.

CSSアニメーションの登場

jQueryと言えばアニメーション機能が有名ですが, CSS アニメーション - CSS | MDNが登場して, JavaScriptで無理する必要はなくなってきました.

CSSアニメーションを使うと細かく命令的にアニメーションを書かずとも宣言的にアニメーションを記述出来てコードがわかりやすくなります. また, GPUの支援も受けやすく, パフォーマンス上も有利です.

$.animate()でガチャガチャやる必要性はなくなってきました.

Promiseの登場

Promise - JavaScript | MDNの登場でjQueryのDeferred Objectは必ずしも必要ではなくなりました.

ES5でのArrayのメソッドの追加

ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita に沢山書かれていますが, ArrayにforEachなど重要なメソッドが大量に追加されたので, jQueryの.each()のようなメソッドを使う必要は薄くなりました.

npmの登場

JavaScriptのパッケージエコシステムは近年急速に発展してきました. こんなことを書くと, 今でも滅茶苦茶じゃないかとツッコまれるかもしれませんが, npmすら普及していなかった昔よりはマシになっています.

昔はパッケージという概念すらない混沌とした状況だったので, 沢山の機能を提供してくれるjQueryはありがたい存在でしたし, jQueryプラグインの機構もありがたかったです. npmがクライアントサイドにも普及することで, ライブラリがパッケージとしてちゃんと形式化されて, 小さなライブラリを導入しやすくなりました.

非jQueryオブジェクトの使用の増加

サーバサイドJavaScriptが流行ったことで, サーバサイドでもクライアントサイドでも利用できる便利なライブラリが増えてきました. サーバサイドでは当然jQueryは使われていません.

このように, jQueryを使わないJavaScriptライブラリが増えてきました.

昔はJavaScriptのライブラリと言えばjQueryはよく前提条件のような扱いになっていて, 内部でも当然jQueryが使われていました. なので, こちらもjQueryを使って合わせるのが楽でした. 今はそうではないので, jQueryのオブジェクトを前提としてプログラミングしていると, かえってややこしくなることがあります.

jQueryが扱うのはjQueryのオブジェクトです. 生のDOMのオブジェクトではありません. 生のDOMを扱うのが困難だった時代では, これはメリットとなりましたが, 今となっては生のDOMとjQueryオブジェクトを使い分けることが必要になり, 混乱の原因となります.

標準で済むようなコードは標準で済ましたほうが, jQueryにロックインされずに移植性が高まり, コードが扱うオブジェクトの種類も減ってシンプルに保たれます.

Vanilla JS

Vanilla JSというジョークサイトがあります. これはJavaScriptライブラリの紹介のように書かれた, DOM APIの標準の使い方を紹介したサイトです. 機能をいくら選択しても0 bytesのダウンロードで済みます.

でもjQueryはまだ必要

こんな風にjQueryを使わなくても済む理由を沢山列挙しましたが, 私自身はReactを使いつつもjQueryも併用しています. それはBootstrapがversion 4になってもjQueryに依存しているからです. Bootstrapを使っている以上はjQueryを読み込まざるを得ません.

使用したライブラリがjQueryのイベント機構を使っている場合も, hookを仕掛けたい場合にjQueryを使わないと難しいです.

DOM操作でほげほげしたいと思って, ググって辿り着いたStack OverflowのページでjQueryを使って物事を行う回答が行われていることも日常茶飯事です. 最近はReactを使っているので複雑なDOM操作をReact以外で行うことは減りましたが…

まあしかし, この記事はjQueryを不要だとか使うなとか述べている記事ではありません. jQueryが必要とされなくなってきた理由がReactやAngularの登場だと思われているのが嫌だったから書いた記事です. jQueryはこれからも他のライブラリと併用していけば良いと思います.

ありがとうjQuery. 早くjQueryの葬式をしたいですが, まだjQueryを必要とするライブラリが残っている以上, しばらくは使っていきます.