domcontentloadedとは何かを徹底解説：初心者が押さえるべきポイント共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

このページでは domcontentloaded について初心者にも分かりやすく解説します。正確には DOMContentLoaded というイベント名ですが、ウェブ制作の場では domcontentloaded という呼び方を耳にすることがあります。ここではその意味と、いつ発火するのか、そして実際にどう使うのかを、難しくなく理解できるように解説します。

domcontentloadedとは何か

domcontentloaded とはJavaScriptのイベントの一つで、DOM（文書オブジェクトモデル）が構築され、HTMLの要素に自由にアクセスできる状態になったときに発火します。正しくは DOMContentLoaded という名称で、ページの初期化処理を行うタイミングとしてよく使われます。

発火のタイミングと意味

このイベントは、HTML が完全にパースされて DOM が組み上がった直後に発生します。従って外部の画像やスタイルシートの読み込み完了を待つ必要はなく、ページの見た目がすぐに変わる仕組みを作るときに便利です。

読み込みの範囲 は外部リソースを含みません。つまり DOM が使える状態になった瞬間から、初期化の準備ができます。

使い方の基本

基本的な使い方は次のとおりです。 document.addEventListener('DOMContentLoaded', function() { // DOM が使える状態になった後の初期化処理 }); このように書くと、DOM が整った時点で初期化関数が呼び出されます。注意なのは、スクリプトをページの先頭に置く場合や、非同期で読み込む場合、DOMContentLoaded がすでに発火していることがある点です。その場合、イベントリスナーを追加しても呼び出されません。だから次のように状態を確認してから初期化することをおすすめします。

例として、次のようなガイドラインを覚えておくと安心です。 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } これにより DOM がすでに出来上がっている場合でも初期化を確実に実行できます。

DOMContentLoaded と load の違い

ページのイベントには DOMContentLoaded と load の二つがよく混同されます。DOMContentLoaded は DOM が完成した時点で発火しますが、load はすべての外部リソース（画像やスタイルシートなど）が読み込まれた後に発火します。初期化を DOM の準備が整った時点で行いたい場合は DOMContentLoaded を使い、ページの総合的な読み込み完了を待つ場合は load を使います。

よくある誤解と対処法

誤解のひとつに「スクリプトを最後に置けば DOMContentLoaded はすでに発火しているはず」というものがあります。実はそうとは限りません。スクリプトの読み込みタイミングや非同期設定によっては、イベントがまだ発生していない場合もあるため、イベントリスナーを使うのが基本です。

表での比較

イベント	DOMContentLoaded
発火タイミング	DOM がパースされ要素が利用可能になった時
読み込みの範囲	外部リソースは含まれない

まとめ

このガイドで学んだことを実践に活かせば、ウェブページの初期化処理を安定させることができます。DOM が整ったタイミングでの準備を忘れずに、使い方を自分のプロジェクトに合わせて応用していきましょう。

domcontentloadedの同意語

DOMContentLoaded: HTML のパースと DOM の構築が完了した時点で発火するイベント名。スタイルシートや画像の読み込みを待たず、ここからスクリプトを安全に実行できます。
DOMContentLoadedイベント: 1と同義の表現。イベント名そのものを指します。
document ready: jQuery などで使われる表現で、DOM が準備できた状態を意味します。
document-ready: 一部のライブラリで使われる表現。DOM が準備できた状態を指します。
ready: DOM ready の略称。DOM が準備完了したら実行を開始する目安として使われます。
DOM Ready: DOM が準備できた状態を示す英語表現の別表現。
domready: 軽量なライブラリ名や表現として使われることがあり、DOM の準備完了を指します。
DOM準備完了: DOM の準備が完了したことを日本語で表す言い回し。
DOMが利用可能になった瞬間: DOM が利用可能になった瞬間を指す表現。イベントが発火した時点の説明として使われます。
HTMLパース完了: HTML のパースが完了し、DOM ツリーが作成された状態を指す表現。
HTMLパースが完了した時点: 同じ意味の別の言い方。
文書の準備完了: HTML（文書）が準備完了し、スクリプトの実行準備が整った状態を指します。

domcontentloadedの対義語・反対語

loadイベント: すべての外部リソースの読み込みが完了した時点で発火するイベント。DOMContentLoaded が HTML の解析と DOM の構築を完了したタイミングを指すのに対して、load は画像・スタイルシート・スクリプトなどすべてが読み込み終わった状態を指します。
window.onload: ブラウザの window オブジェクトに紐づく load イベント（onload）を指す名称。すべてのリソースの読み込みが完了した時点を示します。
完全読み込み: HTML の解析・DOM の構築に加え、すべての外部リソースが読み込み済みになった状態を表す表現。
ページ完全読み込み: ページ内のすべての資源（画像・フォント・CSS・外部スクリプトなど）が揃い、表示・動作準備が整った状態を指す語。
リソース読み込み完了: すべての外部リソースの読み込みが終わり、リソース面での準備が完了した状態を表す一般的な表現。
load 完了: load イベントが完了したことを示す略式表現。

domcontentloadedの共起語

DOMContentLoaded: HTML文書のDOMが構築され、スクリプトが安全に実行できるタイミングで発生するイベント。
load: すべてのリソース（画像・CSS・iframeなどを含む）の読み込みが完了した時点で発生するイベント。
readyState: documentの読み込み状態を表すプロパティ。'loading'、'interactive'、'complete'の値をとる。
document: 現在表示中のHTML文書を表すオブジェクト。DOM操作の入口。
window: ブラウザのウィンドウを表すグローバルオブジェクト。イベントリスナーを登録する対象としてよく使われる。
addEventListener: イベントを監視・登録するメソッド。DOMContentLoadedを待機して処理を走らせるのに使われる。
defer: 外部スクリプトを遅延実行する属性。DOMの構築後・DOMContentLoadedの前後に実行されるよう設計できる。
async: 外部スクリプトを非同期で読み込み・実行する属性。DOMContentLoadedのタイミングに影響することがある。
script: HTML内でJavaScriptを記述・読み込む要素。実行タイミングがDOMContentLoadedに影響する。
renderBlockingResources: レンダリングを直ちに阻害する資源。CSS・JavaScriptが該当し、DOMContentLoadedのタイミングに影響する。
criticalRenderingPath: 描画を完了させるための最短経路。これを最適化するとDOMの準備完了も早まる。
FirstContentfulPaint: FCP。最初のコンテンツ描画が起きた瞬間を測る指標。
FCP: First Contentful Paintの略。最初の描画のタイミングを示す指標。
LargestContentfulPaint: LCP。ページ上で一番大きい要素が描画される時点を測る指標。
LCP: Largest Contentful Paintの略。主要なコンテンツの描画タイミングを示す指標。
PerformanceNavigationTiming: Navigation Timing APIの実データを提供するインターフェース。ページ読み込みのタイミングを測る。
NavigationTimingAPI: ページのロード時間を計測するAPI群。DOM読み込み・イベント発火のタイミングを取得する。
PerformanceTiming: 旧いPerformance APIのインターフェース。現代ではPerformanceNavigationTimingへ移行している。
PerformanceObserver: パフォーマンス指標のイベントを監視するAPI。DOMContentLoaded周辺のデータ収集にも使われる。
performance: Web Performance APIのグローバルオブジェクト。各種タイミング情報を取得できる。
TTI: Time To Interactiveの略。ページが実際に対話可能になるまでの時間を表す指標。
TimeToInteractive: Time To Interactiveの正式名称。対話可能になる時点を示す指標。
document.readyState: document.readyStateプロパティの値を表す表現。読み込み状態を示す。
jQueryReady: jQueryのreadyイベント。DOMが準備できた時点で実行される処理登録の概念。
interactivity: ページがユーザーと対話できる状態のこと。DOMContentLoaded後の状態を含むことが多い。
DOM: Document Object Model。HTMLの要素を木構造として表現したデータモデル。
HTMLParser: HTML文書を分解してDOMツリーを作る処理・機構。
reflow: レイアウト計算の再実行。DOMの変更後に起きる処理で、性能に影響する。
paint: 画面へ要素を描画する処理。レンダリングの一部。
render: 描画全般を指す言葉。DOM構築後の描画・再描画に関係する。

domcontentloadedの関連用語

DOMContentLoaded: 初期HTML文書が読み込まれ、DOMが構築された時点で発火するイベント。外部画像やスタイルシートの読み込みは待たない点が特徴です。
loadイベント: ページ内のすべてのリソース（画像・スタイルシート・サブフレームなど）の読み込みが完了したときに発火するイベント。DOMContentLoadedより後に発生します。
window.onload: loadイベントと同義。ウィンドウ全体の読み込み完了時に発火します（通常はページの全資源完了を意味します）。
document.readyState: 現在のドキュメントの読み込み状態を表すプロパティ。値は 'loading'、'interactive'、'complete' のいずれかです。
defer属性: 外部スクリプトに使用。HTMLの解析が進む間に読み込まれ、解析完了後に実行されるため、DOM構築をブロックしません（ファイル順を維持します）。
async属性: 外部スクリプトを非同期に読み込み、取得次第すぐに実行します。HTMLのパースをブロックせず、実行順序は保証されません。
ブロッキングスクリプト: HTMLのパースを停止して実行されるスクリプトのこと。レンダリングの遅延要因になりやすいです。
Critical Rendering Path: HTML・CSS・JSの解釈・構築・レンダリングの順序を指す概念。最適化の目的はこの経路を短くすることです。
First Contentful Paint (FCP): ページで初めて文字や大きな要素などのコンテンツが描画されるまでの時間を示す指標。
Largest Contentful Paint (LCP): 画面上で最も大きい要素が描画されるまでの時間を測る指標。視覚的な読み込み体感の目安になります。
Time to Interactive (TTI): ページが実際にユーザーの操作に反応できる状態になるまでの時間を測る指標。
Reflow（リフロー）: DOMの変更によりレイアウト計算が再実行されるプロセス。頻繁に起こるとパフォーマンス低下の原因になります。
Repaint（リペイント）: 要素の外観が変わる際に描画が更新される工程。レイアウト変更がない場合に発生します。
Event loop: JavaScriptの実行はイベントループとタスクキューで管理され、長い処理はUIの応答を遅くします。
addEventListener('DOMContentLoaded', ...): DOMContentLoadedが発火した時に実行したい処理を登録する方法。初心者にも理解しやすいイベントです。
Progressive enhancement: 基礎機能を優先的に提供し、環境に応じて機能を順次強化する設計思想。SEOと安定性にも良い影響があります。
Navigation Timing API: ページのナビゲーションとロードタイミングを計測するためのAPI群。パフォーマンス分析に役立ちます。
Performance Timing / Performance API: ロード時間を測定する各種メトリクスを取得できるAPI。FCPやTTIの分析にも使われます。
PerformanceResourceTiming: 個々のリソース（画像・スクリプト・CSS等）の読み込みタイミングを詳細に測定するAPI。
Core Web Vitals: CLS: Cumulative Layout Shift。ページの視覚的な安定性を示す指標で、急なレイアウト変化を評価します。
Core Web Vitals: FID: First Input Delay。ユーザーの最初の入力に対する反応遅延を測る指標。
Core Web Vitals: LCP: Largest Contentful Paint。視覚的な主要コンテンツの描画までの時間を測る指標。
HTMLパース: HTMLを上から順に読み込み、DOMツリーを構築する過程。DOMContentLoadedはこの解析後に発火します（外部リソースの影響もあります）。