LoginSignup
5
3

More than 5 years have passed since last update.

親と健康とjQuery

Posted at

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

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などで制御する必要があります。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3