jQueryの無名関数の組み立て方

なんかWordPressとjQueryでググるとやたら$が使えないとかnoConflictがどうたらで気になったんですが、jQueryでは無名関数のローカル引数で$を使うのがスマートだと思います。

(function($){
     alert('nanashi');
})(jQuery);

でもこのjQueryの無名関数の書き方ってよく忘れます。でも仕組みを知っていると方程式みたいに組み立てることができます。僕は暗記科目が苦手で数学が得意だったのでこれから説明する方法をよく使います。

function nanashi($) {
  alert('nanashi');
}
nanashi(jQuery);

これなら意味がわかる人は多いと思います。
nanashiという関数を定義して呼び出しているだけです。

nanashi(jQuery)という呼び出しではnanashi関数の$はjQueryとして実行されますが、この$は定義したnanashi関数のスコープ内のローカル変数(引数)なのでglobalな$よりも優先されます。

function nanashi() {
  var $ = arguments[0];
  alert('nanashi');
}
nanashi(jQuery);

ようはこういうことなのでprototype.jsなどが宣言するglobalな$とは区別され、この関数内ではnoConflictを呼び出したかどうかに関わらず$=jQueryとして扱えます。

さて、なぜ$がjQueryとして使えるか理解したところでここから無名関数を導きます。

まず上記のプログラムでは以下の式が成り立っていることになります。

nanashi = function($){
     alert('nanashi');
};

なのでこれをnanashi(jQuery);へ代入し二つの式をひとつにまとめます。

すると

function nanashi($) {
  alert('nanashi');
}
nanashi(jQuery);

function($){
     alert('nanashi);
}(jQuery);

になります。

でもこれだとプログラムの解釈上まずいので代入した等文を()で括ってこいつは関数ですよと教えてあげます。

(function($){
     alert('nanashi);
})(jQuery);

これでjQueryの無名関数が導けました。

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。