JavaScriptの DOMContentLoaded と window.onload を簡単に理解しよう！

Webページを開くとき、どのタイミングでJavaScriptを実行するかはとても重要です。特に「ページのどの部分が読み込まれたらスクリプトを動かすのか」を理解することで、サイトの表示速度や動作の安定性が変わってきます。

この記事では、JavaScriptの DOMContentLoaded と window.onload の違いを、初心者の方や子供でもわかりやすいように解説します。

1 ページが読み込まれる流れを知ろう
2 DOMContentLoadedとは？
3 window.onloadとは？
4 DOMContentLoaded と window.onload の違いを比較
5 どちらを使うべき？
- 5.1 DOMContentLoaded を使うべきケース
- 5.2 window.onload を使うべきケース
6 実際に試してみよう！
7 まとめ

ページが読み込まれる流れを知ろう

まず、Webページはどのように読み込まれるのかを簡単に説明します。

HTMLの解析開始 → ブラウザはHTMLのコードを上から順番に読み取ります。
DOMの構築 → HTMLの内容が整理され、JavaScriptから操作できる「DOMツリー」が作られます。
CSS・画像・スクリプトの読み込み → CSSや画像、動画、外部のJavaScriptファイルが読み込まれます。
ページの完全な読み込み完了 → すべてのリソースが表示できる状態になります。

この流れのどこでJavaScriptを実行するかが、DOMContentLoaded と window.onload の違いにつながります。

DOMContentLoadedとは？

Webページが読み込まれるとき、JavaScriptを実行するタイミングを適切に選ぶことが重要です。DOMContentLoaded は、HTMLの解析が完了し、ページのDOMツリーが構築された時点で発火するイベントです。これにより、画像やCSSの読み込みを待たずにスクリプトを実行することができます。

DOMが構築されたら発火するイベント

DOMContentLoaded は、HTMLの解析が完了し、DOM（Document Object Model）が構築された瞬間に実行されるイベントです。

つまり、画像やCSSなどが読み込まれていなくても、HTMLの内容が完成した時点でJavaScriptを実行できます。

使い方

以下のコードを実行すると、HTMLの読み込みが終わった瞬間に「DOMが読み込まれました！」というメッセージが表示されます。

// HTMLの読み込みが完了したら実行
document.addEventListener("DOMContentLoaded", function() {
    console.log("DOMが読み込まれました！");
});

ポイント

画像やCSSが読み込まれる前でも実行される。
DOMの操作をしたい場合に最適。
ページの表示を速くしたいときに便利。

window.onloadとは？

Webページのすべてのリソースが読み込まれた後に実行されるイベントが window.onload です。画像やCSS、外部スクリプトの読み込みを待ちたい場合に適しており、ページ全体の準備が整ってからスクリプトを実行する際に使われます。

ページのすべてのリソースが読み込まれたら発火するイベント

window.onload は HTMLの解析が完了し、さらに画像やCSS、外部スクリプトなど、すべてのリソースが完全に読み込まれた後に実行されるイベント です。

使い方

以下のコードは、ページのすべてのリソースが読み込まれてから「ページのすべてのリソースが読み込まれました！」と表示されます。

// ページのすべてのリソースが読み込まれた後に実行
window.onload = function() {
    console.log("ページのすべてのリソースが読み込まれました！");
};

ポイント

画像やCSSがすべて読み込まれた後に実行。
画像のサイズを取得したい場合に適している。
遅延が発生することがあるので注意。

DOMContentLoaded と window.onload の違いを比較

DOMContentLoaded と window.onload の主な違いを、表にまとめて比較してみましょう。どのタイミングでイベントが発火するかを理解することで、適切に使い分けることができます。

比較項目	DOMContentLoaded	window.onload
発火タイミング	DOMツリーが構築された直後	すべてのリソースが読み込まれた後
画像・CSSの読み込み	まだ完了していない可能性あり	完全に完了
実行速度	速い	遅い（画像の読み込みを待つため）
使いどころ	DOM操作、スクリプトの実行	画像サイズの取得やページ全体の処理

どちらを使うべき？

DOMContentLoaded と window.onload はそれぞれ適した用途があります。どちらを選ぶべきか、シチュエーションに応じて適切な方法を選択しましょう。

`DOMContentLoaded` を使うべきケース

HTMLが読み込まれたらすぐにJavaScriptを実行したい。
画像やCSSの読み込みを待つ必要がない。
ページの表示速度をできるだけ早くしたい。

`window.onload` を使うべきケース

画像のサイズや位置を計算する必要がある。
外部スクリプトやスタイルの適用を確実に待ちたい。
ページの完全なロード後に処理を実行したい。

実際に試してみよう！

ここでは、DOMContentLoaded と window.onload の違いを実際に試せるコードを紹介します。このコードをブラウザで開くと、どのタイミングでイベントが発火するのかを確認できます。

以下のコードをHTMLに貼り付けて実行すると、DOMContentLoaded と window.onload の違いを実感できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DOMContentLoaded vs window.onload</title>
</head>
<body>
    <h1>イベントの発火タイミングを確認</h1>
    <img src="https://via.placeholder.com/500" alt="サンプル画像">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("DOMContentLoaded: DOMが構築されました！");
        });

        window.onload = function() {
            console.log("window.onload: ページのすべてのリソースが読み込まれました！");
        };
    </script>
</body>
</html>

このコードを実行すると、コンソールに DOMContentLoaded のメッセージが window.onload よりも先に表示されることがわかります。