もう迷わない！JavaScriptでページ読み込み完了時に関数を実行する方法：初心者向けから上級者向けまで

2024-06-28

JavaScriptでページの読み込み完了時に関数を実行するには、主に以下の2つの方法があります。

window.onloadイベントを使用する

window.onloadイベントは、ブラウザがページのすべてのコンテンツ (HTML、CSS、JavaScript、画像など) を読み込み終えたときに発生します。このイベントは、ページ読み込み後に実行する必要があるスクリプトを記述するのに適しています。

window.onload = function() {
  // ここに実行したい処理を記述する
  alert("ページが読み込まれました！");
};

上記の例では、alert("ページが読み込まれました！"); というメッセージボックスが表示されます。

DOMContentLoadedイベントを使用する

DOMContentLoadedイベントは、HTMLドキュメントの解析とDOMツリーの構築が完了したときに発生します。これは、画像などのリソースが読み込まれる前に発生するため、window.onloadイベントよりも早く実行されます。

document.addEventListener("DOMContentLoaded", function() {
  // ここに実行したい処理を記述する
  alert("DOMContentLoadedイベントが発生しました！");
});

どちらのイベントを使用するべきか？

一般的に、window.onloadイベントの方が、確実にすべてのコンテンツが読み込まれてから実行されるため、DOMContentLoadedイベントよりも安全に使用できます。

しかし、DOMContentLoadedイベントは、画像などのリソースの読み込みを待つ必要がないため、window.onloadイベントよりも早く実行されるという利点があります。

その他の注意点

上記の例では、関数内の処理を直接記述していますが、より複雑な処理の場合は、別途関数を作成して呼び出す方が良いでしょう。
複数の関数を実行する必要がある場合は、window.onloadイベントまたはDOMContentLoadedイベント内に配列で記述したり、それぞれ個別のイベントハンドラを設定したりすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>window.onloadイベント</title>
</head>
<body>
  <h1>ページが読み込まれました！</h1>
  <script>
    window.onload = function() {
      alert("window.onloadイベントが発生しました！");
    };
  </script>
</body>
</html>

このコードを実行すると、ページが表示された後、以下のメッセージボックスが表示されます。

window.onloadイベントが発生しました！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMContentLoadedイベント</title>
</head>
<body>
  <h1>ページが読み込まれました！</h1>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      alert("DOMContentLoadedイベントが発生しました！");
    });
  </script>
</body>
</html>

DOMContentLoadedイベントが発生しました！

説明

上記のコードでは、以下の処理が行われています。

HTMLドキュメントで、<h1> タグを使用して見出しを表示します。
<script> タグを使用して、JavaScriptコードを記述します。
window.onloadイベントまたはDOMContentLoadedイベントハンドラ内で、alert() 関数を使用してメッセージボックスを表示します。

補足

上記のコードは、基本的な例です。実際の開発では、より複雑な処理を実行する必要がある場合があります。
コードを実行するには、HTMLファイルをウェブブラウザで開く必要があります。

JavaScriptでページ読み込み完了時に関数を実行するその他の方法

jQueryのreadyメソッドを使用する

jQueryは、JavaScriptのライブラリの一つであり、DOM操作やイベント処理などを簡潔に記述することができます。jQueryには、readyメソッドと呼ばれるメソッドがあり、このメソッドはDOMが構築完了した時点で実行されます。

$(document).ready(function() {
  // ここに実行したい処理を記述する
  alert("jQueryのreadyメソッドが実行されました！");
});

特徴

window.onloadイベントやDOMContentLoadedイベントよりも簡潔に記述できる。
jQueryがなければ別途ライブラリの読み込みが必要。

MutationObserver APIは、DOMツリーの変更を監視するAPIであり、DOMが構築完了したタイミングを検知することができます。

const observer = new MutationObserver(function(mutations) {
  // mutationsには、DOMツリーの変更情報が含まれる
  console.log("MutationObserverが検知しました！");
});

observer.observe(document, {
  childList: true
});

上記の例では、コンソールログにMutationObserverが検知しました！と出力されます。

比較的新しいAPIであり、ブラウザによっては対応していない場合がある。

Promiseを使用する

Promiseは、非同期処理を扱うためのAPIであり、DOM構築完了を待機してから処理を実行することができます。

const promise = new Promise(function(resolve) {
  document.addEventListener("DOMContentLoaded", function() {
    resolve();
  });
});

promise.then(function() {
  // ここに実行したい処理を記述する
  alert("Promiseが完了しました！");
});