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


スクリーンショット 2016-05-13 14.56.53

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

(function ($) {
  
  //処理

})(window.jQuery);

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

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

1.


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

calc(1,2);

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

  1. 2つの引数a,bに対して、a+bをコンソールに表示する関数を定義して変数に代入
  2. 関数を引数1,2で実行

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

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

2.

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

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

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

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

では、おまじない

(function ($) {
  
  //処理

})(window.jQuery);

とは何をしているのか。

  1. 変数$を取る関数を定義
  2. 1で定義した関数をwindow.jQueryを引数に渡して実行

という処理になります。

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

1.定義した関数内で宣言される変数は外部に影響を及ぼさない

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

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

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

2.必ず、window.jQueryを対象としてこの関数が実行される

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

$(function () {

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

と記述されていると、この$は何を指しているのかこのファイルを見ただけでは判別できません。
もしかしたら、prototype.jsの$を使ってしまっているかもしれないわけです。当然、この場合このスクリプトは正常に動作しないでしょう。

しかし、

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

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

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