はじめに

jQueryの学習をしていると必ず出てくる**$(function(){...})**
とりあえずjQueryの記述をする時に
一番最初に記述する事はなんとなくわかった・・・

けど、これを記述するのにどんな意味があるの？？
仮に記述しなかったらどうなるの？？
こちらを今までなんとなく理解していた方にご紹介したいと思います。

$(function(){...})の意味

$(function(){...})は簡単に言いますと予約状態という事になります。
さすがにこれだけでは意味がわからないので
functionの理解に欠かせないHTMLのコードもまじえながらご紹介していきます。

HTML

index.html

!DOCTYPE
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title>jQuery</title>

<!-- scriptファイルの読み込み -->
  <script src="jquery-3.4.1.min.js"></script>
  <script src="main.js"></script>             <!-- 1 -->

 </head>
 <body>

 </body>
</html>

JavaScript

main.js


$(function(){
 //なにかしらの処理
});

jQueryのライブラリと実際にコードを書いていく(main.js)ファイルは外部から呼び出しています。
そしてmain.jsの中身は処理を書いていく為に必要な最初のコード
今回ご紹介する$(function(){...})が書かれています。

さて、$(function(){...})について説明する前に
HTMLが実行される順番から見ていきます。
HTMLは基本的に上から順番に処理が実行されます。

そして1の所まで到達すると読み込みを開始し、完了後すぐにその内容を実行することになります。

しかし、ここで一つ問題が・・・

main.jsの中身にはHTMLの要素を操作する命令が書かれていることが多のですが
コードではまだhead要素の途中までしか読み込めていません。
1番以降の要素がまだ認識されていない為
処理を実行する事ができないということになってしまいます。

そこでその問題を解決するのが**$(function(){...})**です。

冒頭に述べた通り、main.jsの処理を一旦予約状態で止めておいて
HTMLの読み込みが全て完了した後にmain.jsが実行されるというわけです。

$(function(){...})を書き忘れると？

わざわざこれの見出しを分ける必要があったのか？と疑問に思いましたが一応・・・
もうお気づきの方はたくさんいらっしゃると思いますが
こちれのコードを書き忘れるとHTMLを最後まで読み込まずにmain.jsが実行されちゃいます。

やっぱり理解が難しい！って方はHTMLで言う所の!DOCTYPEのように
jQueryを使う時は$(function(){...})と覚えていれば
とりあえず大丈夫だと思います。

番外編

さて、jQueryを使う時の決まり文句に$(function(){...})をご紹介しましたが
実は他にもいろいろ書き方があります。

$(document).ready(function{
 //処理
});

jQuery(document).ready(function(){
 //処理
});

jQuery(function(){
 //処理
});

上記の三つはもしかしたらあまり使う機会がないかもですが
もし他の所で出てきたら、$(function(){...})と同じなんだなと
思ってもらっても大丈夫だと思います。

ここまで読んでくださってありがとうございます。
今後の活動の為に誤情報などございましたら
コメントでご指摘くださいm(__)m