株式会社RJC　技術サイト

$関数について

さて、少し遠回りをしましたが$関数について説明します。
先ほどの説明で「結局jQueryの$って関数なの？変数なの？」と聞かれれば
答えは「$はただの変数名で、変数の中身が関数」ということになります。
実はちょっと違うのですが、ここで解説しても混乱の元になるので後ほど改めて解説したいと思います。
それではここでreadyイベントのコードを見てみましょう。

$(function() {
	alert("Hello World!");
});

先ほどの説明を踏まえた上でこのコードを見ると、アラートを表示する「無名関数」を引数にして「$」と言う関数を実行していることがわかります。
$関数に引数として関数を渡し、実行すると「readyイベント発生時に引数の関数を実行する」ように$関数内で処理が行われます。
少し難しかったでしょうか。ともかく$関数に関数を渡すとreadyイベントに登録されるので、次のように書くことができます。

function helloWorld() {
	alert("Hello World!");
}

$(helloWorld);

この時、関数を代入している変数名もしくは関数名の後ろに「()」をつけてはいけません。
「()」を付けて記述すると、「helloWorld関数の戻り値を引数にして$関数を実行」することになります。
次のコードの場合、実装者の意図は「Hello First!」、「Hello Second!」の順番でアラートを表示したいのですが、
実際には逆の順番で表示されてしまいます。

function helloFirst() {
	alert("Hello First!");
}
function helloSecond() {
	alert("Hello Second!");
}

$(helloFirst);
$(helloSecond());

ところで、通常は$関数にわざわざ関数を作って渡すことはしません。なぜでしょうか？
もう一度JavaScriptについて考えてみましょう。どんな処理をしたくて関数を作りますか？
何回も実行したい処理を関数にしますよね。
では、readyイベントで実行したい処理はどうでしょうか？
「ページを開いた時に実行させたい処理をreadyイベントに書く」わけですから、1度しか使いませんね。
つまり、「必要ない」から無名関数ですませているのです。
逆に、ページを開いた時に実行させたい処理を、他のタイミングでも実行させたい場合は関数を作ります。
$関数も「関数」ですから、何度でも使うことができます。例えば次のように書くことができます。

function helloWorld() {
	alert("これは何度も実行したい処理です。");
}

$(helloWorld);
$(function() {
	alert("これは1回だけ実行したい処理です。");
});

これを知っていれば、同じページ内で複数の外部JavaScriptファイルを読み込んでいるときに
$関数をそれぞれで使っていても問題なく動作することが分かります。
しかし、1つのJavaScriptファイル内で$関数（のreadyイベント用ショートカット）を複数個所で呼び出すことはしません。
なぜなら、helloWorld関数に引数が必要な時に困りますよね？次のように書き換えましょう。

function helloWorld(msg) {
	alert(msg);
}

$(function() {
	helloWorld("これは何度も実行したい処理です。");
	alert("これは1回だけ実行したい処理です。");
});

こちらの方が、readyイベント時に実行される処理順序がより明確に見て取れますね。
わざわざ$関数を2回呼ぶ必要もないので、特に必要がなければこのように記述してください。

TOPへ戻る