今でこそ仮想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にはhasClass
、addClass
、removeClass
、toggleClass
とクラス制御に便利なメソッドがあります。その後、DOM側でclassList
(MDN)というものが現れて、contains
、add
、remove
、toggle
と多くが同じ名前で使えるようになっています。
このように、jQueryはある種、「DOMにあるべき機能の指標」としても機能しています。C++のBoost、RubyのActiveSupportのように、「準標準」とでもいうべきライブラリは、他の言語にも存在しています。