💲

(function($){~})(window.jQuery);ってなんぞ？おまじないを解説する

2021/01/07に公開

え？今更jQueryのコードですか、だって？

人生は辛く厳しく、人にはいろいろ事情がある。

jQueryコードを見ていると、スクリプト全体がこんなコードで覆われているのをよくみると思います。

(function ($) {   
  //処理
})(window.jQuery);

まぁ、「おまじない」と割りきってこの定型文をコピペするだけでも恩恵に預かれるっちゃあ預かれるんですが、どうせなので解説をしてみます。

まず以下のコードを見てください。javascript触った人なら誰でもわかるコードです。

１．

var calc = function (a, b) {
  console.log(a + b);
};
 
calc(1,2);

やっていることは以下の2つです。

さて、1の「関数を定義して変数に代入」したところを、「関数を定義して変数に代入せずそのまま実行」しようとするとどうなるでしょうか。

以下の様なコードになります。

(function (a, b) {
  console.log(a + b);
})(1, 2);

「おまじない」の書式にちょっと近づきました。
ひとつ目の関数を囲っている括弧はひとつ前のコードでcalcに代入していたものそのものですね。

ひとつ目の括弧で関数を定義し、それに対してそのまま引数１，２を渡しています。

つまり、１．のコードと２．のコードはほぼ同義です。（ほぼ、と書いたのはこの書き方だと１．のcalcがグローバル変数になってしまうからです。関数の処理、ということに着目すると全く同じです）

では、おまじない

(function ($) {
   
  //処理
 
})(window.jQuery);

とは何をしているのか。

変数＄を取る関数を定義
１で定義した関数をwindow.jQueryを引数に渡して実行
という処理になります。

こういう書き方をするメリットは以下のようになります。

javascriptのvar変数は関数スコープなので、

(function ($) {
  var somefunc=function(){
    //do something
  };
  var a=1;
})(window.jQuery);

などと書いても、somefunc及びaは外部と衝突を起こしません。

prototype.js等を使っているとグローバル変数$が競合する場合があるわけですが、そういった状況で単に

$(function () {
 
  $('.app').on('click',function(){
    //何らかの処理
  });
})

と記述されていると、この$は何を指しているのかこのファイルを見ただけでは判別できません。

もしかしたら、prototype.jsの＄を使ってしまっているかもしれないわけです。

当然、この場合このスクリプトは正常に動作しないでしょう。

しかし、

(function ($) {
  $(function () {
    $('.app').on('click',function(){
      //何らかの処理
    });
  })
})(window.jQuery);

と書いていれば、window.jQueryに対してこの関数が実行されることがこのソースから見てわかるわけですね。

以上、簡単ではありますがjQueryでよく利用されるおまじないについて解説してみました。