複数JSライブラリ共存で起きるjQuery問題

複数ライブラリ共存時にjQueryが起こす問題

WordPressサイトで「あるプラグインを入れた瞬間にメニューが動かなくなった」という現象は珍しくありません。
しかも、そのプラグインを停止すると直ります。
しかしエラーは出ていません。

このタイプの不具合の多くは、jQueryそのものではなく“複数JavaScriptライブラリの共存”が原因です。

つまり、jQueryが壊れたのではありません。
jQueryが“他のライブラリと同時に存在してしまった”ことが問題です。

WordPressはJavaScriptが1つではない

WordPressは単一のアプリケーションではありません。
実際のページでは、次のすべてが同時に動いています。

• テーマのJavaScript
• プラグインのJavaScript
• WordPressコアのJavaScript
• 外部ウィジェット（SNS・広告・解析）

それぞれが別の作者、別の思想、別のライブラリで作られています。
つまり1ページの中に、複数のフロントエンドアプリケーションが存在します。

このとき最初に衝突するのがjQueryです。

「競合」とは何が起きているのか

競合は抽象的な言葉ですが、実際に起きているのは非常に具体的です。

同じグローバル変数を別のプログラムが書き換えている状態です。

例えば、次の2つのコードがあるとします。

var app = {};

var app = function(){};

後から読み込まれた方が、前の定義を破壊します。
JavaScriptにはこれを防ぐ仕組みがありません（モジュール未使用時）。

jQueryの `$` はまさにこれです。

jQuery以外も `$` を使う

多くのライブラリが `$` を使用します。

• Prototype.js
• MooTools
• Zepto
• 一部のUIフレームワーク
• 古いスライダー・ギャラリー

そのため、jQueryを読み込んだだけでは安全ではありません。
読み込み順序によって意味が変わる変数になります。

典型的な壊れ方

例：スライダープラグインを追加した場合

1. WordPressがjQueryを読み込む
2. テーマがjQuery前提のコードを登録
3. プラグインが別ライブラリを読み込む
4. `$` が上書きされる

結果：

• スライダーは動く
• メニューが動かない

つまり、片方が直り、片方が壊れます。

二重読み込みという致命的問題

最も深刻なパターンがあります。
jQueryの二重読み込みです。

テーマが以下を含むケースです。

<script src="/js/jquery.min.js"></script>

一方でWordPress本体もjQueryを読み込みます。
これにより、ページ上に「2つのjQuery」が存在します。

ここで奇妙な現象が起きます。

• イベント登録は成功する
• しかしクリックしても反応しない

なぜかというと、イベントを登録したjQueryと、DOMを操作するjQueryが別物だからです。

JavaScript的には次の状態です。

• jQueryA がイベント登録
• jQueryB がDOMを取得

オブジェクトが一致しないため、イベントが発火しません。

これはエラーにならないため、原因特定が非常に難しい不具合です。

jQueryプラグインが動かない理由

よくある症状：

「slickは動くのに、lightboxが動かない」

この原因も同じです。
jQueryプラグインは、自分を読み込んだjQueryインスタンスにしか登録されません。

(function($){
  $.fn.slider = function(){};
})(jQuery);

この `$.fn` は特定のjQueryに紐づきます。
別のjQueryでは存在しません。

つまり、2つ目のjQueryが読み込まれた瞬間、最初のプラグインは消えたように見えます。

WordPressがnoConflictを使う本当の意味

WordPressが `noConflict()` を強制するのは、単に記号の衝突を避けるためではありません。
複数ライブラリが同時に存在する前提だからです。

WordPressは「どのプラグインが何を読み込むか」を制御できません。
したがって、少なくとも `$` の衝突だけは回避します。

ただし、それでも防げない問題があります。
それが二重読み込みです。

よくある危険な対応

CDN版に置き換える

高速化記事で紹介されがちな方法です。
しかしWordPressの依存関係管理から外れます。

結果：

• プラグインA → WordPressのjQueryを期待
• プラグインB → CDNのjQueryを使用

両方が存在します。

遅延読み込み（lazy load）

JavaScriptの遅延読み込みはSPAでは有効です。
しかしWordPressでは、実行タイミング依存のコードが多く破壊的変更になります。

確認方法（実務向け）

ブラウザコンソールで次を実行します。

jQuery.fn.jquery

バージョンが表示されます。
次にNetworkタブで `jquery` を検索します。

2件以上ヒットしたら、二重読み込みです。

まとめ

WordPressのjQuery問題の本質は、古い技術ではありません。
複数の独立したプログラムが同じページで同時実行される構造です。

jQueryはその中心にあるため、問題が表面化しやすいだけです。

そして多くの不具合は、プラグインのバグではありません。
ライブラリの衝突です。

「特定のプラグインを入れると壊れる」場合、疑うべきは相性ではなく、JavaScriptの読み込み構造です。

WordPressでは、jQueryを削除するより、まず「いくつ読み込まれているか」を確認することが最初の一歩になります。