6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

closestをjQueryなしで書こうとしたら

Posted at

今でこそ仮想DOM系ライブラリの普及で活躍の場を狭めつつあるjQueryですが、そういうライブラリを入れるのが大げさに過ぎてしまうような、ちょっとしたものを作るには便利なので、今でも活躍の場はそれなりにあります。

そして、メインとなるDOM操作でも、jQueryは単なるDOMのラッパーというわけではなく、便利なメソッドを用意しています。今回のテーマとなる.closestもそんなメソッドの1つです。

.closestメソッド

この.closestメソッドは、ふつうの探索系メソッド(jQueryの.findやDOMのgetElementsByClassNameなど)と違って、親の方へと探索を進めていって、(自分自身も含めて)最初にマッチした要素を返す、というものです(リファレンスの日本語訳)。

「JavaScriptの動作を決めるような特殊なクラスや属性を、親にまとめて書く」というシチュエーションなど、ちょくちょく使えるメソッドです。

jQueryなしで書くには?

こういう挙動をjQueryなしでするにはどうすればいいのか調べていたのですが…なんと最近のブラウザはDOMに直接Element.closestを実装していることが判明しました(MDN)。シグネチャもセレクタを渡すという、jQueryと全く同じもので、iOS 9以上など、最近のブラウザならネイティブに使えるとのことでした。IEなど非対応なブラウザ向けに、Polyfillも用意してありました(MDNのページやGitHubにあります)。

「準標準」としてのjQuery

jQueryにしかなかったはずの機能がDOMに実装されたのは、.closestだけではありません。昔はclassNameを自力でパースするしかなかったクラス処理ですが、jQueryにはhasClassaddClassremoveClasstoggleClassとクラス制御に便利なメソッドがあります。その後、DOM側でclassListMDN)というものが現れて、containsaddremovetoggleと多くが同じ名前で使えるようになっています。

このように、jQueryはある種、「DOMにあるべき機能の指標」としても機能しています。C++のBoost、RubyのActiveSupportのように、「準標準」とでもいうべきライブラリは、他の言語にも存在しています。

6
0
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
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?