2022/06/19

【JavaScript】WordPressで〇〇 is not a functionになる原因と対策

こんな悩みを解決します

1. 〇〇 is not a functionのエラーの意味と原因
2. 〇〇 is not a functionの修正方法
   1. 関数名を正しい関数名に修正する
   2. オブジェクトの型を適切なものに修正する
3. $ is not a functionの修正方法
   1. JQueryを読み込みなおす
   2. $()をjQuery()に置換する
4. まとめ

スポンサードサーチ

〇〇 is not a functionのエラーの意味と原因

「〇〇 is not a function」の意味は直訳すると
「〇〇は関数ではありません」という意味になります

これは定義されていない名前の関数を呼び出そうとしたり、
そのオブジェクト（数値型や文字列型）を間違えて定義してしまった時に
発生しやすいエラーです

基本的には、上記のどちらかが原因でありjsファイル(〇〇.js)を修正すれば解消できます
ですが、「$ is not a function」というエラーの場合
適切なJQueryを読み込むことができていないことが原因の可能性があります

本記事ではその部分についても解説していこうと思います

〇〇 is not a functionの修正方法

関数名を正しい関数名に修正する

定義されていない関数を利用している場合
エラーになっている関数名が正しい関数名にすることで解消できます
特に大文字か小文字かどうかは気をつけてください

よくあるのがgetElementByIdの関数を誤って
getElementByIDと最後の文字が大文字になってしまうミスです

たった１文字の違いでも動作しなくなるため
エラーが発生した際は関数名をしっかり確認することがオススメです

オブジェクトの型を適切なものに修正する

オブジェクト（数値型や文字列型）を間違えて定義してしまった場合
オブジェクトの型を適切なものに修正することで解決できます

例として以下のコードをみてください

var test = 9876;
test.charAt(0);

charAt関数は文字列の特定の位置の文字を取得する関数です
上記コードは記述の仕方は特に問題ありませんが
数値型に対してcharAt関数を利用しようとしています

正しい型に関数を使えていないため、このままだと
test.charAt is not a functionと表示されてしまいます
これは定義している型を正しいものに変えることで修正できます

var test = "9876";
test.charAt(0);

9876を“9876“と修正することで文字列型になり
charAt関数が正しく動作して、文字列を取得できるようになります

このように呼び出した場所ではなく定義しているオブジェクト自体に
問題がある場合もあるためエラーが発生した際にはオブジェクトの型を
確認することがオススメです

スポンサードサーチ

スポンサードサーチ

$ is not a functionと表示されている時の修正方法

上記画像のようにネットにあるコードをそのままコピペしてもエラーになっており
コピペした文の中に$(‘#〇〇’)や、$(‘.〇〇’)といった記述があれば
適切なJQueryを読み込んでいないためエラーとなっています

実は、$()の処理はJavaScript本来の関数ではなく、JQueryを読み込むことで
初めて使うことができる関数です

また、ややこしいことにWordPressに初期から読み込まれている
JQueryでは$()の呼び出しが無効になっています

そのため、WordPressの初期状態のままだと$(‘セレクタ’)などの機能は利用できません

普通のテーマを利用している場合は、JQueryを再読み込みなどの対応を
していることが多いため、カスタムテーマを自作している人に起きやすいです

対応策は主に二つあります

• JQueryを読み込みなおす
• $()をjQuery()に置換する

JQueryを読み込みなおす

最もオススメな方法がJQueryを読み込みなおす方法です
$()を利用できるようになるだけでなく、適切に記述することで
読み込みスピードを上げることも可能だからです

修正方法はheaderに記述する方法とfunction.phpに記述する二つがあります
headerに記述する場合はwp_headの読み込みを以下の内容に変更してください

<?php wp_deregister_script('jquery'); ?>
<?php wp_head(); ?>
<?php wp_enqueue_script( 'jquery' ,'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', ); ?>

この処理は1行目でwordpressの初期処理で読み込むJQueryを
読み込まないようにしつつ、3行目の処理で最新のJQueryを読み込んでいます
これで、JQueryが最新のもので読み込まれるようになります

headerではなく、function.phpに記載したい場合は
以下のソースコードをfunction.phpに記載してください
やっていることは完全に同じなので説明は省略します

/*****************
 * jQuery更新処理
 *****************/
function jQuery_update() {
    wp_deregister_script('jquery');
    wp_enqueue_script( 
        'jquery'
        ,'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', 
    );
}
add_action( 'wp_enqueue_scripts', 'jQuery_update' );

$()をjQuery()に置換する

headerもfunction.phpも変更したくない場合は
$()となっている部分を全てjQuery()に置換してください
WordPressの初期のJQueryは$()の処理は動作しませんが
同じ処理であるjQuery()にすることで問題なく動作することができます

jsファイルの変更だけで解決したい場合はこちらの対応がオススメです

まとめ

まとめになります

• is not a functionの修正方法
• 　関数名を正しい関数名に修正する
• 　オブジェクトの型を適切なものに修正する
• 　JQueryを読み込みなおす
• 　$()をjQuery()に置換する

いかがでしたでしょうか？
is not a functionというエラーはエラー箇所だけでなく
型の場所であったり、jQueryを読み込みなおす必要があったりなど
少しややこしいエラーですが、きちんと内容を理解すれば必ず修正できます

開発作業頑張ってくださいね

ここからは宣伝です
私のブログの最新情報はtwitterにて告知しておりますので
最新情報を知りたいという方はぜひ、フォローしてみてくださいね

最後まで読んでいただきありがとうございました

• Facebook
• Twitter
• Hatebu
• LINE