【JavaScript】$(function(){})ってどういう意味なのか

JavaScriptのソースでよく見かける「$(function(){})」について、どういう意味を表すのかを書いていきます。

JavaScriptにおける関数定義には、「function」を使います。クラスの定義にも使うので、もはや「function」を使わないJavaScriptはないといってもいいでしょう。そんな中、様々なソースを見ていると以下のような関数定義を目にすることがあります。

これは一体どういう意味なのでしょうか？

$(function(){})の意味

結論からいうと、全てのDOM要素を読み込んだ後に読み込まれる関数です。
ページの読み込みが完了した後、といった方がいいかもしれません。

どういうことでしょう。

JavaScriptのソースを読み込む際、HTML内にどういう処理を加えればいいかは以下の通りとなっております。

記事内でもいった通り、<head>タグ、<body>タグ内で読み込む方法の２パターンあったと思います。
<head>タグ内で読み込んだ場合、HTMLは上から順番に読み込むため<body>の内容より前にJavaScriptのソ
ースが読み込まれることになります。

例えば以下のようなHTMLの場合

これはどう処理されるでしょうか？
JavaScriptが読み込まれる　→ 　<body>の内容（動かしたいオブジェクト）が読み込まれる

つまり

アニメーションを実行　→ 　動かしたいオブジェクトを表示

となるため画面上ではシーンとなってしまいます。
ソースや処理を読み込む順番はとても大事なのです・・・。

しかし、そんな時！

そのアニメーション処理を$(function(){})で囲んだらどうでしょうか！？
上記のソースの並びは一切変更しません。

こうなります！

JavaScriptが読み込まれる(内部に$(funciton(){})の記述あり)　→ 　<body>の内容（動かしたいオブジェクト）が読み込まれる　→ 　$(function(){})内の内容

素晴らしい！
<body>タグの最下層でJavaScriptを読み込ませている場合は必要ないかもしれませんが、
<head>タグで読み込んでいる方は是非活用してください。

「$(function(){})ってどういう意味なのか」については以上です。
よろしければ他のノウハウも見ていってください。