【jQuery】$(function() { ほにゃららら }); ってなに？必要？

最近は、コワーキングスペースタネマキの方で、記事を更新しています。@uetsuhara でも気になったニュースや記事など流してます。良かったら覗いてみてください。

読了目安 2分51秒

久々に記事を。今年に入ってから4ヶ月ほど CakePHP やったり Objective-C をガリガリかじってたりしてます。コードはガリガリではなく、おもにコピペでペタペタやってます。コピペプログラマー界で名を馳せてゆきたいなと目論んでいます。

この4ヶ月は、コーヒースポットというサイトを作り続けてます。WebView ですが、iPhone アプリも作ってみたり。まだショップのデータ不足ですが。coffee spot – 美味しいコーヒーが飲めるカフェやロースターを検索するガイドアプリ on the App Store on iTunes

それはさておき、タネマキでちょいちょい JavaScript のことをギンペイさんに教えてもらってるんですが、勉強したことを記事なりなんなりしとけよ( ´ﾟдﾟ)って言われたので、ここにアウトプットしていこーかなと！

なお、現在のぼくは、jQuery や JavaScript が必要になったらコピペ！くらいのスキルレベルです。その辺りの方に参考になれば。

ようやく本題のあれです。$(function() { ほにゃららら }); ってなに？です。

[js title=””]
$(function() {
ほにゃららら
});
[/js]

自分の書いた（てかコピペした…）コードみると、$(function() { ほにゃららら }); が書かれているのと書かれていないのがありまして。

書いても書かなくても動くので、なんだろなぁこれーまぁいっかーてな感じで、あわよくば消したりしてたんですが、ギンペイさんに聞いたらどうやら必要なものらしく！！

こいつは一体全体なにかというと、

[js title=””]$(document).ready(function() {
ほにゃららら
});[/js]

と同じものらしいです。えー。…なんのこっちゃ、と思うのはまだ早い！ギンペイさんに聞いた情報と、ちょこっと調べた内容をば。

これは、コードをどこのタイミングで発動するか、ということらしいです。

ざっくり言うと、「URLを開いてスグ」or「色々読み込んだ最後」にスクリプトを実行する、という違いのようです。（合ってるかな…）

何が不都合かと言うと、URLを開いた直後だと、例えば、色を変えたい要素がないのに色を変えるコードを実行しても反映されません、と。

フッターに CSS を付加するコードを書いているんだけど、フッターがまだ読み込まれていない段階で js を実行しても何も起こりませんということらしいです。

$(document).ready(function() を書いていない部分もあったんですが、ちゃんと実行されていました。なんでかってーと、js ファイルそのものの読み込みタイミングが遅かったから。

ぼくはたいてい、js は最後の方に書いています。head 内ではなく。もし、js の設置場所が head 内だったら、実行されていないコードもあったようです。なるほどー。たまたまスクリプトが実行されていただけなんですね。

ではでは。

色々つくってつくってつくり倒すぜい！