drawerメニューがハンバーガーボタンをクリックしても表示されない時の解消方法。ChatGPTさんに聞いてみたらJavaScriptライブラリがページで競合が原因

JavaScriptを使ってdrawer.jpの設定が結構苦手で今回も
drawerメニューがハンバーガーボタンをクリックしても
表示されないという、沼にはまっちゃいました。

いろいろ試行錯誤した結果、解決できたので
この記事で共有したいと思います。
原因がわかれば、なーんだそんな事かあ！でした。

結論から言うと
JavaScriptをWordpressサイトで使用する時には
JavaScriptライブラリがページで競合してるのが原因でした。

JavaScriptライブラリがページで競合するのを
防ぐためのコードの書き方私が知ってるの２パターン
あるのですが、今回はその両方を使ってしまったためでした。

コードの書き方を１つのパターン統一したら解消されました。

実際に今回解消するのに行った事
ここでChatGPTに聞いてみた
結論

実際に今回解消するのに行った事

今回このエラーにはまってしまう前に、JavaScriptライブラリがページで競合
の解消方法で、JavaScriptのコードを書きのjQueryコードで囲うことで
解消されるのでその方法でコード書いてた。

jQuery.noConflict();
(function ($) {

})(jQuery);

こちらでも詳しく書いてます。

最近他の方法で、functions.phpに下記のコード記述する方法
でもJavaScriptライブラリがページで競合が解消されると知り、

<?php
function my_script_init() {
  wp_deregister_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );
?>

functions.phpに記述して、drawerのJavaScriptコードに
追加してたjQueryコードで囲ってたのを削除しました。

するとハンバーガーメニューは表示されるが、クリックしても
横から出てくるはずのメニューが出てこない状態になった。

もうここからが、試行錯誤沼の始まりです。
半日以上費やしました。。。。。。

不具合の原因が無いかデベロッパーツールで確認してみる

不具合の原因は何か、デベロッパーツールでコード見ながらいろいろ
書き直してやってみたが効果なし。

同じコードで、HTMLサイトでも試しました。
なんとHTMLサイトでは正常に動くではないですか・・・・・
実はそこでも？？？の始まりでした。

で、ふと思ったのが、JavaScriptコード？でデベロッパーツールには
エラーが出てるか確認できるところがあるので確認。

デベロッパーツールの上部のコンソールをクリックします。

するとしっかりエラーになってました。
その時の表示がこんな感じです。

この表示の各列の右側をクリックするとエラーの出てる箇所の
コードが確認できます。
今の私には見てもわからないですが。

今回はどうもdrawerが定義されてないよ！って感じかな？

ここでChatGPTに聞いてみた

ここで聞いてみた結果がこんな回答でした。

このエラーは、jQueryのdrawer()関数の呼び出しに問題があることを示しています。このエラーを解決するためには、以下の手順を試すことができます。

drawer()関数を含むjQueryプラグインがプロジェクトに含まれていることを確認してください。もしそれが含まれていない場合は、プラグインをダウンロードしてプロジェクトに追加する必要があります。

jQueryライブラリがプロジェクトに含まれていること、そして正しくロードされていることを確認してください。jQueryライブラリをロードする前にdrawer()関数を使用するコードがある場合は、ライブラリをロードする前にそのコードを移動する必要があります。

$変数を使用している他のJavaScriptライブラリがページで競合している可能性があります。これを回避するには、drawer()関数を呼び出す際に$の代わりにjQuery変数を使用することができます。

この解答見て、？もしかしてJavaScriptコードの書き方２つあるの関係ある？
と思い、試しにJavaScriptコードのjQueryコードで囲ってるの外してみました。

すると、無事にメニューが表示された！！！！

良かったです。