async/awaitでスマートに記述！JavaScriptでページ読み込み時に関数を確実に実行する方法

2024-05-21

JavaScript でページ読み込み時に関数を実行する方法

JavaScript で onload イベントまたは DOMContentLoaded イベントを使用して、ページ読み込み時に関数を実行できます。

onload イベント

ページ全体の読み込みが完了したときに実行されます。
画像などのリソース読み込みも含みます。
昔からよく使われてきた方法です。

DOMContentLoaded イベント

onload イベントよりも早く実行されます。
比較的新しい方法です。

具体的な記述方法

<script>
  window.onload = function() {
    // 実行したい処理
  };
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // 実行したい処理
  });
</script>

画像などのリソース読み込みが完了後に処理を実行する必要がある場合は onload イベント を使用します。

補足

上記の例では、無名関数を使用しています。
関数名を使用したい場合は、以下のように記述できます。

<script>
  function pageLoaded() {
    // 実行したい処理
  }

  window.onload = pageLoaded;
</script>

<script>
  function function1() {
    // 実行したい処理
  }

  function function2() {
    // 実行したい処理
  }

  window.onload = function() {
    function1();
    function2();
  };
</script>

上記以外にも、JavaScript フレームワーク (jQuery など) を使用してページ読み込み時に関数を実行する方法があります。

<!DOCTYPE html>
<html>
<head>
  <title>onload イベント</title>
</head>
<body>
  <p>ページ読み込み中...</p>

  <script>
    window.onload = function() {
      document.getElementById("message").innerHTML = "ページ読み込み完了しました！";
    };
  </script>

  <p id="message"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>DOMContentLoaded イベント</title>
</head>
<body>
  <p>ページ読み込み中...</p>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("message").innerHTML = "ページ読み込み完了しました！";
    });
  </script>

  <p id="message"></p>
</body>
</html>

説明

上記コードは、以下の動作をします。

ページ読み込み時に、"ページ読み込み中..." というメッセージが表示されます。
onload イベント または DOMContentLoaded イベント が発生すると、"ページ読み込み完了しました！" というメッセージに置き換えられます。

動作確認

上記コードを保存して HTML ファイルとして開き、ブラウザで開くと、動作を確認できます。

実際に使用する場合は、必要に応じてコードを変更してください。

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

jQuery は、JavaScript の人気ライブラリであり、ページ読み込み時に関数を実行するための便利なメソッドを提供しています。

<script src="https://releases.jquery.com/"></script>
<script>
  $(document).ready(function() {
    // 実行したい処理
  });
</script>

MutationObserver は、DOM の変更を監視する API です。DOMContentLoaded イベントよりも柔軟な制御が可能です。

<script>
  const observer = new MutationObserver(function(mutations) {
    // 実行したい処理
  });

  observer.observe(document.documentElement, {
    childList: true
  });
</script>

Promise は、非同期処理を扱うための JavaScript の API です。

<script>
  const promise = new Promise(function(resolve, reject) {
    window.onload = resolve;
  });

  promise.then(function() {
    // 実行したい処理
  });
</script>

async/await は、Promise をより簡単に扱うための JavaScript の新機能です。

<script>
  (async function() {
    await new Promise(function(resolve, reject) {
      window.onload = resolve;
    });

    // 実行したい処理
  })();
</script>

それぞれの方法の比較

方法	利点	欠点
onload イベント	シンプルでわかりやすい	画像などのリソース読み込み完了まで待たなければならない
DOMContentLoaded イベント	onload イベントよりも早く実行できる	画像などのリソース読み込み完了まで待たなければならない
jQuery	記述が簡潔で使いやすい	ライブラリの読み込みが必要
MutationObserver	柔軟な制御が可能	やや複雑
Promise	非同期処理を扱いやすい	コードが冗長になる
async/await	Promise よりも簡潔に記述できる	比較的新しい機能