PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Elasticsearchまで。プレスマンのスタッフが綴る技術ブログ。

(function($){})(jQuery);

JavaScriptの変数のスコープは慣れないとちょっとわかりにくいです。
クロージャも無名関数もわかりにくいんじゃないでしょうか。
しかし、例によってこれらについて書いてある記事はググればいくらでもあるので割愛。
それに、いくら解説を読んでも実際たくさんのコードを書かないとなかなか理解できません。

jQuery用に書かれたJavaScriptをみるとよく

(function($){
var hoge = function(){
alert($("#hoge").val());
};
hoge();
})(jQuery);


みたいに書かれています。ぱっと見るといったい何をやっているのか意味不明ですよね。
これは何をやっているか理解すると「おぉー」と言う感じです。

 

分解して書くと下記と似たような意味になります。

var piyo = function(fuga){
var hoge = function(){
var foo = fuga("#hoge");
alert(foo.val());
};
hoge();
};
piyo(jQuery);

関数を作ってそれにjQueryという引数を渡して実行しているだけです。
$は普通にただの変数なので特別に考える必要はないです。(fugaに書き直しています)
JavaScriptは変数に関数を入れられる(というか参照値が入るのだけど)ことを覚えておけばわかりやすいと思います。

で、これが何なの?別にこんなことすることないじゃんと言う話になりますが、利点は当然あります。
まず、$が別に定義されてしまっていた場合です。例えば、prototype.jsとjQueryを同時に使う場合がこれにあたります。
どちらも$が特別な意味を持った変数です。jQueryでは変数jQuery == $ なので無名関数の引数$にjQueryを渡して実行して、あげればprototype.jsとの混在環境でもfunction($){}の中では普段と同じように$(“#hoge”)のように書くことができます。
あとは、変数のスコープの問題です。色々なライブラリを組み合わせれば当然変数名が被るでしょう。しかし、function($){}の中で、varをつけて変数を宣言しておけばこの中だけのスコープになるので、他のライブラリに影響しなくなります。

JavaScriptはスコープ、無名関数、クロージャがわかるようになると書くのが非常に楽しくなります。あと、applyもキモです。applyに関してはまた後日。多分。

投稿者:taichi

taichi の紹介

何でもやりますが、一応プログラマです。
このエントリーをはてなブックマークに追加

私たちと一緒に働きませんか?

株式会社プレスマンでは、プログラミングが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る