JavaScriptで「DOMの読み込み完了」を待たなくてもいいケースとは？
山崎講師
こんにちは。ゆうせいです。
Webページを作るときに、JavaScriptでよく出てくるコードのひとつに DOMContentLoaded（略して「DOMonload」）があります。これを使うことで、「HTMLの読み込みが終わったらスクリプトを動かす」ことができます。
でも実は、場合によってはこの記述をしなくても大丈夫なんです！
今回は、その「書かなくてよいケース」について、初心者でも理解できるように丁寧に解説していきます。
DOMContentLoadedってなに？
まずは「DOMonload」＝ DOMContentLoaded って何かを簡単に説明します。
DOMとは？
DOM（ドム）とは、Document Object Model の略で、「HTMLをJavaScriptから操作できるようにした構造」のことです。
HTMLは本来ただのテキストですが、ブラウザはそれをツリー構造にして管理します。このツリー構造のことをDOMと呼びます。
例えば以下のHTMLがあったとします：
<body>
<h1>こんにちは</h1>
</body>
これをJavaScriptから操作するためには、DOMが生成されている必要があります。
なぜ DOMContentLoaded が必要？
もし、HTMLがまだ読み込まれていないうちにJavaScriptが実行されてしまうと、次のようなエラーになります：
document.getElementById("myButton").addEventListener("click", function() {
alert("クリックされました！");
});
このコードは、「idが myButton の要素」がまだ読み込まれていない段階で実行されると、エラーになります。
そのため、通常はこう書きます：
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("myButton").addEventListener("click", function() {
alert("クリックされました！");
});
});
書かなくてもいいのはどんなとき？
さて、本題です。「この DOMContentLoaded をわざわざ書かなくてもいいケース」があります！
ケース1：スクリプトをHTMLの最後に書いている
<body>
<button id="myButton">クリック</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("クリックされました！");
});
</script>
</body>
このように、HTMLの一番最後（</body> の直前）に書いていれば、ブラウザはすでにDOMを読み込んだ後なので、DOMContentLoaded を待つ必要がありません。
ポイント：DOMより後にスクリプトが来れば、安全に動く。
ケース2：defer 属性を使っている
HTML内でJavaScriptファイルを読み込むときに、以下のように defer 属性をつけると、DOMの読み込みが終わってから実行されます。
<script src="script.js" defer></script>
この場合も、DOMContentLoaded は不要になります。
ちなみに…
async属性は別物なので注意！asyncを使うと、DOMの読み込みを待たずにスクリプトを実行してしまう可能性があります。
まとめ表
| ケース | DOMContentLoaded は必要？ | 補足 |
|---|---|---|
<head> にスクリプトを書く | 必要 | DOMがまだ生成されていない可能性が高い |
<body> の末尾に書く | 不要 | DOM読み込み後なので安全 |
<script defer> を使う | 不要 | ブラウザがDOM構築後にスクリプトを実行してくれる |
実際にどう使い分ける？
なるべく defer を使おう！
<head> にスクリプトを置きたい場合は、defer を使うのがベストです。
例：
<head>
<script src="main.js" defer></script>
</head>
こうすれば、読み込み順も明確で、パフォーマンスも上がります！
さいごに：これからどう学ぶ？
これからJavaScriptを学んでいく上で、次のことに注目してみてください：
- HTMLとJavaScriptの実行タイミング
deferやasyncの違い- DOMの構造を意識して書く練習
もしReactやVueなどのフレームワークに進むなら、こうしたタイミング管理はさらに重要になります！
質問があればいつでも聞いてくださいね！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
