ネイティブAPIで置き換えられる10のjQuery機能
いくつかの便利なメソッドのためだけにjQueryを読み込んでいませんか?モダンブラウザには、jQueryのパターンのほとんどを直接処理できるネイティブAPIが搭載されており、多くの場合、jQueryが提供したことのないより優れたパフォーマンスと機能を備えています。
このガイドでは、バニラJavaScriptで自信を持って置き換えられる10の一般的なjQuery機能を紹介します。各置き換えはすべてのエバーグリーンブラウザで動作し、ポリフィルは不要で、メンテナンスすべき依存関係が1つ減ります。
重要なポイント
querySelector、classList、addEventListenerなどのネイティブDOM APIは、jQueryのシンプルさに匹敵し、より優れたパフォーマンスを提供します- Fetch APIは、AbortControllerによるリクエストのキャンセルなど、jQueryが提供したことのない機能を備えたPromiseベースのネットワーキングを提供します
- Web Animations APIはメインスレッドの外でアニメーションを実行し、jQueryの
animate()メソッドよりもスムーズなパフォーマンスを実現します - jQueryの削除には完全な書き直しは必要ありません。新しいコードから始めて、既存の使用箇所を段階的に移行しましょう
querySelectorによるDOM選択
jQueryの$()セレクタはDOMクエリをシンプルにしました。ネイティブJavaScriptは現在、そのシンプルさに匹敵します:
// jQuery
$('.menu-item')
$('#header')
// Native
document.querySelectorAll('.menu-item')
document.querySelector('#header')ネイティブメソッドは、任意の有効なCSSセレクタを受け入れます。単一の要素にはquerySelectorを、コレクションにはquerySelectorAllを使用します。どちらもdocumentだけでなく任意の要素で動作するため、スコープ付きクエリが簡単です。
classListによるクラス操作
classList APIは、jQueryのクラスメソッドをよりクリーンな構文で置き換えます:
// jQuery
$el.addClass('active')
$el.removeClass('active')
$el.toggleClass('active')
$el.hasClass('active')
// Native
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.contains('active')ネイティブのclassListは、1回の呼び出しで複数のクラスもサポートします:el.classList.add('active', 'visible')。replace()メソッドはクラスをアトミックに入れ替えます。これはjQueryでは2回の呼び出しが必要でした。
addEventListenerによるイベント処理
jQueryのイベントバインディングをaddEventListenerで置き換えます:
// jQuery
$el.on('click', handler)
$el.off('click', handler)
// Native
el.addEventListener('click', handler)
el.removeEventListener('click', handler)ネイティブのイベント処理は、jQueryがクリーンに公開していない機能を提供します。passiveオプションはスクロールパフォーマンスを向上させ、onceは最初の呼び出し後に自動的にリスナーを削除します:
el.addEventListener('scroll', handler, { passive: true })
el.addEventListener('click', handler, { once: true })closestによるDOMトラバーサル
jQueryのclosest()メソッドは、セレクタに一致する最も近い祖先を見つけます。ネイティブの同等メソッドは同じように動作します:
// jQuery
$el.closest('.container')
// Native
el.closest('.container')オプショナルチェーンと組み合わせることで、より安全なトラバーサルが可能です:el.closest('.container')?.querySelector('.child')。
fetchによるネットワークリクエスト
Fetch APIは、jQueryのAJAXメソッドをPromiseベースのインターフェースで置き換えます:
// jQuery
$.ajax({ url: '/api/data' }).done(callback)
// Native
fetch('/api/data')
.then(response => response.json())
.then(callback)FetchはAbortControllerによるリクエストのキャンセルを提供します。これはjQueryがネイティブに提供したことのない機能です。
Discover how at OpenReplay.com.
FormData APIによるフォームデータ
フォームのシリアライズにjQueryは不要になりました:
// jQuery
$('form').serialize()
// Native
const formData = new FormData(formElement)FormData APIはファイルアップロードを直接処理し、fetchとシームレスに統合されます。jQueryのserialize()と同様のクエリ文字列が必要な場合は、FormDataインスタンスをURLSearchParamsに渡します。
remove()による要素の削除
要素の削除は、ネイティブのremove()でよりシンプルになりました:
// jQuery
$el.remove()
// Native
el.remove()もうparentNode.removeChild(el)のような複雑な操作は不要です。
コレクションの反復処理
jQueryはコレクションを自動的に反復処理します。ネイティブJavaScriptは標準的な配列メソッドを使用します:
// jQuery
$('.items').each(function() { /* ... */ })
// Native
document.querySelectorAll('.items').forEach(el => { /* ... */ })NodeList.forEach()は直接動作します。mapやfilterなどの配列メソッドを使用する場合は、配列にスプレッドします:[...document.querySelectorAll('.items')]。
CSSとWeb Animations APIによるアニメーション
CSSトランジションはほとんどのアニメーションニーズに対応します。プログラマティックな制御には、Web Animations APIがjQueryのanimate()が提供していたものに加えて、より優れたパフォーマンスを提供します:
// jQuery
$el.animate({ opacity: 0 }, 300)
// Native
el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 })ネイティブAPIは、コンポジタフレンドリーなアニメーションの場合、メインスレッドの外でアニメーションを実行できます。
Document Ready
jQueryのreadyハンドラをDOMContentLoadedで置き換えます:
// jQuery
$(document).ready(handler)
// Native
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', handler)
} else {
handler()
}または、defer属性を付けてスクリプトを<body>の最後に配置し、readyチェックを完全にスキップします。
まとめ
コードベースからjQueryを削除するのに、完全な書き直しは必要ありません。新しいコードから始めて、デフォルトでネイティブAPIを使用しましょう。既存のjQuery使用箇所については、You Might Not Need jQueryのようなツールが、簡単な置き換えを特定するのに役立ちます。
モダンDOM APIは単なるjQueryの代替ではありません。多くの場合、より良い選択肢です。より高速で、より多くの制御を提供し、ユーザーがすでに持っているすべてのブラウザに搭載されています。
よくある質問
必ずしもそうではありません。現在のコードベースでjQueryがうまく機能している場合、削除する労力に見合わない可能性があります。新しいコードにはネイティブAPIを使用し、既存のjQuery使用箇所は通常のメンテナンス中に段階的に移行することに焦点を当てましょう。目標は依存関係の削減であり、安定したコードの書き直しではありません。
この記事で取り上げたすべてのメソッドは、Chrome、Firefox、Safari、Edgeを含むエバーグリーンブラウザで動作します。Internet ExplorerはfetchやclassList.replace()などの一部機能をサポートしていませんが、IEは2022年にサポート終了を迎えました。モダンブラウザをターゲットにする場合、ポリフィルは不要です。
一般的にはい。ネイティブAPIは、jQueryの抽象化レイヤーとメソッドチェーンのオーバーヘッドを回避します。パフォーマンスの差は、DOM操作が多い処理やアニメーションで最も顕著です。ネイティブメソッドは、jQueryがアクセスできないブラウザの最適化を活用できます。
jQueryプラグインは機能するためにjQueryを必要とします。特定のプラグインに依存している場合は、それらのコンポーネント用にjQueryを維持しながら、他の場所ではネイティブAPIを使用してください。多くの人気プラグインにはバニラJavaScriptの代替があります。または、アプリケーション内の特定のモジュールにjQueryの使用を分離することもできます。
Complete picture for complete understanding
Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.
Check our GitHub repo and join the thousands of developers in our community.
