$(function() {})の意味は？$(window).on(‘load’,function(){})との違い

jQueryの初学者には、$(function() {})を意味も分からず「おまじない」のように記載している方も多いのではないでしょうか？

しかし、実際には、JavaScriptやjQueryを実行するタイミングを決めるために重要なコードです。

今回は、$(function() {})の意味や、混同されやすい$(window).on('load', function() {})との違いについて詳しく解説します。

これまで何となくで記述していた方は、ぜひ本記事を参考にしてみて下さい。

$(function() {})とは？

$(function(){})は、DOM^※の読み込みが完了したタイミングで指定した関数を実行するための記述です。

※DOM（Document Object Model）とは、ウェブページの内容や構造をプログラム（JavaScript）で操作できるようにするための仕組み・APIのことを指します。
DOMを使用するために、ページの各要素（例：見出しタグ、divタグなど）を階層構造で整理したものを「DOMツリー」と呼び、各要素のことを「ノード」と呼びます。

DOMの読み込みは、ブラウザがHTMLやXMLファイルの構造解析を終えて、DOMツリーが構築されたタイミングで完了します。

DOMツリーが構築されていない状態でJavaScriptやjQueryがDOM要素にアクセスしようとすると、期待した操作が実行されない場合があります。

そのため、通常は$(function(){})でコードを囲んであげることで、DOMツリーの構築が完了してからコードを実行するように設定します。

// ◯ 良い例
$(function () {
  $(".example").text("DOMの読み込みを待ってから操作します。");
});

// × 悪い例・・・うまく実行できない場合あり
$(".example").text("DOMの読み込みを待たずに操作します。");

なお、$(function(){})は$(document).ready(function () {})の省略形です。

そのため、以下2つのどちらで書いたとしても意味は同じです。

// 省略形
$(function () {
  // ここに処理を記載します。
});

// 省略せずに書く場合
$(document).ready(function () {
  // ここに処理を記載します。
});

$(window).on(‘load’,function(){})とは？

$(window).on('load',function(){})は、ページ内のすべてのリソース（HTML、CSS、画像、フォントなど）の読み込みが完了したタイミングで指定した処理を実行するための記述です。

画像やCSSなどのリソースの読み込みは、DOMの読み込みが終わった後に行われるため、実行されるタイミングは$(function(){})＞$(window).on('load',function(){})となります。（$(function(){})の方が早い。）

// 先に実行される
$(function () {
  $(".example").text("DOMの読み込みを待ってから操作します。");
});

// 後に実行される
$(window).on("load", function () {
  $(".example").text("ページ内の全リソースの読み込みが終わった後に操作します。");
});

基本的には$(function(){})の方を使っておけば問題ないケースが多いですが、一部画像の横幅や高さを取得したい場合などでは、$(function() {}) だと画像の読み込みが完了していないため、正確にサイズを取得できない可能性があります。

そういったケースでは、$(window).on('load',function(){})を利用することで、正確なサイズの取得ができるようになります。

$(window).on("load", function () {
  // ページ内の全リソースが読み込まれた後に画像サイズを取得
  const imgHeight = $(".myImage").height();
});

利用シーンの違い

以下が$(function(){})と$(window).on('load',function(){})の利用シーンの違いをまとめたテーブルです。

画像サイズの取得の他にも、全てのリソースが完全に読み込まれてからローディングアニメーションを非表示にしたいといった場合に$(window).on('load',function(){})が利用されます。

おまけ：素のJavaScriptでDOMの読み込み完了時に処理を実行する方法

jQueryを使わずに$(function(){})と同じ処理を書きたい場合は、addEventListenerメソッドを使用し、DOMContentLoadedイベントを登録します。

// jQueryで書いた場合
$(function () {
  // ここに処理を記述
});

// JavaScriptで書いた場合
document.addEventListener("DOMContentLoaded", function () {
  // ここに処理を記述
});

$(window).on('load',function(){})の場合は以下のように書きます。

// jQueryで書いた場合
$(window).on("load", function () {
  // ここに処理を記述
});

// JavaScriptで書いた場合
window.addEventListener("load", function () {
  // ここに処理を記述
});

まとめ

今回はjQueryの$(function(){})の意味や$(window).on('load',function(){})との違いを詳しく解説しました。

両者の実行タイミングの違いを理解しておくと、JavaScriptがうまく動作しない原因を素早く特定でき、エラーの解決に役立つでしょう。

これまで何となくで記述していた方は、ぜひ意味を理解した上で使ってみて下さい。

今回は以上になります。最後までご覧頂き、ありがとうございました。