今さら聞けないjQuery実行パターンまとめ

なんとなく使っているだろう.ready()メソッドについて詳細に見てみましょう。

.ready()メソッド

.ready()メソッドという呼び方がパッとしない人もいると思います。こういうのです↓

$(function(){
  // .ready()が呼び出されたときに実行されるハンドラ
});

jQueryを実行する際のおまじないみたいなものですね。これの中にjQueryコードを書いていくとページロード時（Documentの読み込みが完了時）に実行してくれます。

何気なく使ってる人も多いと思いますが、実際のところこれは何？ということで、少し掘り下げてみましょう。

.ready()を使う際の形式

jQuery APIによれば、以下の3つが.ready()として同じように使えるようです。

1. $(document).ready(handler)
2. $().ready(handler) (推奨されていない使い方)
3. $(handler)

handler

DOM Readyの時点で実行されるfunction
無名関数function(){}がこれに当たります

つまり、それぞれを実際に使う場合は

1. の場合

$(document).ready(function(){
  // 実行する命令
});

見て分かる通り、Documentがreadyになったら、つまりDocumentの読み込みが完了したら実行します。

2. の場合（使えるが推奨はされていない）

$().ready(function(){
  // 実行する命令
});

1.のdocumentを省略した状態。ただし公式ドキュメントでも注意書きがある通り、この形式では使わないほうがよさそうです。

3. の場合

$(function(){
  // 実行する命令
});

こちらは、一番よく見る例のアレですね。$(document).readyを$と省略した形です。一番文字数が少なくて済むのでよく使われています。

$ = jQuery

jQueryを使っていると$という文字をたくさん使いますが、これはjQueryのエイリアスになっています。つまり以下のコードは同じことを意味します。

$('a').click(function(){});
jQuery('a').click(function(){});

よく知られているところでは、Prototype.jsも同じように$を使っていて、jQueryと同時に使うと$の衝突が起こります。この場合、$.noConflict()を使って

var $j = jQuery.noConflict();

のようにして、$の代わりに$jをjQueryとして使うことで回避したりします。

強制的に$をjQueryとして使う場合

より安全に、.ready()の中だけは$をjQueryのエイリアスとして使う場合、次のように実行します。

jQuery(document).ready(function($){
  // この中では$はjQueryとして扱われる
});

コメントに書いたように、この書き方だと、Prototypeなどの$を使っているライブラリを同時にロードしていても、.ready()の中だけは$をjQueryとして扱うことができます。ただし、Prototypeの$は当然使うことは出来ないです。

さらに省略形と合わせることもできます。このほうが使いやすいでしょう。

jQuery(function($){
  // この中では$はjQueryとして扱われる
});

実行パターンまとめ

というわけで推奨されていない物以外をまとめると以下の4つになります。どれを使っても実行結果は同じなので、好みになると思いますがおすすめはトラブルが少なそうな4.ですね。

1. 基本のパターン

$(document).ready(function(){
  // 実行する命令
});

2. よく使われているパターン

$(function(){
  // 実行する命令
});

3. 他のライブラリも使うことを考慮した場合のパターン

jQuery(document).ready(function($){
  // 実行する命令
});

4. 2と3を組み合わせたパターン

jQuery(function($){
  // 実行する命令
});

ちょっと補足

THE HAM MEDIAのが補足を書いてくれましたので、こちらもあわせて読むとさらに理解が深まると思います。

• Re: 今さら聞けないjQuery実行パターンまとめ【実行のタイミングって？ちょっとした補足】

参考

.ready() – jQuery API

http://api.jquery.com/ready/