$(function(){})は「読み込みを待ってから実行する」という意味！
jQueryを使っていて、よく見かける$(function(){})。これは一体どういう意味なのでしょうか？
$(function(){})の役割
$(function(){})は、一言でいうと「DOMの読み込みが完了してから、{}内の処理を実行する」という役割を持っています。DOMとはDocument Object Modelの略で、HTML 문서의 요소をJavaScriptで操作できるように、ツリー構造で表現したものです。
JavaScriptは、基本的にはHTML 문서が上から順番に読み込まれ、実行されます。そのため、HTML 문서の読み込みが完了する前にJavaScriptで要素を操作しようとすると、要素が見つからずエラーになってしまうことがあります。
そこで登場するのが$(function(){})です。この記述をすることで、HTML 문서、画像、CSS、JavaScriptなどの読み込みが全て完了してから、{}内の処理が実行されるようになります。
なぜ$(function(){})を使うのか？
$(function(){})を使う主な理由は、以下の2点です。
| 理由 | 説明 |
|---|---|
| 要素の取得エラーを防ぐ | HTML 문서の読み込みが完了する前にJavaScriptで要素を操作しようとすると、エラーが発生する可能性があります。$(function(){})を使うことで、確実に要素を取得することができます。 |
| コードの可読性向上 | $(function(){})を使うことで、HTML 문서の読み込み完了後に実行したい処理を明確に記述することができます。 |
$(function(){})の使い方
$(function(){})は、以下のように記述します。
<script>
$(function(){
// ここにHTML 문서の読み込み完了後に実行したい処理を記述する
});
</script>
使用例
例えば、ボタンがクリックされたらアラートを表示する処理を、HTML 문서の読み込み完了後に有効化したい場合は、以下のように記述します。
<button id="myButton">クリック</button>
<script>
$(function(){
$('#myButton').click(function(){
alert('ボタンがクリックされました！');
});
});
</script>
$(function(){})の別表記
$(function(){})は、$(document).ready(function(){})の省略形です。どちらも同じ意味を持ちますが、一般的に$(function(){})の方が短いのでよく使われます。
参考文献
よくある質問
Q1. $(function(){})を書かないとどうなる？
A1. HTML 문서の読み込みが完了する前にJavaScriptが実行され、要素が見つからずエラーになる可能性があります。
Q2. $(function(){})は複数記述できる？
A2. はい、複数記述することができます。それぞれの$(function(){})は、上から順番に実行されます。
Q3. $(function(){})はjQuery以外でも使える？
A3. いいえ、$(function(){})はjQueryの関数なので、jQueryを読み込んでいる必要があります。
その他の参考記事:JavaScript関数