WordPressでは、jQueryを含めJavaScriptが完全にサポートされています。しかし、WordPress側の設定の問題で、関数の実行時にエラーが発生することも。中でも特によく見られるのが、「Uncaught TypeError: $ is not a function」エラーです。

このエラーは、原因さえ特定できれば比較的容易に解決することができます。エラーの肝となるのは「$」の記号。jQueryとWordPressには、このエラーを回避して関数を実行するための策がいくつか用意されています。

ということで、今回は「Uncaught TypeError: $ is not a function」エラーの概要と原因について掘り下げます。トラブルシューティング方法もご紹介していきますので、ぜひ最後までご覧ください。それでは、早速本題に入りましょう。

「Uncaught TypeError: $ is not a function」エラーとは

「Uncaught TypeError: $ is not a function」は、jQueryが適切に読み込まれていない場合、または「$（ドル記号）」を使用する他のスクリプトと競合している場合に発生する、一般的なJavaScriptエラーです。

WordPressの場合、このエラーは読み込みの問題ではなく、コンテンツ管理システム（CMS）のjQueryの扱い方に関係するのが通例です。

jQueryは人気の高いJavaScriptライブラリで、WordPressのテーマやプラグインで、さまざまな動的要素やアニメーション、AJAX操作の処理に広く使用されています。

jQuery
jQuery

jQueryにおいて、「$」は「jQuery」のエイリアス（別名）であり、ライブラリを操作する際にやり取りする主要オブジェクトです。これによって、コードが短縮されて可読性が上がり、コードを記述しやすくなります。

このエラーは、明白なエラーメッセージとして表示されないため、トラブルシューティングが行いづらいことも。また、他のWordPressエラーとは異なり、サイト上の誤った設定要素や、404エラーページが引き金となる可能性もあります。

「404 Not Found」エラー
「404 Not Found」エラー

この問題を診断する的確な方法は、開発者コンソールまたはWordPressでデバッグログを開いて確認することです。

「Uncaught TypeError: $ is not a function」エラーの原因

「Uncaught TypeError: $ is not a function」エラーはjQueryに関係し、サイトの読み込み中に「$」記号を含む関数が実行された際に発生します。

具体的な原因は、以下の通りです。

  1. jQueryが正しく読み込まれていない：jQueryが適切に読み込まれていない、またはエンキューされていないと、「$」記号が有効な関数として認識されないため、エラーが返されます。ただし、WordPressではjQueryが標準で導入されているため、これに該当することはまずないでしょう。
  2. jQueryがnoConflictモードで実行されている：WordPressでは「noConflict」モードで実行されるのがデフォルトであり、「$」記号が関数として認識されません。したがって、回避策が必要になります。
  3. プラグインやテーマが干渉している：Javascriptのコードの誤りが原因でjQueryの正常な機能が妨げられていたり、スクリプトに問題を引き起こす方法で「$」が使用されていたりすることがあります。

要約すると、WordPressでは「$」記号が認識されません。しかし、CMS内でjQueryのコードを実行できないわけではありませんのでご安心を。jQueryはWordPressの一部であるため、「$」記号のエラーを回避する対策さえ講じれば問題ありません。

「Uncaught TypeError: $ is not a function」エラーの解決方法（2通り）

トラブルシューティングに入る前に、jQueryは標準でWordPressに導入されていることを念頭に置いてください。ウェブ上にある解説記事などリソースの一部では、jQueryをエンキューするように促しているものがありますが、WordPressでは不要です。

また、WordPressでは、jQueryがnoConflictモードで読み込まれ、「$」を使用する他のライブラリと衝突しないようになっています。以下、このnoConflictモードを無効化することなく、エラーを解決する方法を見ていきましょう。

1. 「$」を「jQuery」で置き換える

関数で「$」記号を使用する際にこのエラーが発生した場合は、「jQuery」に置き換えることができます。以下、「$」を使用したjQueryの基本関数の例を見てみましょう。

$(function() {
  // Your code here will run once the DOM is ready
});

この場合は、「$」を「jQuery」に置き換えるのが1番手っ取り早い方法です。コード例は以下の通り。

jQuery(function() {
  // This code will not trigger the error
});

また、「jQuery」を含む即座に呼び出される関数式でコードをラップすることも可能です。以下のように、「jQuery」をラッパーとして使用すれば、「Uncaught TypeError: $ is not a function」エラーが発生することはありません。

jQuery(function ($) {
    // You can use $ inside the wrapper
    console.log($('.primary-menu'));
});

コードの変更後、ブラウザの開発者コンソール、またはWordPressのデバッグログを開いて、エラーが解消されているかを確認しましょう。エラーが続く場合は、「jQuery」を別の記号に置き換える必要があるかもしれません。

2. 別のエイリアスを使用する

先にも触れた通り、「$」は「jQuery」のデフォルトのエイリアスですが、WordPressではjQueryをnoConflictモードで読み込むことから、他のライブラリとの干渉を避けるために、違うエイリアスを使用しなければならない可能性があります。

この操作は、1行のコードで実行できます。

vvar $j = jQuery;

上記はデフォルトのエイリアスを「$j」に置き換える例ですが、任意のものを指定可能です。先に挙げた「jQuery」に置き換える方法よりも、この手法を好む開発者もいます。

このコードを貼り付ける場所がわからない場合は、『WordPressのヘッダーまたはフッターにコードを追加する方法』をご覧ください。なお、エイリアスを新規登録しても、「jQuery」に置き換えることは可能です。

まとめ

jQueryはWordPressサイトで使用することができますが、「Uncaught TypeError: $ is not a function」のようなエラーを回避するには、WordPressのjQuery導入方法に注目しましょう。WordPressデフォルトの「noConflict」モードでは、「$」記号が認識されません。

これによって、「$」記号でjQueryを呼び出す関数を使用すると「Uncaught TypeError: $ is not a function」エラーが発生します。解決方法は、「$」を「jQuery」に置き換えるか、エイリアスを別の記号に置き換えて競合を避けること。

Kinstaをご利用の場合、MyKinstaでWordPressデバッグ機能を利用すれば、簡単に原因を特定することができます。また、すべてのプランで質の高いカスタマーサポートを提供しており、いつ問題が発生しても安心です。Kinstaのホスティングプランの詳細はこちらをご覧ください。