「jQueryはオワコン」「いや、jQueryは便利！」議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。

ちなみに結論を先に書いておくと

・ レンダリングブロックしない構成、かつ最新版を使おう
・ jQueryはいいものだけど、脱jQueryした方が手っ取り早い

です。

1. 保守しないといけない

サポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。

jQuery1, 2 は、Officially End of Life（公式に廃止）が名言されてます。ですので、「jQuery におけるクロスサイトスクリプティングの脆弱性」みたいな報告も修正されていません。EOLのバージョンはやめましょう。

ちなみにjQueryを外すとバージョン管理はしなくてよくなります。

2. 遅くなりがち

jQueryを呼び出すscript要素はどこに書いていますか？初心者向けではブラウザが意図しない挙動をしないようにhead要素に書くチュートリアルが多いです。ブラウザは defer や async を使っていないscriptタグがあった場合、後続の読み込みを中断してscriptタグの呼び出し完了を待ちます。つまり遅延します。

多くの脱jQuery派がいう「今はJavaScriptで書けるからjQueryは不要」論はこの部分で、jQueryを使わなくても実現できる処理なのに、jQueryを使ってユーザを待たせることは正しいことですか？という問いかけだと思っています。

ですので、もし使うなら、async/deferをつけて読み込み順序をコントロールしましょう。その場合、jQueryが読み込まれる前にHTMLのparseが完了しますので、readyイベントで発火させるメソッドは動かなくなりますので書き換えが必要です。

3. プラグインが10年前の設計

そして多くは「jQueryを使いたいんじゃない。jQueryを使うこと前提につくられた多様なプラグインを使いたいんだ」というニーズで採用されていると思います。jQueryプラグインはWebがオープンである証左ですので、私もとても好きです。ただ、作者はjQueryを利用しておらず保守されていないことがよくあります。そのことで、プラグインが10年前の設計のままだったりします。例えば、以下のようなスライダープラグインがあるものと仮定しましょう。

div要素にプラグイン指定classである .plugin-slider-section をつけると、子要素のdiv要素はすべてfloatで配置される。そして領域外は非表示になり、スライダーとして利用できる。

このjQueryプラグインはレンダリングブロックする形で配置されるでしょう。なぜならプラグインの読み込みが完了してDocument Ready時点で有効になっていないと、スライダーであるはずのdiv要素はスライダーになっておらずに（プラグイン読み込みが完了するまで）レイアウトを崩すからです。

このように10年前では問題にならなかった（むしろデファクトスタンダードだった）設計が現代では推奨されていないパターンを見かけます。プラグインの内部処理とDOM操作がどうなってるかを把握して、プラグインが適切に設計されているかを確認しましょう。あと「プラグインの依存があるからjQueryのバージョンをあげれない」ことがあるようならそのプラグインは脆弱性の温床になるので使わない方がいいですよね。

ちなみにプラグイン地獄（50個とか100個のプラグインを読み込む）は論外なので割愛します。

正しいjQueryの使い方

jQueryはJavaScriptでDOM操作を容易にするためのライブラリという原点に振り返ってみると、まずDOM操作のタイミングを考える必要があります。読み込み時点で実行するDOM操作は遅延要因になるので避けるほうがいいでしょう。ユーザのクリックであったりスクロール量などを発火イベントにしてjQueryを利用するのがよさそうです。また、animate メソッドは複雑なアニメーションをとても簡潔に書くことができるので個人的に好きです。

ですので正しいjQueryの使い方は「レンダリングブロックしない」「最新版を使い続ける」だと思います。

本稿ではプロダクション環境について書きましたが、デザイン案を伝えるためにjQueryを開発環境で使ってみるなどの用途はとても適切だと思います。jQueryは、用法・用量を守って正しくお使いください。

本題） ということを初心者に伝えるの難しくない？

って、初心者に伝えるの難しくないですか？個人的にjQueryの一番の問題点は、次のステップが分断されていることかなぁと思っています。

WordPressを覚えたら、その知識で次にPHPを学ぶという手があります。そこからデータベースにいくのもいいでしょう。私はそうやってバックエンドを学びました。JavaScriptを書き続けて、言語をマスターするというのもありです。Vue.jsなどのJavaScriptフレームワークは独自のAPIを用意しつつもJavaScriptで処理を書くことが前提になっているので、フレームワークの外にでてもコードを書くことはできます。

しかし、jQueryというライブラリはとてもよくできていて、jQueryで世界観を完結することが可能です。個人的には、JavaScriptフレームワークのように「ライブラリに頼らず、JavaScriptを書け！！」みたいな話にはなりにくいと思っていて、次へのステップが見えにくいのがすばらしいところでもあり、難しいところだと捉えています。

ですので、用法・用量を守って正しく使う分は私もすばらしいライブラリだと思いつつ、じゃあ初心者に「これを使ったら簡単に実現できるよ」と上記の内容をちゃんと伝えるのは難しいので、それならjQueryを最初から教えない方がいいのではないかと思っています。

jQueryで得られるDXってまだ高い？

20年前、メモ帳を開いてHTMLを書いてブラウザの表示を変えることは達成感のあるDX（開発者体験／Developer Experience）を得ることができました。今ではWebサイト作成支援ツールがたくさんあり、これによって感動する人は少なくなってきた印象があります。「CSSでフォントカラーを変えることができた！すごい！！」はどうですか？やっぱり得られるDXはツールの進化とWebサイトのリッチ化によってなくなってきたのではないでしょうか。

私がjQueryにはじめて出会った時はまさに「高いDXを持ったツール」でした。書きにくいJavaScriptをシンプルに書け、プラグインを使えばWebはリッチになり、ユーザは満足してくれる！すばらしいツール！！

もうそれも終わりに近づいているのではないでしょうか。JavaScriptは書きやすくなり、npmによってパッケージのバージョン管理が可能になりました。jQueryを同期的に読み込むことはWebサイトの表示遅延につながり、プラグインが増えるほどそれは顕著になります。高速なWebサイトも増えました。10年前の「Webサイトは遅くて当たり前」な時代はもう時代送れです。

まだjQueryのDXは「すごい！！」と歓声があがるようなものでしょうか。

世間にはもう「はじめて教わったWebはAngularだった」「Vueだった」「コールバック地獄なにそれ。Promiseより先にRxJSを教わった」みたいな若い人がでてきています。技術は進化し、ユーザはよりリッチ、より高速なUXを当たり前に体験している中で、「jQueryで簡単にすごい機能を実装できる」といつまで言えるか、見直さないといけない時代になったのかなと最近強く思います。

個人的にはWeb技術でモバイルアプリをつくって、ストアから配信できるIonic Frameworkという技術がすごく好きなので、モダン技術に興味ある方はぜひトライしてもらえればと思います。

それでは、また。