THE HAM MEDIA BLOG

今さら聞けないjQuery実行パターンまとめ :: 5509(+1)

noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){〜});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。

十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー

慣習的に書く理由

この「$(document).ready(function(){〜});>」や「$(function(){〜});」はjQueryのスクリプトを書くときの最初に、慣習的に書くもので、「おまじない」とか「とりあえず書いておけ！」なんて言われて、何となく書き入れていたりしませんか？

noriさんのところでも書いてあるのですが、これを書き入れておくことで、Documentの読み込みが完了時に、実行するようになります。

これの中にjQueryコードを書いていくとページロード時（Documentの読み込みが完了時）に実行してくれます。

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

では、なぜDocumentの読み込みが完了時に動作させなければならないのか？

読み込み前の実行してしまうと

それは、読み込み完了前に動作させてしまっても、肝心の動作させたい要素を見つけることができないからです。なぜなら要素が準備される前での実行だからです。設置される前に探しに行っても、設置されてないんですから見つけることなんてできないですよね。

勝手に設置とか言葉使ってますが、あくまでイメージです。HTMLが全部ブラウザに読み込まれてDocumentを読み込んでタグの設置が完了した！ってなってなる前に「タグはどこでつか〜？」なんて探しに探しにいっても意味ないので、だからDocumentが読み込まれて準備ができてから(ready)コードを実行しないと、要素を見つけることができないのです。

ちょっと余談

話をややこしくするかもしれないのですが、別な事を言えば、HTMLよりも後にコードを書くことでも、要素ができた後に探しに行くことになるので、要素を見つけることができます。

scriptをheader内に書くのではなくて、bodyの最後とかに書く方法などがそれに当たります。

仕様や好みによるかもしれないのですが、そういう方法もあります。しかし、scriptはheader内でまとめて読み込む方が一般的だと思われるので、個人的にはあまりおすすめしません。

細かいけどjQueryの便利な点

ここはちょっと細かい事なんですが、jQueryの.ready()メソッドを使うことで、様々な機能をDocumentを読み込んだ時に実行できるので便利です。

どういう事かというと、JavaScriptをライブラリとか使わずに書いて、jQueryでしているように、Documentを読み込んだ後に実行させる機能をあれこれやろうと思うと、ちょっとスクリプトを工夫しないと、同時にあれこれさせることができなかったりします。

.ready()ではなくて、window.onloadで実行した場合の例をあげておきます。

window.onload = function fn_A(){
    alert($('p:eq(0)').text());
};
window.onload = function fn_B(){
    alert($('p:eq(1)').text());
};
window.onload = function fn_C(){
    alert($('p:eq(2)').text());
};

この場合、最後しかアラートが出ません。

毎回window.onloadを書いただけで実行した場合は、同じものは上書きされてしまうので、最後に指定したものだけが機能します。例えば下記のような場合。

デモ

まぁ、上記のようなシンプルなものであれば、一つにまとめてしまえばいいじゃんって事なんですが、プラグインとかで機能が沢山あって、それらをまとめて実行しなければならないなんて時でも、.ready()メソッドに入れればいいものが多かったりします。これがないと、毎回onloadにイベントをどんどん追加しれていく記述をしなければ動作しないなんて事もでてきたりします。

ブラウザを特に気にせずにまとめられるので、地味に便利なのです！

細かな事なんですし、特に覚えておかなくてもいいので、これならまとめるのが楽だ！とだけでも頭の片隅に入れておいて下さい。

ブログなどで使う場合

実行のタイミングについてはこれで補足終了。理解できたでしょうか？

さて、次に補足しておこうと思うのはブログなどでjQueryを使う場合の「こんな書き方しておくといいよ〜」という事を書いておきます。

他のライブラリでも「$」このドルマークを使うようなのがあるので、jQueryとそれらのライブラリを複数利用する場合は、衝突を回避する必要があります。これはnoriさんのところでも書いてありますね。

その場合の回避方法としては、

var $j = jQuery.noConflict();

などとして、noConflict()を使う方法と、

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

というのが書いてありましたが、自分もnoriさん同様に書き方なども簡単なので、後者をお薦めします。

単におすすめという他だけでなく、何かあった場合の回避策にもなるので、WPなどno CMS で使う場合で、且つ、様々なWPのプラグインを多用するようなところでjQueryも使う場合は、後者の書き方にしておくのが無難です。WPのプラグインや、配布されているテーマによっては、あらかじめjQueryじゃないライブラリが含まれていることもあり、それによって、設定しておいたものが使えなくなるなんてことも起きる可能性があるからです。

というのも、自分が何度かそういうことを経験したことが何度か。。。

最近でこそjQueryのプラグインが充実し、それを優先的に使われるケースが増えてきているように感じているのですが、はやり中には、mootoolsやprototype.jsなどのライブラリを使っていものもあるので、それらと衝突しないように、先ほどの後者の書き方をしておくようにしましょう。

ブログに限らず、基本的にそれを使っておくことで、他の人が意図せぬライブラリを使ったとしてもあらかじめ衝突を回避できます。

一人でコーディングする場合は特に気にしなくてもいいかもしれないですが、複数ライブラリを使うようなケースや、CMSのプラグインを使う場合などなど、少しでも衝突の可能性があるような場合は、回避策を入れておく書き方をしましょう。

以上、ちょっとした補足などなどでした。