script要素の使い方

HTMLの<script>要素は、JavaScriptなどのスクリプトを文書に組み込むための要素です。読み込み方を選ぶと、ページの表示とスクリプトの実行順を調整できます。

先に結論

最小の例

外部ファイルを読み込む場合はsrcを指定します。srcを指定した同じ要素の中に、実行したいコードも同時に書くことはできません。

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

短い処理をHTMLの中に直接書くこともできます。

<script>
  console.log('ページの準備を始めます');
</script>

defer・async・moduleの違い

書き方	実行の特徴	向いている場面
defer	HTMLの解析が終わってから、文書内の順番で実行	DOMを使う通常の外部スクリプト
async	ダウンロードが終わったスクリプトから実行。順番は保証されない	他の処理に依存しない計測など
type="module"	モジュールとして読み込み、既定ではHTML解析後に実行	import・exportを使う構成

deferとasyncは、両方を付ければよいというものではありません。実行順が必要か、独立しているかを先に決めます。

moduleを使う例

モジュールはファイルごとのスコープを持ち、別ファイルの機能を明示的に読み込めます。

<script type="module" src="./main.js"></script>

// main.js
import { add } from './math.js';

console.log(add(2, 3));

よくある間違い

• 順番が必要なスクリプトにasyncを付ける
• DOMを使うスクリプトを、HTML要素の解析前に同期実行する
• type="text/javascript"を必須だと思う。通常のJavaScriptならtypeは省略できます
• ページ移動や表示だけの処理を、HTMLではなくすべてJavaScriptで行う

安全に使うために

外部スクリプトは、信頼できる提供元からHTTPSで読み込みます。ユーザー入力をそのままスクリプトとしてHTMLへ差し込まず、必要に応じてContent Security Policy（CSP）も検討します。

Atlasで確認する

script要素のVariant、処理順序、Fetch・CSPとの関係、仕様上の未完了範囲まで確認したい場合は、Yugien Atlasのscript要素を参照してください。