「Uncaught TypeError:」とは？WordpressでjQueryのバージョン変更後に出るエラーについて。

WordPressのjQueryを変更したらエラーが出る

Wordpress5.5まではずっとjQuery1.x系が使用されていました。
2.x系にアップデートするとIE8以前の古いブラウザや、1.x用に設計されたプラグインが正常に動作しない可能性があるためです。

長らくjQuery1.xを使い続けてきたWordpressですが、PHPを筆頭に他のソフトウェアの更新に伴い、Wordpress5.6からはjQuery3.5.1が読み込まれるようになりました。

執筆時現在のjQueryの最新バージョンは3.6.0ですが、なぜ3.5.1が使われているのかというとWordpress専用にカスタマイズされたjQueryだからです。

CDNで配信されている標準のjQueryとWordpressに同梱されているjQueryは同じバージョンであっても中身が少し違います。

このことを知っているとWordpressで発生するjQueryに関する問題解決が楽です。

WordPressでjQueryが動かない原因

Chromeの開発者ツールでエラーが確認できる

jQueryで書かれたプログラムのソースコードをそのままコピーして使おうとした際に「Uncaught TypeError: $ is not a function」というエラーが出てうまく動作しない場合があります。
訳すと「キャッチされなかった型のエラー：$は関数ではないです。」といった感じ。

jQueryでは$という関数が使えますが、WordpressでJavascriptを使う場合はプラグラムのソースコードに$が使えなくなっています。
Javascriptを使っている他のライブラリと干渉しないように、$を未定義状態にしてあることが原因です。

Uncaught TypeError: $ is not a functionの解決方法

$なんてないよ！というエラーなので、$を使わないか、$を再定義すれば解決します。

解決方法１．$の代わりにjQueryを使う

$を使うと怒られるので代わりにjQueryを使います。
具体的にはコード内の「$」を全て「jQuery」に置き換えればOK！

$(function(){
  $('a[href^="#"]').click(function(){
  //ここにプログラムを書いていく
  });
});

こんなプログラムをWordpressで使いたい場合。

jQuery(function(){
  jQuery('a[href^="#"]').click(function(){
  //ここにプログラムを書いていく
  });
});

と書き直せばOKです。

解決方法２．$を再定義する

コード内の$が少ない場合は書き換えればOKですが、多い場合大変だしコードが見にくくなります。
そんな時は$を再定義してあげれば解決します。

jQuery(function($){
  $('a[href^="#"]').click(function(){
  //ここにプログラムを書いていく
  });
});

コード全体を「jQuery(function($){ $を使ったコード });」という感じで囲めばOK！

エラーが発生している箇所を見つける

どこで「Uncaught TypeError:」が発生しているのか分からない場合は、ブラウザの開発者ツールが大体教えてくれます。

ChromeやEdgeの場合は「Ctrl＋Shift＋I」を押します。
コンソールタブの「○ error」と表示されているところを押し、問題があるファイル名をクリックすればOK。

今回の場合「f0d05.js?1823e」というjavaファイルの266行目にフォーカスしました。
確認してみるとバッチリ$(function())が使われていますね。
（キャッシュ＆圧縮化している場合は探しにくくなります。）

Uncaught TypeError: e.indexOf is not a functionの解決方法

もう１つ「Uncaught TypeError: e.indexOf is not a function at S.fn.init.S.fn.load」というエラーがコンソールに出ていたので確認します。

調べてみるとバージョン2.xから3.xにバージョンアップした際に出るようです。
Wordpressの場合「jquery.heightLine.js」でエラーが出やすいよう。

解決方法１．コードを編集する

原因はjQuery3.xで「.load」が廃止になったため、そんな関数ない！と怒られる。
対処法は「.on」の中にloadを指定すればOKとのこと。

$(window).load(function(){
    $('#hoge').heightLine();
});

こう指定していたのを、

$(window).on('load', function(){
    $('#hoge').heightLine();
});

こうする感じ。

解決方法２．Wordpress標準のjQueryを使う

ただ今回は、WordpressのjQueryをCDNで読み込むように変更した時に出ました。

jQueryは自サイトから読み込むより、CDN経由で読み込んだ方が速いらしいのです。

そこで、Wordpress5.7に同梱されているjQuery3.5.1をCDNで読み込もう！と思い、GoogleのCDNからjQuery3.5.1を読み込んだのですが、このエラーが出ました。

先述した通り、CDN経由で配信されているjQueryとWordpress標準のjQueryでは同じバージョンでも中身が違うようです。
Wordpress標準のjQuery3.5.1を使用すればこのエラーが消えました。

思うに.loadが廃止されると対応できないプラグインなどが多いため、Wordpress用にカスタマイズされたjQuery3.5.1ではバージョン3系でもここら辺にうまいこと対応しているのだと思います。

まとめ

サイトの高速化を狙ってjQuery1.xから最新のjQuery3.6.0にアップデートしようと思ったのですが、結局Wordpress標準のjQuery3.5.1を使用することになりました。

どうしてもWordpressで最新バージョンのjQueryをCDN経由で使用しつつブラウザーのエラーを０にするには、「.load」を使っているプログラムファイル全てに手を入れることになりそうです...

また、テーマや使用しているプラグインによっては他の部分でエラーが出ることもあるでしょう。

結論：Wordpressを使っている人はおとなしくWordpress純正のjQueryを使うのが良さそう。
jQuery3.5.1と3.6.0では多分そんなに速度差は出ないはず…CDN経由にしてもそんなに変わらないよ！と自分に言い聞かせておきます。