CoffeeScriptで$が使えないjQueryを使うときのメモ(例えばWordPress)

CoffeeScriptで$が使えないjQueryを使うときのメモ

WordPress側で読み込まれるjQueryって、「$()」で使わずに「jQuery()」で使わなきゃいけないみたいですね。

自作テーマでは基本的にGoogleのCDNから読み込みしているので知りませんでした…

で、そうすると最近勉強し始めた「CoffeeScriptではどう使ったらいいんだ?」ってことで少し頭を使ったので、そのメモです。

CoffeeScriptでjQueryを使うときはこう書く

自分でタイトル書いてて「???」になったのですが、内容的にはタイトルのとおりです。よっひー(@yosiakatsuki)です。

「CoffeeScriptでjQueryを使うときはこう書く」的なのは割とすぐに見つかりました。

で、その通り書きました。

$ ->
  $('#HeaderMenuBtn').on 'click',->
    $('.HeaderMenu').toggleClass 'HeaderMenuOpen'

コンパイルしたらこうなりました。

(function() {
  $(function() {
    return $('#HeaderMenuBtn').on('click', function() {
      return $('.HeaderMenu').toggleClass('HeaderMenuOpen');
    });
  });

}).call(this);

なんかいい感じ!!

WordPressに含まれるjQueryを読み込むと、$でjQueryを使えない

で、早速動きを確認しようとページを表示したら…

怒られてる!!

え?「$」なんて知らんっていわれてるし…

WordPress側でenqueueしたjQueryは$使えない罠

とりあえず、「今までこんなエラーに会ったことなかった」と思い、jQueryの参照をGoogleのCDNにして再トライ。

結果、先ほどのエラーはなくなり、思い通りの動きをしてくれました…

問題はWordPressで読み込んでるjQueryか!(他ライブラリとの干渉対策かな?)

ってことで、それならそれで対策方法はあって、jQueryをカプセル化してしまえばいいのですが。

;(function($) {
    //この中ではjQueryをローカルで「$」として使える。
})(jQuery);

これをCoffeeScriptでどう書くかというお勉強…

CoffeeScriptでjQueryをカプセル化

いろいろ調べたり、試したりしてそれっぽいコードになったのがこちら

do($ = jQuery)->
  $('#HeaderMenuBtn').on 'click',->
    $('.HeaderMenu').toggleClass 'HeaderMenuOpen'

コンパイルするとこうなります

(function() {
  (function($) {
    return $('#HeaderMenuBtn').on('click', function() {
      return $('.HeaderMenu').toggleClass('HeaderMenuOpen');
    });
  })(jQuery);

}).call(this);

おお!それっぽい!

jQueryオブジェクトを引数に関数定義出来ました。

これでエラーもなくなり、「$」でjQueryを扱えるのでコードもスッキリしました。めでたしめでたし

よっしーのひとこと

よっひー

CoffeeScriptの勉強始めたばかりなのでいろいろわからないことだらけなのですが、1つずつ解決していくのが楽しいです。

まだ長いコード書くとインデントがどこに対応してるのか見失うことがありますが…

gulpの処理をCoffeeScriptで書いたら「あれ?これどのインデントが対応してるんだ?」って何度もなりました。)

ではまた。