JavaScript
jQuery
dom

親と健康とjQuery

More than 1 year has passed since last update.

タイトルは「無くしてわかるありがたさ 親と健康とセロテープ」のもじりです(親や健康にまつわる話題はありませんので、そこはご了解ください)。

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('イベント名')だけで済むのですが、ネイティブでやろうとすると、createinitdispatchの3段階が必要など、地味に手間でした。

イベントデリゲーション

jQueryでは.on(イベント名, セレクタ, イベントハンドラ)だけで行える、イベントバブリングで下位のエレメントを拾う処理も、DOMでは対象エレメントの判定が自前で必要そうな感じでした。

アニメーション

CSS3でアニメーションが定義されるようになりましたが、jQueryのほうが便利な場面もいくつかあります。

scrollTopのアニメーション

スクロール位置の制御はCSSではできないので、jQueryなしではタイマーを計って自力で動かす他ありません…と思ったら、マージンで制御する技があるようです。

複数アニメーションの制御

jQueryでは、1つのエレメントに複数のアニメーションを与えると、それらは順番に実行されます。CSSのTransitionでそれをやろうとすれば、transitionEndなどで制御する必要があります。