一言でいうと
- $(document).ready(...)という書き方は、もう推奨されていません。
- <body>の末尾に<script>を配置しているのなら、
ほとんどの場合、$(document).ready(...)を使う必要はありません。
推奨されていない
jQueryの公式ドキュメントには以下のように書かれています：
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
・$( handler )
・$( document ).ready( handler )
・$( "document" ).ready( handler )
・$( "img" ).ready( handler )
・$().ready( handler )
As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.
つまり、jQuery3.0では、DOM要素の構築を待ついくつかの構文のうち、$(...)という構文のみが推奨されており、$(document).ready(...)という構文はDeprecatedです。
今まで書いてきた書き方と比較すると以下のようになります。
Bad (推奨されていない書き方):
$(document).ready(function() {
...
});
Good (推奨されている書き方):
$(function() {
...
});
使う必要がない
<body>の末尾に<script>を配置した場合、<script>より上にあるDOM要素は、読み込みと解析が完了しており、jQueryからアクセスすることができます。
なので、<script>より上にあるDOM要素にアクセスできるのを待つために、$(document).ready(...)を使おうとしているのであれば、$(document).ready(...)は必要ありません。
Bad （必要ない処理が含まれている）:
...
<div class="some"></div>
...
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
var element = $('.some'); //要素にアクセスできる
});
</script>
</body>
</html>
Good:
...
<div class="some"></div>
...
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var element = $('.some'); //ready()を使わなくても要素にアクセスできる
</script>
</body>
</html>
もしスコープをつくりたいのであれば、即時関数で包めばOKです。
(function() {
var element = $('.some');
})();
では、どんな時に使う必要がある？
<script>を<body>の末尾に配置することができない場合
以下のような状況では、上記の構文$(...)を使って、DOMの読み込みを待つ必要があります:
- なんらかの事情で<script>を<body>の末尾に配置することができない場合
- 自分が書いたスクリプトがどこでロードされるか予測できない場合
例えば<script>を<head>内でロードした場合は、$(...)が必要です。
<head>
...
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
var element = $('.some');
});
</script>
</head>
...
DOMContentLoadedイベントを完全に待ちたいとき
$(...)は、DOMContentLoadedイベントを待ちます。<body>末尾の<script>を実行したタイミングでは、DOMContentLoadedイベント自体は発火していないので、もしDOMContentLoadedイベントを確実に待ってから処理を行いたい場合は、$(...)が必要です。（とはいえ、このようなシチュエーションはほぼ無いでしょう）
雑感
自分の身近で、jQueryを使った場合に、$(document).ready(...);を使うことを強制する指導をしている場面がありました。非推奨な書き方は修正すべきとして、なぜこの指導が続けられているのかというと、以下の２点を手軽に実現できるからなのではないかと思います。
- どこに<script>を配置しても、DOMの読み込みを待つことができる
- これだけでスコープを作り出すことができる
JavaScriptやjQueryの初学者には、この指導をしてもよいかもしれません。でも、もし学んでいる相手にある程度の理解力があって、かつ指導する時間を確保できるのであれば、きちんと使うべき状況を説明すべきなのではないかと思います。
参考
- .ready() | jQuery API Document
https://api.jquery.com/ready/ - Is $(document).ready necessary? (stack overflow)
https://stackoverflow.com/questions/4643990/is-document-ready-necessary