タイトルは「無くしてわかるありがたさ 親と健康とセロテープ」のもじりです(親や健康にまつわる話題はありませんので、そこはご了解ください)。
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
などで制御する必要があります。