$(function(){})ってどういう意味？jQueryのおまじないをわかりやすく解説します

今回はこの「$(function(){})」の意味をわかりやすく解説します。

$(function(){})は「読み込みを待ってから実行する」という意味！

この記述を忘れるとプログラムがうまく動作しなくなってしまうこともあるので注意しましょう。

どういう場合にプログラムが動かなくなってしまうのかといえば、jQueryの記述がHTML要素よりも先にきてしまった場合です。

HTMLは上から順に読まれる

HTMLは基本的に上から下に読まれていきます。

そのためjQueryの記述を書く際に、HTML要素が読み込まれる前にjQueryを書いてしまうと、まだ読み込まれていない要素をjQueryで指定しようとするためプログラムがうまく動かなくなってしまいます。

jQueryの記述をHTML要素よりも先に書いた例

以下はjQueryの記述をHTML要素よりも先に書いた例です。

<script>
    $('#sample').click(function(){
      alert('test');
    })
</script>
<button id="sample">押したらアラートがでます。</button>

このようにHTML要素を読み込む前にjQueryを実行することを防ぐ役割をするのが$(function(){})です。

$(function(){})を使うと、$(function(){})の中に書かれた記述はHTMLの読み込みが完了するまでは待機するようになります。

そのため、まだ読み込まれていないHTML要素をjQueryで指定してしまうというエラーを避けることができるようになるのです。

$function()を使った例

次は$function()を使った例をみてみます。

以下の例はjQueryの記述が$(function(){})によって囲われています。

<script>
  $(function(){
    $('#sample').click(function(){
      alert('test');
    })
  })
</script>
<button id="sample">押したらアラートがでます。</button>

通常であればjQueryによるDOMの指定がHTML要素の読み込みよりも前にくるとエラーになってしまいますが、この例では$(function(){})が書かれていることでエラーにならずに実行することができるようになります。

まとめ

ちなみに$(function(){})と同義の書き方には、

$(document).ready(function() {});

jQuery(document).ready(function() {});

$().ready(function() {});

このような書き方もあるため合わせて覚えておくとよいでしょう。