タイトルは「無くしてわかるありがたさ 親と健康とセロテープ」のもじりです(親や健康にまつわる話題はありませんので、そこはご了解ください)。
jQueryを排除しようとしたら、逆にその利便性に気付かされることとなりました。
jQueryプラグイン
多くのプラグインがあることが、エコシステムとしてのjQueryの存在感を高めていることは、いうまでもありません。ただ、$.fn.hogehogeはjQueryエレメントへの適用ですが、$.foobarは、「名前空間だけjQuery」で、あまり依存性が高くない以上、この形式は廃れていくのかなと思っています。
そして、CommonJSにjQueryプラグインを入れてしまうと(特に、$.fnにセットするものの場合)jQueryオブジェクトへの副作用となってしまって、requireの返り値から使う形式にならないので、合わなさはけっこう感じます。
DOMトラバース
シンプルなメソッド名
DOMのメソッドは、getElementsByTagNameとかsetAttributeのように、長いものが多いですが、jQueryは.attrのように簡略になっていますし、メソッドチェーンもできて便利です。
ただ、Visual Studio Codeを使いだしたら、DOMのメソッド名にも補完が効くようになって、長くてもそこまで困らないかなという感じもしてきています。
データを吊るす
$().data()では、文字列などJSONエンコード可能なものだけでなく、プロトタイプのあるようなJavaScriptのオブジェクトを格納することすらできてしまいます。うまくやらないとメモリリークの危険があるとのことですが、正しいやり方がよくわかりません。
ネイティブで賄えるようになったもの
セレクタ系はquerySelectorAllが出たことでjQueryなしでもあまり困らなくなりました。クラスも、昔はclassNameを自力でパースするしかなかったので.addClassなどが便利だったのですが、DOMネイティブにclassListが登場して、jQueryと似たような操作性で使えるようになっています。以前に書いたように、.closestもネイティブ実装が登場しています。
そして、.afterや.before、.prependや.appendといったものまでDOM入りを果たしていて、「jQueryの存在感」を感じさせられてしまいます(Polyfill)。
イベント処理
イベントを起こす
jQueryからイベントを起こすには、.trigger('イベント名')だけで済むのですが、ネイティブでやろうとすると、create→init→dispatchの3段階が必要など、地味に手間でした。
イベントデリゲーション
jQueryでは.on(イベント名, セレクタ, イベントハンドラ)だけで行える、イベントバブリングで下位のエレメントを拾う処理も、DOMでは対象エレメントの判定が自前で必要そうな感じでした。
アニメーション
CSS3でアニメーションが定義されるようになりましたが、jQueryのほうが便利な場面もいくつかあります。
scrollTopのアニメーション
スクロール位置の制御はCSSではできないので、jQueryなしではタイマーを計って自力で動かす他ありません…と思ったら、マージンで制御する技があるようです。
複数アニメーションの制御
jQueryでは、1つのエレメントに複数のアニメーションを与えると、それらは順番に実行されます。CSSのTransitionでそれをやろうとすれば、transitionEndなどで制御する必要があります。