昨今、よく「jQueryはもう必要ない」という声を聞きます。
しかし、一時期JavaScriptのデファクトスタンダードのライブラリといわれたjQueryに対しての扱いの変化を疑問に思う方もいるでしょう。
そこで、この記事ではそもそもjQueryとは何のために作られたどんなライブラリか、そしてそれがなぜレガシーと呼ばれるようになったのかを学んでいきたいと思います。

間違った事を書いているなどのご指摘は大歓迎です。

なぜ jQuery ができたのか

昔のWeb開発

jQuery ができたのは2006年。
そのころはJavaScriptはWebページに文章を読むのを妨げる動きをつける言語で、HTML5やCSS3、ES2015なんてものはもちろんなく、今ではコード数行でできることが時にはトリッキーな方法も混ぜながら何十行も書く必要がありました。その上、ECMAによって標準化されているとはいえ、ブラウザが提供していたAPIには差異があり、開発者は常にブラウザ互換についても考えながらコードを書く必要がありました。

jQueryがもたらしたもの

そんなWeb開発に革命を起こしたのがjQueryです。
jQueryは各ブラウザが提供しているDOMなどのAPIを一つのメソッドにまとめ、ブラウザ間の差異をなくしました。
それだけじゃなく、Web上でのアニメーションを簡単に記述できたり、現在のJavaScriptの非同期処理に欠かせないPromiseと似たDeferredという機能を取り入れたりもしました。

お世辞にも綺麗とは言えなかったJavaScriptの for 文などを簡潔に書けるユーティリティの機能も存在します。

そしてjQueryの最大の功績はなんと言ってもAjaxを簡潔かつわかりやすく書けることでしょう。
これによりサーバー↔クライアント間の通信がページ転移を伴わないでもできるようになりました。
これは現在のSPA（シングルページアプリケーション）の元となります。

jQueryの仕組み

jQueryはそのロゴに「write less, do more」とあるようにとても少ない記述量で多くのことができます。
それゆえ、jQueryが実際にしている動作は半ブラックボックス化されているような気もします。
初心者Webプログラマやデザイナー向けの「jQuery入門」と銘打たれた本には「こうしたいときはこう書け」としか書いておらず、それがなぜそう動くのかまで書かれている本はまれです。初心者の中では、jQueryとJavaScriptは別の言語だと思っていたという話も聞きます。
簡単に書けるとは言え、適当に書けば可読性皆無なコードや必要以上に低速なプログラムが生まれてしまいます。

ここでjQueryの動く仕組みを確認してみましょう。

JavaScriptのおさらい

さて、ここでjQueryの仕組みを知る前に、JavaScriptの基本のおさらいをしましょう。
JavaScriptは動的型付けのオブジェクト指向のプログラミング言語です。ですが、関数が第一級オブジェクトであったりと関数型言語としての特徴も併せ持っています。これは、関数が変数に代入でき、関数のプロパティやメソッドを追加できるということです。
こうした柔軟な言語仕様が、jQueryの「write less, do more.」を支えているのです。

$？

さて、jQueryの使い方は皆さんご存知の通り、<script>タグでjQueryのソースを読みこみます。
その後、

$(() => {
  /* 処理 */
})

と書きます。
この謎の$記号はDOM操作をする時にも現れ、$(セレクタ)のようにしてHTML要素を取得します。
また、POSTやGETなどAjax系の機能や、each()などDOMに関係のない機能を使う時は $.get() のように書き、やっぱり $ マークが出てきます。

この記号は一体何なのでしょう。

シェルスクリプトやPHP、Perlなどを学んだことのある人は何か特別な意味のある記号なのかな、と思われるかもしれませんが、JavaScriptでは $、_といった記号は通常のアルファベットや数字などと一緒で変数名に使うことができます。

そう、$ とは単なる変数なのです。

では、どんな変数なのでしょう。

ブラウザのJavaScriptコンソールで確かめてみましよう。
jQueryが使われてるサイト¹で

console.log($);

とコンソールに打ってください。

このように表示されたと思います。

そう、 jQuery の $ は関数なのです。

この関数の主な働きは、与えられた文字列（セレクタだったりHTMLだったり）を元にjQueryオブジェクトを作ることです²。これは何かに似てると思いませんか？　そう、クラスですね。

JavaScriptにおけるクラスのメソッドは クラス.prototype に生えてますが、jQueryオブジェクトの場合はどこにあるのでしょう。

その答えは、$.fn です。

コンソールで見るとこんなかんじです。見慣れたメソッドたちがいっぱいですね。 $(".my-plugin").myPlugin() 系のプラグインはこれをいじってます。

