querySelectorでjQueryは代替できるのか

`document.querySelector`でjQueryは置き換えられるのか

結論から言うと、一部は置き換えられますが、jQueryそのものの代替にはなりません。

「jQueryはDOMを取得するためのもの」という理解が広まっていますが、それはjQueryの役割の一部に過ぎません。
確かに `document.querySelector` の登場によって、jQueryが担っていた“セレクタ機能”はほぼ不要になりました。
しかし、jQueryが普及した本当の理由はセレクタではありません。

問題は「DOM取得」ではなく「ブラウザ差異とイベント管理」です。

なぜ昔はjQueryが必要だったのか

現在のブラウザでは、次のコードはどこでも動きます。

document.querySelector('.menu');

しかし、かつては動きませんでした。
特に問題だったのはInternet Explorerです。

• `getElementsByClassName` が無い
• `addEventListener` が無い
• DOMの構造がブラウザごとに違う

つまり、同じJavaScriptを書いてもブラウザごとに壊れていました。

そこでjQueryが提供したのが「統一API」です。

$('.menu').click(function(){});

この1行は、ブラウザごとの分岐を内部で吸収していました。
開発者はブラウザを意識せず書けたのです。

`querySelector`が解決したこと

モダンブラウザではDOM APIが標準化されています。
そのため、DOM取得だけなら完全に置き換え可能です。

jQuery	ネイティブ
$('.box')	document.querySelectorAll('.box')
$('#id')	document.getElementById('id')

ここだけを見ると、jQueryは不要に見えます。
実際、単純なトグルメニュー程度なら問題なく置き換えられます。

置き換えできない部分

問題はここからです。
jQueryは単なるセレクタではありません。

イベント管理

jQuery：

$('.btn').on('click', handler);

ネイティブ：

document.querySelectorAll('.btn').forEach(el=>{
  el.addEventListener('click', handler);
});

書き方が増えただけに見えますが、本質的な違いがあります。
jQueryは「後から追加された要素」にもイベントを適用できます。

$(document).on('click','.btn',handler);

これはイベント委譲と呼ばれる機能です。
Ajaxで生成されたボタンでも動きます。

ネイティブでは追加の設計が必要になります。

Ajax

jQuery：

$.get('/api',res=>console.log(res));

ネイティブ：

fetch('/api')
  .then(r=>r.json())
  .then(d=>console.log(d));

現在はfetchで代替できますが、エラー処理や互換性を自分で書く必要があります。

アニメーション

jQuery：

$('.panel').slideDown();

ネイティブには同等APIはありません。
CSSアニメーションやrequestAnimationFrameを組み合わせる必要があります。

WordPressで重要になる点

WordPressでは、DOMが動的に書き換わることが多いです。

• ブロックエディタ
• Ajax検索
• フィルタリング
• コメント返信

このような環境では、イベント委譲が頻繁に使われます。
そのため、単純な `querySelector` 置き換えでは不具合が出ます。

典型的な失敗例

メニューのクリック処理を移行した場合：

document.querySelector('.menu').addEventListener('click',toggle);

これ自体は動きます。
しかし、ハンバーガーメニューが再描画されるとイベントが消えます。

jQuery版は動き続けます。
ここが大きな差です。

ではjQueryは不要なのか

現在のフロントエンド開発では、SPAフレームワークがイベント管理を担当します。
ReactやVueがその役割を担います。

しかしWordPressテーマでは事情が異なります。
フレームワークを使わず、断片的なJavaScriptが積み重なります。

この環境では、jQueryの設計は今でも合理的です。

向いているケース

querySelector移行が適している例：

• 自作テーマ
• 単純なUI
• JavaScriptを自分で管理

向かない例：

• 多数のプラグイン
• 動的DOM操作が多い
• 既存テーマ改修

注意点

jQueryを減らすこと自体は悪くありません。
しかし「書き方が新しい」ことと「安全」は別です。

ネイティブJSにすると、責任範囲が広がります。

• イベント管理
• 例外処理
• ブラウザ差異

これらを自分で持つことになります。

まとめ

`document.querySelector` はjQueryの代替ではありません。
jQueryの一機能の代替です。

jQueryは「DOM取得ライブラリ」ではなく、ブラウザ差異とイベント管理を抽象化した環境です。
その役割を理解しないまま置き換えると、コードは新しくなっても安定性は下がります。

WordPressでは特に、見た目が動いているかではなく、
「動的に変化するページでも動き続けるか」を基準に判断する必要があります。

新しいAPIを使うことが目的ではありません。
サイトが壊れないことの方が、常に優先されます。