$(function(){});のカッコがややこしい

2011.10.28

jQueryでよく見かける$(function(){});って、カッコがごちゃごちゃしていて分かりにくくないですか？私はいつもごちゃごちゃになりますｗなので、自分がいつもカッコの囲み方を理解するための方法があるので、それをメモしたいと思います。

1.処理を行う関数を作る

処理を行うための関数を作ります。

function(){
    //ここに処理
}

このような、関数だけど名称がないものを無名関数と言うそうです。関数に名前がなくてどうやって使うんだと考えてしまいそうですが、htmlを読み込んだ時点で実行する形に作るので、今回の場合名称は無くてもいいようです。

2.関数を$();で囲む

手順1で作成した関数を$();で囲みます。

$(
    function(){
        //ここに処理
    }
);

$();は、$(document).ready();と同じ意味です。記述が長くなるので、$();に省略できるんですね。
htmlを読み込んだ時点で、関数function(){}の処理を実行する、という意味になります。

3.体裁を整える

行数や余白を取りすぎているので、詰めてしまいます。

$(function(){
    //ここに処理
});

これでよく見慣れた形の書式になりました。

余談：$をjQueryに置き換える

$は文字数が少なくて便利なのですが、複数のライブラリ（prototype.js）なども$を使っているため、環境によっては処理が競合してしまう場合がありえます。

そこで、$はjQueryという文字列に置き換えることができます。手順3のコードを以下のように書き換えます。

jQuery(function($){
    //ここに処理
});

中に$という文字が残っていますが、行の頭でjQueryの処理だと宣言した状態で関数内に$を指定しておけば、関数の中までjQueryと記述しなくても、$の記述で済ませることができます。