jQuery初心者「$(function() { });ってなんだろう?何気なく、</body>の直前にjsを読み込んでいるけど何でだろう。」 こういった疑問に答えます。

こんにちは,坂本です. エンジニア歴は4年くらいで,2018年0 9月からプログラミング講師をやっています.(担当生徒数200人突破)Webの勉強をはじめたけどjQueryがよく分からない…そんな生徒さんを数多く見てきました.
今回は,普段何気なく行っているこの二つを改めて意識することによって理解を深めていきましょう.

$(function() {});ってなんだろう?

DOMContentLoaded という意味

詳しく解説していきます.
DomContentLoadedはHTML文書の構造が完全に構築された後,という意味になります.ここには画像や動画などの読み込みは含まれていません.
類似の window.onload は画像や動画読み込み後に実行されます.

ここで,一つ質問です.
$(function() {})を記述せずに書くと何が起こるでしょうか?
答えは,正常に動作しない場合があります.
なぜなら,通常,HTMLの読み込みとJSの実行は並行して行われるので,HTMLを構築中にHTML文書を読んだり書いたりする処理をJSで記述すると,HTMLの構築が間に合わずして実行されてしまうことがあるので思わぬ挙動をする場合があります.

つまり,$(function() {});として,このなかに処理を記述することによって,予期せぬ動作を防げる,と思って頂いても今は構いません.

$(function() {});とは,HTML読込とJSの実行タイミングを合わせるおまじない.

</body>の直前に script読み込みするのはなぜ?

答え:HTMLの読込を優先させるため

先ほど述べたように HTMLの読込とJSの実行は並行して行われます.ただ,JSの読込順が早いと,それ以下のHTML文書の読込が遅延する場合があります.

ただ,あまり見慣れないかもしれませんが,<script src=”main.js” defer></script> とすることで同様の効果を期待できますので,使ってみるのも良いと思います.

<script src=”main.js” defer></script> を使ってみよう!

参考

https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async
https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event

もし分からないところがあれば,LINE@でもしくはTwitterで僕に質問できるので気軽にしてみてくださいね!

ヤスに無料で質問してみる!