[html+js]jsは<head>内にのみ書き込みたい人へ

WEB

2026.04.27

できるよ。

どういうことか
<head>内でやっていく方法

どういうことか

一般的に、jsは</body>直前に書くことを求められる。

というのは、発火させたい対象より先にjsを書くと、発火対象が読まれる前にjsが先に処理されちゃうから。

作法として何も不思議のない現象なので攻めるべきところはないのだけどね。

だから、設定周りは<head>に集中してるのに一部は<body>内に書かなきゃいけないということが起こる。

気持ち悪い。

見返したときに気が付かなかったり、掘りに行くのがめんどくさかったりする。

どうにかしたい。

できる。

<head>内でやっていく方法

こうする。

<html>
<head>
    ⋮
    <script src="hogehoge.js" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            ⋮
        });
    </script>
</head>
<body>

</body>
</html>

jsファイルを読み込む場合は「defer」を追加する
jsを直接書き込む場合は「DOMContentLoaded」で囲う

これでjsの発火タイミングをずらすことができる。

よかったですね。