では、 $.get() などの $ に直接生えているのはというと、JavaScriptでは関数はオブジェクトであることを思い出してください。オブジェクトなのでそこにメソッドを生やせるということです。

$ ()→ jQueryオブジェクト ┌> .addClass()
├ .getJSON()           │  .animate()
├ .each()              │  .data()
├ .isArray()           │  ：
│：                    │
└ .fn ─────────────────┘

さて、ではなぜ $ 一つに全ての機能をまとめているのでしょう³。

Webブラウザ上のJavaScriptではモジュール機能は実用的なレベルではありません。その上、jQueryができた当初はBrowserifyやwebpack、Rollupといったモジュールバンドラーもありませんでした。

そこで、jQuery含む多くのライブラリはそれぞれのライブラリごとにグルーバル変数に関数などを定義していました。そこで、グローバルには何か一つオブジェクトを置いておき、そこに自身のライブラリの関数を生やしていく、という方法が採られました。

そして、その後のWeb事情

モダンなWebをめざして

その後、Web開発事情は大きく変化しました。

先程申し上げたサーバー↔クライアント間の通信により、Webアプリはサーバー主体から重きをクライアントに移し、より効率のよいWebフロントエンドの開発方法が求められ、Node.jsというサーバーで動くJavaScriptの開発もその後を押し、JavaScriptはもはや簡単なDOM操作を行うだけの言語ではなくなりました。

周りを取り巻く環境だけでなく、HTML/CSS/JavaScript自身も進化していき、jQueryでやっと実現できた機能がブラウザ側でサポートしていきます。

ライブラリ/フレームワーク戦国時代

そして、肥大化していくクライアントサイドを処理するのに、Backbone.jsを皮切りに、Angular、React、Vue、Riotなど様々なライブラリが登場します。

そして、モダンなライブラリの代名詞とも言える仮想DOMという概念がこれまでのJavaScriptの常識を覆しました。

すると、DOM操作をすることは少なくなり、jQueryの時代はもう終わったのではないかという声が出てきました。

jQueryはいらない子？

なぜ使わなくても（あるいは使わないほうが）いいのか？

jQueryは必要ないと考られる理由はいくつかあります。

jQueryはたくさんのブラウザの挙動を標準化するのをJavaScriptでブラウザのAPIを無視し、新しくjQueryオブジェクトというものを定義し、１からメソッドを追加することで実現しています。
この方法は、ブラウザ間の挙動の統一が取れてなかったころは都合がよかったのですが、今では逆に車輪の再発明をしてしまうことになり、パフォーマンス的にもよくないです。

そして、jQueryはできた時のWeb事情に合わせて作られている（当たり前ですが）ので今のWeb事情とか合わないという点もあります。

また、外部のライブラリを使うとなると埋め込み方法やバージョン管理にもリソースを使う必要があります。

もし、例えばスムーズスクロールなどライブラリを必要とする場合でも、jQueryの他にその機能だけを担う別のsweet-scrollなどのライブラリを使えばいいだけです。わざわざ使わない機能がついたjQueryを使う必要はありません。

IEなど古いブラウザをサポートしなければいけないときは、APIをECMAScriptで定められた挙動に再現してくれるBabelとPolyfillを使いましょう。

jQueryを使ったプラグインは、たいていjQueryを使わないライブラリがあります。探してみましょう。

$ を使ってDOMオブジェクトを取得したいときは、

const $ = (...s) => document.querySelectorAll(...s)

とすればいいです。

jQueryはクソライブラリ？

ここまで読むとjQueryをディスってるように聞こえますが、jQueryは素晴らしいライブラリだと思います。
jQueryは黎明を支えてきたライブラリです。

ブラウザ標準のAPIにはjQueryから着想を得たものがたくさんありますし、Ajaxをあれほど簡単に書けなければSPAという概念が生まれることもなかったかもしれません。

jQueryが果たした功績は大きいですが、もう役割は終わったと、そう感じています。

参考

jQuery （公式サイト）
jQuery - Wikipedia

jQuery （公式サイト）とか ↩
また、$ 関数の引数に関数を与えた場合は、$(document).on("ready", 関数) （DOM木構造が最初に完成したら呼ばれるイベント）のエイリアスになります。 ↩
Prototype.js など、他の $ 変数を使うライブラリと競合した時のために、jQueryという変数でも $ にアクセスできるようになってます。 ↩

jQueryとは何なのか？ なぜ使わなくても（あるいは使わないほうが）いいのか？