HTMLのscriptタグとは？src・defer・asyncの使い方を解説

💡 この記事でわかること

scriptタグとは、
👉 HTMLのページにJavaScriptのコードを埋め込むためのタグです。

ボタンをクリックしたときの処理や、フォームの入力チェックなど、ページに動きや振る舞いを持たせたいときは、このscriptタグを使ってJavaScriptを読み込みます。

💡 scriptタグにはコードを直接書き込む方法と、別ファイルとして用意したJavaScriptファイルを読み込む方法の2通りがあります。

開始タグと終了タグの間に、そのままJavaScriptのコードを書きます。

<script>
  console.log("こんにちは");
</script>

JavaScriptのコードを別ファイル(例: script.js)として用意し、src属性でそのファイルを指定して読み込みます。

<script src="script.js"></script>

👉 コードが少し長くなってきたら、HTMLファイルに直接書くのではなく外部ファイルに分けるのが基本です。再利用しやすくなり、HTMLとJavaScriptを別々に管理できて見通しもよくなります。src属性を指定したscriptタグは、開始タグと終了タグの間には何も書きません。

外部ファイルを読み込むscriptタグには、HTMLの解析(パース)とJavaScriptの読み込み・実行のタイミングを調整するための属性が用意されています。

属性を何も付けない場合、ブラウザはscriptタグに出会った時点でHTMLの解析を一時停止し、JavaScriptファイルのダウンロードと実行を終えてから解析を再開します。ファイルが大きいと、その分ページの表示が遅くなる原因になります。

defer属性を付けると、HTMLの解析を止めずにJavaScriptファイルをバックグラウンドでダウンロードし、実行はHTMLの解析が終わったあとに(かつ、複数のdeferがあれば書かれた順番どおりに)行われます。

<script src="script.js" defer></script>

async属性を付けると、HTMLの解析を止めずにダウンロードは行いますが、ダウンロードが完了した時点ですぐに(HTMLの解析を中断してでも)実行されます。複数のscriptにasyncを付けても、実行順はダウンロードが完了した順になり、書いた順とは限りません。

<script src="script.js" async></script>

💡 他のコードと実行順が関係するJavaScript(DOM操作など)はdefer、単独で動けば十分な広告タグや計測タグはasync、というのが基本的な使い分けの目安です。

defer・async属性が登場する前は、head要素内にscriptタグを置くとページ表示が遅れやすいという理由から、body要素の閉じタグ直前にscriptタグを置くのが定番の書き方でした。

defer属性を使えばhead要素内に書いてもHTMLの解析をブロックしないため、現在はhead要素内にdefer付きで書く方法もよく使われます。どちらの書き方でも動作しますが、defer属性を使う場合はhead要素内、使わない場合はbody要素の末尾、と覚えておくと迷いにくいです。

scriptタグをhead要素内に何も属性を付けずに置いた場合、まだ読み込まれていないbody要素内の要素をJavaScriptから取得しようとしてエラーになることがあります。defer属性を使うか、scriptタグをbody要素の末尾に置くことで避けられます。

src属性で外部ファイルを指定した場合、開始タグと終了タグの間に書いたコードは無視されます。外部ファイルを読み込みつつ別のコードも動かしたい場合は、scriptタグ自体を分けて2つ書く必要があります。

⚠️ type属性で"module"を指定するとJavaScriptのモジュール機能(import・export)が使えるようになりますが、動作の細かい違い(自動でdefer相当の挙動になる等)があるため、使う際は仕様を確認しながら試すと安心です。

scriptタグは、HTMLにJavaScriptを埋め込むための基本のタグです。

まずは小さなJavaScriptファイルを1つ用意して、defer属性を付けたscriptタグから読み込んでみましょう。