https://idea-hack.com/blog/83765/
WordPressにおいて、jQueryのスクリプトエラーに悩まされずに実装する4つの方法

WordPressにおいて、jQueryのスクリプトエラーに悩まされずに実装する4つの方法

WordPressでjQueryを使うとスクリプトエラーに悩まされることが多々あります。この原因をWordPressの仕様だと気づかない人は多いです。そこでWordPressにおけるjQueryのメカニズムをまとめました。

WordPressは16年の歴史があるが、その中でずっとjQueryの独特な使い回しに関する本質的理解は進んでいません。

通常のAPPに記載する方法ではWordPressではエラーになることが多く、しかもその原因がWordPressの仕様であることに時間を使ってしまった体験は誰しもあるはずです。

私自身もう何度目かわかりませんが、つい先日またもやこのjQueryスクリプトの使い回しに悩まされたので、使い方をまとめてしまうことにしました。

WordPressのjQuery

WordPressでのjQueryのスクリプトの書き方をまとめる前にjQueryのCompatibility Modeについて理解しなおそうと思います。

気づいていると思いますが、WordPressはコア機能としてjQueryを読みこんでいます。

このコアに実装されているjQueryの仕様が、他のAppで書いたjQueryスクリプトがWordPressで機能しない最大の原因です。

なので、「WordPressのjQueryを無効化してオリジナルのjQueryを読み込む方法」を選択する人は多いです。(この方法はバッドプラクティスです。)

しかし、一方でWordPressのコアに搭載されているjQueryが何故この様な仕様になっているのかを理解している人は多くありません。

WordPressのjQueryはCompatible Modeを実装している

WordPressのjQueryはCompatible Modeを実装したものです。

これは他のJSライブラリとの思わぬコンフリクトを防ぐ目的であえて導入されています。

端的に特徴を表すと「$」マークが使えない様になっています。

「$」とはそもそも「ショートカット」

そもそも「$」はjQueryのショートカット構文であり、実装当初の書き方ではありません。

JavaScript
/* Regular jQuery */
$('.hideable').on('click', function() {
  $(this).hide();
})

この書き方はショートカットを利用しています。このショートカットの書き方に関する補足説明(というか注意)はきちんとjQueryの公式サイトに記載されています。

That said, there is one caveat: by default, jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
訳:jQueryのショートカット記法として「$」の利用を可能にしていますが、「$」は他のJavaScript系ライブラリとコンフリクトを起こしやすいので注意してください。

jQuery公式サイトより

私たちが見慣れている記法はショートカットなので、本来は次の様に書くべきなのです。

JavaScript
/* Compatibility Mode */
jQuery('.hideable').on('click', function() {
  jQuery(this).hide();
})

これを踏まえて、プラグインで拡張が前提となるWordPressでは「このショートカット記法」を最初から無効にしているわけです。

WordPressコアのjQueryでの正しいjQueryスクリプトの書き方

ここまでの説明で、何故「WordPressのjQueryを無効化してオリジナルのjQueryを読み込む方法」がバッドプラクティスなのかは理解いただけたと思います。

となると、次に考えるべきはWordPressコアのjQueryで正しくjQueryを書く方法になります。

 jQueryをFooterに記載するなら・・・

jQueryをFooterに記載するのであれば、匿名関数で「$」を囲ってあげると良いでしょう。

JavaScript
(function($) {
	
  $('.hideable').on('click', function() {
    $(this).hide();
  })
	
})( jQuery );

 jQueryをheadタグ内に記載するなら・・・

jQueryをheadタグ内に記載するのであれば(パフォーマンスの観点からオススメしません。)、下記の様な書き方がベストプラクティスです。

JavaScript

jQuery(document).ready(function( $ ) {
	
  $('.hideable').on('click', function() {
    $(this).hide();
  })
	
});

jQuery(document).ready(function( $ ) {の様にサイト読み込み直後のタイミングで実行するためにはこの書き方がベストです。(匿名関数は読み込み時で実行されるので、headタグ内向けの書き方ではありません。)

 jQueryのnoConfilctモードを実装する

これまでの2つのコードの使い回しをきにすることなく、実装したい場合は下記の様にnoConflictモードのための関数を変数に定義してあげれば良いです。

JavaScript
var $j = jQuery.noConflict();

$j('.hideable').on('click', function() {
  $j(this).hide();
})

 jQueryの本来の書き方を使う

私が採用することにした方法です。

そもそもjQueryは「$」は「jQuery」のショートカット記法なのでした。

なので、普通にオリジナルの書き方をしてあげれば何も迷うことはないという発想から採用しています。

JavaScript
/* Compatibility Mode */
jQuery('.hideable').on('click', function() {
  jQuery(this).hide();
})

まとめ

この様に、一回きちんと調べるとWordPressが何故jQueryの仕様をカスタマイズしているのか理解もできますし、正しい対処方法もわかります。

同様の問題で困っている人は参考にしていただけると幸いです。