株式会社RJC　技術サイト

readyイベントを何回も書き直した理由

さて、まずは今までのコードを実際に見比べて見ましょう。
プレーンなJavaScriptの書き方から順に、これまで書いてきたコードを並べていきます。

window.onload = function() {
	alert("Hello JavaScript World!");
}

jQuery(document).ready(function() {
	alert("Hello World!");
});

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

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

どの書き方も、やりたいことは同じ「ページを開いたらアラートを出す」ですが、比べてみると最終的に半分くらいのコード量に減りました。
これこそjQueryが目指していることであり、多くの人がjQueryを使う理由でもある「write less, do more.（少ない記述で多くの処理を）」です。
同時に、初めてjQueryに触れる多くの人が混乱する原因でもあります。
これまで順を追って段々と短いコードになりましたが、最初のコードを見て受けるイメージはどうでしょうか？

jQuery(document).ready(function() {
	alert("Hello World!");
});

具体的なことが分からなくても、コードを順に読んで行くと「jQuery」、「document」、「ready」、「function」と言うワードが出てきます。
無理矢理繋げて読めば「jQueryを使っていて？ドキュメントを渡して？準備をして？function（何か処理）が書いてあるなー」と読むこともできます。
このコードを見ながら「jQueryにはreadyイベントっていうモノがあって、こうやって使うんだよ」っと言われれば何となくそれっぽく聞こえますね。
ところが最後のコードはどうでしょうか？

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

何も知らない状態でこのコードを見せられて「これがreadyイベントだから。覚えて」って言われても難しいと思います。
あまりにもコードが短すぎて、「$ってなんだよ！」っとなり、いきなり出鼻を挫かれてしまいます。
もうお気付きだと思いますが、皆さんはすでにjQuery最初で最大の難関を突破しています。
「$」は「jQuery関数」の別名だと知っていることはとても重要です。
そして、順を追ってreadyイベントについて説明を受け、最終的に「$(function(){何か処理});」の構文に辿り着いた皆さんは
ここで改めて、「ページを開いた時に実行させたい処理をjQueryで書くにはどうするの？」となった時に、このコードを見ても違和感を感じないはずです。

readyイベントのまとめ

readyイベントについてのまとめです。

「jQuery」は、色々な機能が詰まっている便利なモノ
「jQuery」と「$」は同じモノ
「$(function() {});」は「$(document).ready(function() {});」のショートカット
「$(document).ready(function() {}」はreadyイベントで実行させたい処理の書き方
ページを開いた時に実行させたい処理をreadyイベントに書く

つまり、「jQueryを使ってページを開いた時に実行させたい処理は$(function() {ここ});に書く」となります。
さて、次のページでは「$」とはそもそも何なのか解説していきます。

TOPへ戻る