jQueryを書く時に書くことが多い「$(function(){})」という記述。
とりあえず書いているけど「どういうなのか分からずに使ってしまっている」という方も多いのではないでしょうか？
今回はこの「$(function(){})」の意味をわかりやすく解説します。
$(function(){})は「読み込みを待ってから実行する」という意味！
$(function(){})は「HTML要素を読み込んでからjQueryを実行する」という意味です。
この記述を忘れるとプログラムがうまく動作しなくなってしまうこともあるので注意しましょう。
どういう場合にプログラムが動かなくなってしまうのかといえば、jQueryの記述がHTML要素よりも先にきてしまった場合です。
HTMLは上から順に読まれる
HTMLは基本的に上から下に読まれていきます。
そのためjQueryの記述を書く際に、HTML要素が読み込まれる前にjQueryを書いてしまうと、まだ読み込まれていない要素をjQueryで指定しようとするためプログラムがうまく動かなくなってしまいます。
例でみてみましょう。
jQueryの記述をHTML要素よりも先に書いた例
以下はjQueryの記述をHTML要素よりも先に書いた例です。
この例では#sampleのHTML要素が読み込まれる前に$(‘#sample’)を記述してしまっているためうまく動きません。
このようにHTML要素を読み込む前にjQueryを実行することを防ぐ役割をするのが$(function(){})です。
$(function(){})を使うと、$(function(){})の中に書かれた記述はHTMLの読み込みが完了するまでは待機するようになります。
そのため、まだ読み込まれていないHTML要素をjQueryで指定してしまうというエラーを避けることができるようになるのです。
$function()を使った例
次は$function()を使った例をみてみます。
以下の例はjQueryの記述が$(function(){})によって囲われています。
通常であればjQueryによるDOMの指定がHTML要素の読み込みよりも前にくるとエラーになってしまいますが、この例では$(function(){})が書かれていることでエラーにならずに実行することができるようになります。
まとめ
今回はjQueryのおまじないの使い方について紹介しました。
ちなみに$(function(){})と同義の書き方には、
$(document).ready(function() {});
jQuery(document).ready(function() {});
$().ready(function() {});
このような書き方もあるため合わせて覚えておくとよいでしょう。
この記事が参考になりましたら、SNSでシェアしていただけるとうれしいです！