こんにちは！フロントエンドの現場で日々ブラウザと格闘しているエンジニアです。
Webサイトを作っていて、「あれ、JavaScriptが動かない！」「画面が真っ白な時間が長いな…」なんて悩んだことはありませんか？実はその原因の多くは、ブラウザが裏側でどうやってページを組み立てているか、その「順番」を知ることでスッキリ解決できるんです。
今日は、初心者の方が一番最初につまずきやすい「DOMContentLoaded」と「load」という2つのイベントの正体を、お買い物の流れに例えて紐解いていきましょう。
—
ブラウザは「凄腕の料理人」だと思えばいい
ブラウザがWebページを表示する作業は、レストランの厨房に似ています。
1. HTMLという「注文伝票」が届く。
2. 上から順番に読み込み、「DOMツリー」という食材の準備（解析）を始める。
3. CSS（装飾）が来たら、「お皿の盛り付け方」を確認して「CSSOM」を作る。
4. 全部揃ったら、ようやく「レンダリング（お皿への盛り付け）」をしてお客様に提供する。
このプロセスの中で、「いつ動くか」を教えてくれるのが、今回の主役たちです。
—
1. DOMContentLoaded： 「下準備が終わった！」の合図
`DOMContentLoaded` は、「HTMLの解析が終わって、DOM（HTMLの構造）ができあがった瞬間」に発火します。
これは、例えるなら「食材の買い出しと下ごしらえが完了したタイミング」です。まだ画像や広告などの重たいデータは届いていないかもしれませんが、「とりあえずメニュー（構造）は完成したから、料理（JS）を始められるぞ！」という状態ですね。
- なぜ重要か？：ボタンをクリックしたり、文字を書き換えたりするJavaScriptの準備は、このタイミングで十分だからです。ユーザーを待たせずに素早く操作を可能にするために、多くのJSはこのタイミングで動かすのが鉄則です。
2. load： 「全部揃った！」の合図
一方で `load` イベントは、「画像や外部スクリプト、スタイルシートなど、すべてのリソースが完全に読み込まれた瞬間」に発火します。
これは「全てのお客様の料理がテーブルに並び、お店の準備が100%完璧になった状態」です。
- 注意点：画像が巨大だと、その分だけ `load` が発生するのは遅くなります。もし「画像が読み込まれるまでボタンを押させない」といった意地悪な設計をすると、ユーザーは「このサイト重いな…」と離脱してしまいます。基本的には `DOMContentLoaded` で済むならそちらを使うのが、Web開発の優しさというものです。
—
実践コード：ブラウザの心の声を聞いてみよう
以下のコードをHTMLの`
`の中に置いて、ブラウザのコンソールを開いてみてください。実際に動かしてみると、`DOMContentLoaded` が先に走り、その後で `load` が来ることがわかりますね。この「順番」の感覚を掴むだけで、デバッグのスピードが劇的に変わります。
—
「レンダリングブロック」という壁
最後に少しだけ、「なぜ画面が真っ白になるのか」の理由を話します。
ブラウザがHTMLを上から読んでいる途中に、「おっと、CSS（スタイル）がまだ足りないぞ！」とか「JavaScriptがあるから、先に実行しないと構造が変わるかもしれない！」とブラウザが判断すると、パース（解析）を一旦止めてしまいます。
これを「レンダリングブロック」と呼びます。
- CSSはブロックする：デザインが崩れた状態で表示したくないので、CSSが読み込まれるまでレンダリングを待ちます。
- JSもブロックする：`` と書くだけで、「HTMLの解析を邪魔せず、準備ができたら実行するよ」とブラウザに指示できます。これが現在のWeb開発の標準的な優しさです。
2. CSSはなるべく軽く：
お皿の盛り付け方を書いた紙が分厚すぎると、料理が出てくるのが遅れます。CSSは最適化して、スリムに保ちましょう。---
最後に：完璧を目指しすぎないこと
最初は「DOM？CSSOM？なにそれ？」と混乱するのは当然です。でも、Webサイトは「完璧な設計図」よりも「ユーザーを待たせない体験」が何よりも大切です。
`DOMContentLoaded` と `load` の違いを意識し始めたあなたは、もう立派なフロントエンドの入り口に立っています。焦らず、少しずつブラウザという「凄腕の料理人」と仲良くなっていってくださいね。
もし分からないことがあれば、またいつでも聞いてください。一緒に解決していきましょう！
コメント