WordPressでjQueryをネイティブJSへ移行手順

jQueryをネイティブJavaScriptへ移行する手順

WordPressでjQueryをやめたい場合、最初に理解しておくべきことがあります。
jQueryは「削除」するものではなく「置き換え」るものです。

ここを誤ると、ほぼ確実にサイトが壊れます。
実際に多くのトラブルは、jQueryを一気に外したことによって発生しています。

安全な方法は、依存を確認しながら段階的にネイティブJavaScriptへ移行することです。

なぜ単純削除が危険なのか

jQueryはDOM操作ライブラリに見えますが、実際には次の役割を担っています。

• イベント管理
• DOM取得
• Ajax通信
• アニメーション
• ブラウザ差異吸収

つまり単なる「便利な書き方」ではありません。
そのため、対応するネイティブAPIを理解せず削除すると機能が止まります。

手順1：まず依存箇所を特定する

最初に行う作業はコード変更ではありません。
どこでjQueryが使われているかを調べることです。

テーマディレクトリで検索します。

grep -R "jQuery(" .
grep -R "$(" .

ヒットしたファイルが移行対象です。
ただし `$(` は他ライブラリの可能性もあるため、文脈を確認します。

次にブラウザコンソールで確認します。

jQuery.fn

プラグインが登録されている場合、jQuery依存です。

手順2：document.readyを置き換える

最初に移行すべきなのは `document.ready` です。
ほぼすべてのテーマに存在します。

jQuery：

jQuery(function($){
  initMenu();
});

ネイティブ：

document.addEventListener('DOMContentLoaded', function(){
  initMenu();
});

これだけで動作するケースも多いです。
ただし、読み込みタイミングが微妙に変わるため確認は必須です。

手順3：DOM取得の置き換え

最も多いコードです。

jQuery：

$('.menu')

ネイティブ：

document.querySelectorAll('.menu')

1つだけ取得する場合：

document.querySelector('.menu')

ここでの注意点は、戻り値です。
jQueryは配列風オブジェクト、ネイティブはNodeListです。
そのまま `.click()` は使えません。

手順4：イベント処理の移行

jQuery：

$('.btn').click(function(){
  openMenu();
});

ネイティブ：

document.querySelectorAll('.btn').forEach(function(el){
  el.addEventListener('click', openMenu);
});

ここで多くの人がハマります。
jQueryは複数要素に自動適用されますが、ネイティブはループが必要です。

手順5：クラス操作の置き換え

jQuery：

$('.nav').addClass('open');
$('.nav').removeClass('open');
$('.nav').toggleClass('open');

ネイティブ：

const nav = document.querySelector('.nav');
nav.classList.add('open');
nav.classList.remove('open');
nav.classList.toggle('open');

この部分は非常に簡単に移行できます。

手順6：Ajax通信

jQuery：

$.ajax({
  url: '/api',
  method: 'POST',
  data: {id:1},
  success: function(res){
    console.log(res);
  }
});

ネイティブ：

fetch('/api', {
  method: 'POST',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify({id:1})
})
.then(res => res.json())
.then(data => console.log(data));

ここは最も書き方が変わる部分です。

手順7：jQueryを読み込まない

置き換えが終わったら、最後に削除します。

function remove_jquery(){
  if(!is_admin()){
    wp_deregister_script('jquery');
  }
}
add_action('wp_enqueue_scripts','remove_jquery',100);

管理画面では残すのが安全です。

失敗しやすいポイント

• プラグインが依存している
• スライダーライブラリがjQuery前提
• インラインスクリプトが残っている

特にスライダー（slick, owl）は注意が必要です。

移行のコツ

一気にやらないことです。
1機能ずつ置き換え、毎回動作確認します。

また、旧ブラウザ対応が必要なサイトでは、polyfillが必要になる場合があります。

まとめ

jQuery移行は「高速化作業」ではありません。
フロントエンドの再設計です。

安全に進めるなら、削除から始めてはいけません。
まずはdocument.readyとイベント処理から置き換えます。

そして、最後にjQueryを外します。

順番を守れば、WordPressでも問題なくネイティブJavaScriptへ移行できます。
問題の多くは技術ではなく、手順を飛ばしたことによって起きます。