【WordPress/cocoon】jQueryの「$ is not defined」エラーを回避するための知識

WordPress/Cocoonで jQuery のタイミングの話を Sagasoon.

過去の記事で、「jQueryを使ったときに $ is not defined エラーがでる問題」をご紹介しました。

そもそも、なんでこんなんなるの？という話、ちょっとだけ書いておきます。

そもそものエラーの意味

エラー自体は、「$ という表現が使えません」という内容です。
javascriptのプログラムの中で $ から始まる表現を使ってるよね、と。
それが使えませんよーというエラーですね。

$ってなんだよってお話ですが、 jQuery で使う書き方で　$(“div”) みたいなものがあります。
この $ が使えないよってことです。

「$ が使えないよ」っていうエラーなのはわかったけど、$ 使えないって jQuery が使えないってことか？

となりますが、それは、半分正解で半分不正解。

まだ使えない

というニュアンスです。

まだ使えないので、＄は、そこの位置で使わないで

というエラーと思えばOK。
☆もちろん、この意味でない場合もありますが。

「まだ使えない」って、「時間が関係するの？」

と思ってしまいますよね。
そうじゃないです。

プログラムの順番的に、そこのタイミングでは、まだ使えない

というニュアンス。

下記の図をみてください。

（A）と（B）という時間的なタイミングがあります。
WordPressが始まり、（A)jQueryを読み込みが始まるところと、（B)読み込み終わったところです。

jQueryのルールにそったプログラミングは、（A)の位置では、まだ使えません。
jQueryがまだ読み込まれてないわけなので。
（B)の位置になると、jQuery のルールが分かるようになるので、これ以降通るプログラミングコードは、jQueryのルールに従ったものでも動作します。

したがって、今回の問題は

（A)のタイミングで動作するようなプログラミングをしてしまっていた

という話に落ち着きます。

全く以て、これが一番難しい話です。
jsのソースをみて、htmlのソースをみて、どこがAの位置に該当し、どこがBの位置に該当するかってのは、最初は全然分からないです。
少し勉強した人でも、onLoad以降ならOKとか、readyなんたら大丈夫とか、正確ではない話をしたりしますので、難しいです。

ただ、WordPressとCocoonのセットで考える場合は、このタイミングを分かっていれば良いかと。

まずは、このレベルが分かると、だいぶエラーが減るかと思いますよ。

実際にはウィジェット上で jQueryのコード自体は書けますが、タイミング的にエラーになるケースがあるので最初は書かないほうが得策。

タイミングという、実によく分からない話が主軸になってしまいましたが、雰囲気掴んでいただけたでしょうか。
「お風呂に入るなら、お風呂に水をためた後に、沸かしてから入る」的なところです。水風呂は厳しいです。

WordPressに関連することは、下記のカテゴリから閲覧可能ですので、こちらもどうぞ。