【JavaScript】画面ロード時に走るイベントの記述方法をわかりやすく解説！

スポンサーリンク

Webページを開いたときに、特定の処理を自動で実行したい場面は多くあるかと思います。例えば、ページの初期設定をしたり、外部データを取得して画面に表示したりするケースなどがあります。

JavaScriptでは、画面が起動（読み込み）されたタイミングでイベントを実行する方法がいくつかあります。本記事では、window.onload や DOMContentLoaded などの基本的な方法を解説し、それぞれの違いや適切な使い分けについても紹介します。

初心者の方でもわかりやすいように、具体的なコード例とともに説明していくので、ぜひ最後まで読んでみてください！

画面起動時のイベントの基本

JavaScriptでは、Webページの読み込みが完了したタイミングで処理を実行するためのイベントがいくつか用意されています。主に以下の2つがよく使われます。

window.onload

window.onload は、ページ内のすべてのリソース（HTML・CSS・画像・スクリプトなど）が完全に読み込まれた後に実行されるイベントです。

window.onload = function() {
    console.log("ページの読み込みが完了しました！");
};

この方法は、画像や外部リソースの読み込みを待ってから処理を実行したい場合に適しています。

DOMContentLoaded

DOMContentLoaded は、HTMLの解析が完了し、DOMツリーが構築されたタイミングで発火するイベントです。画像やCSSの読み込みを待たずに実行されるため、window.onload よりも早く処理を開始できます。

document.addEventListener("DOMContentLoaded", function() {
    console.log("DOMの構築が完了しました！");
});

この方法は、JavaScriptでDOM要素を操作する場合に適しており、window.onload よりも素早く処理を開始できるメリットがあります。

どちらを使うべきか？

  • 画像やスタイルの適用を待ちたい場合 → window.onload
  • HTMLの解析が終わったらすぐに処理を実行したい場合 → DOMContentLoaded

実装方法

ここでは、実際に window.onload や DOMContentLoaded を使って、画面起動時にイベントを実行する方法を詳しく解説します。

window.onloadを使う方法

window.onload は、ページ内のすべてのリソース（HTML・CSS・画像・スクリプトなど）が完全に読み込まれた後に実行されます。

window.onload = function() {
    console.log("ページの読み込みが完了しました！");
    document.body.style.backgroundColor = "#f0f8ff"; // 背景色を変更
};

ポイント

  • 画像やスタイルシートの読み込みが完了するまで待機するため、確実にページが表示された状態で処理を実行できる。
  • ただし、すべてのリソースを待つため、ページが重い場合は処理開始が遅れることがある。

DOMContentLoadedを使う方法

DOMContentLoaded は、HTMLの解析が完了し、DOMツリーが構築された時点で実行されます。画像や外部リソースの読み込みを待たずに発火するため、ページの表示が速くなります。

document.addEventListener("DOMContentLoaded", function() {
    console.log("DOMの構築が完了しました！");
    document.getElementById("message").textContent = "ページの準備ができました！";
});

ポイント

  • DOM要素の取得や変更が確実にできる。
  • 画像やCSSの読み込みを待たないため、ページがスムーズに動作する。
  • window.onload よりも早く処理を実行できる。

async/await を組み合わせる

非同期処理を行う場合は、async/await を使うことで、API通信などを画面起動時に適切なタイミングで実行できます。

document.addEventListener("DOMContentLoaded", async function() {
    console.log("DOMの構築が完了しました！");
    
    const data = await fetchData();
    console.log("データを取得:", data);
});

async function fetchData() {
    // ダミーのAPIリクエスト
    return new Promise(resolve => setTimeout(() => resolve("APIデータ"), 2000));
}

ポイント

  • async/await を使うことで、非同期処理がシンプルに書ける。
  • APIデータの取得が完了してから処理を続行できる。

まとめ

本記事では、JavaScriptで画面起動時にイベントを実行する方法について解説しました。

主なポイント:

  • window.onload は すべてのリソースが読み込まれてから 実行されるため、画像やCSSの適用を待ちたい場合に適している。
  • DOMContentLoaded は HTMLの解析完了後にすぐ実行 されるため、ページの初期化処理にはこちらが最適。
  • async/await を組み合わせることで、APIデータの取得などの 非同期処理 をスムーズに実行できる。

画面の起動時に実行したい処理の内容によって、適切な方法を選択しましょう。特に、 より早く処理を実行したい場合は DOMContentLoaded を優先的に使うのがオススメ です。

ぜひ、実際の開発に活かしてみてください！

スポンサーリンク

コメント