$(function(){});って何？jQueryの実行タイミングについて - jQueryを書けるようになりたい(1)

jQueryのプラグインを設置するときによく使うこの書き方。

$(function(){
    // 何かの処理
});

いつも何となく使っていましたが、いろいろな書き方があったので詳しく調べてみました。

DOMが準備されたタイミングで処理を行う書き方

$(function(){
    // DOMが準備されたタイミングで処理
});

DOMが準備されたタイミングで処理を行います。
平たく言うとHTMLを読み込んでから処理を行うので、HTMLの要素に何かしたり、クラス名を変更したりしたいときはこの書き方をします。
画像などその他の要素は読み込んでなくても処理が実行されます。
「documentがreadyになったとき」とか「readyイベントが発生したとき」という言い方もします。

$(document).ready(function(){
    // DOMが準備されたタイミングで処理
});

こちらの書き方もよく見かけると思いますが、これの省略形が$(function(){...});なので動作は同じです。

jQuery(function($){
    // DOMが準備されたタイミングで処理
});

他にもこのような書き方がありますが、jQueryの中では$=jQueryなのでこちらも動作は同じです。

ページがすべて読み込まれたタイミングで処理を行う書き方

$(window).on('load', function(){
    // ページがすべて読み込まれたタイミングで処理
});

DOMが準備され、ページ内の画像などが全て読み込まれたタイミングで処理を行います。
画像の高さや幅を取得したいときなど、何か目的があるときはこの書き方をします。
「loadイベントが発生したとき」という言い方もします。

それぞれの処理が実行される順番

$(window).on('load', function(){
    console.log("ページがすべて読み込まれたタイミングで処理");
});

$(function(){
    console.log("DOMが準備されたタイミングで処理");
});

console.log("読み込まれたらすぐ処理");

まず素のままで書かれた箇所が最初に処理され「読み込まれたらすぐ処理」がコンソールログに表示されます。
次にDOMが準備され「DOMが準備されたタイミングで処理」が表示されます。
最後に画像などの読み込みが終わると「ページがすべて読み込まれたタイミングで処理」が表示されます。

素のままで書かれた処理と$(function(){...});の処理を比べると、必ず$(function(){...});の処理が後で実行されます。DOMが準備できているかどうかに関わらず処理の順序は変わらず、一貫性が保たれています。

$(function(){...});と$(window).on('load', function(){...});を比べると、ページの読み込み速度によって結果が違うことがありました。上記のコードだと、ページの読み込みが早い場合は上から順に実行されるため$(window).on('load', function(){...});のほうが先に実行される場合があります。スクリプトの動作を安定させるためには$(window).on('load', function(){...});を後のほうに記述するほうが良いかもしれません。

jQuery3.xにおける注意点

古いjQueryで動作していたプラグインを使ったり、古いドキュメントを参考にしたときにハマるかもしれないポイントをまとめました。

document-ready処理が非同期に

$(function(){
    console.log("DOMが準備されたタイミングで処理");
});

console.log("読み込まれたらすぐ処理");

上記のコードで、jQuery3.xではdocumentがreadyどうかにかかわらず
「読み込まれたらすぐ処理」→「DOMが準備されたタイミングで処理」
の順序で処理が実行されます。
以前のバージョンでは、ready後にこのコードが読み込まれた場合
「DOMが準備されたタイミングで処理」→「読み込まれたらすぐ処理」
の順序で処理が実行されていました。

この変更に伴い、以下の書き方だとload後に実行させたい処理が実行されなくなります。

$(function(){
    $(window).on('load', function(){
        console.log("ページがすべて読み込まれたタイミングで処理");
        // ここは実行されなくなります。
    }); 
});

.load()の削除

$(window).load(function() {
    console.log("ページがすべて読み込まれたタイミングで処理");
});

ページがすべて読み込まれたタイミングで処理を行いたい場合、以前はこの書き方も使われていました。jQuery3.xでは.load()が削除されているので、エラーが表示されます。

on(‘ready’, ...)の削除

$(document).on('ready', function() {
    console.log("DOMが準備されたタイミングで処理");
});

DOMが準備されたタイミングで処理を行いたい場合、以前はこの書き方も使われていました。jQuery3.xではこの処理は行われません。

$(...);以外の非推奨

$(document).ready(function(){
    // DOMが準備されたタイミングで処理
});

最初にこの書き方を紹介しましたが、こちらは非推奨となっています。
まだ動作しますが、推奨される書き方に比べて長いですし、使う必要もないでしょう。
$(function(){...});という書き方をしなかったのは、$(...);に他の関数を入れる書き方もあるからです。余裕があれば紹介します。

参考になったサイト・ブログなど

• jQuery 3.xを使ってみる - cly7796.net http://cly7796.net/wp/javascript/started-with-jquery3/
• 【翻訳まとめ】jQuery 3.0 アップグレードガイド https://qiita.com/fmy/items/345a264a1cf2e2a73f62
• jQueryの読込み「ready」と「load」と「function」の順番について - web-wizardry http://web-wizardry.net/jquery/jQueryの読込み「ready」と「load」と「function」の順番について/
• $(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！ - WEMO.tech https://wemo.tech/109