HTMLページへのJavascriptコードの組み込み方法

HTMLページにJavaScriptのコードを組み込む方法は複数あります。

  • HTMLファイルの中に直接埋め込む
  • 外部ファイルとしてインポートする

それぞれについて説明し、 さらに外部ファイルとして「非同期」にインポートする方法についても紹介します。

HTMLファイルの中に直接埋め込む

直接JavaScriptのコードを埋め込む場合は、 次のように「script」要素の中にコードを記述します。

<body>

<p>
<label>年齢: <input type="text" id="age"></label>
</p>

<script>
age = document.getElementById("age");
age.value = 30;
</script>

</body>
</html>

外部ファイルとしてインポートする

この方法が一般的に良く使われている方法です。

外部ファイルとしてインポートする場合は、次のように script要素のsrc属性にJavaScriptのファイル名を記述します。

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

以前はtype属性を使って「type="text/javascript"」と記述していましたが、 HTML5では規定値が「text/javascript」なので省略可能です。

上のコードを埋め込む位置はheadタグ内でも良いですし、 bodyタグの閉じタグの前でもOKです。 現在はbodyタグの閉じタグの前に記述する方法が推奨されています。

外部ファイルとして非同期にインポートする

JavaScriptのコードを外部ファイルとしてインポートする場合は、 非同期にインポートすることもできます。 JavaScriptファイルのサイズが大きい場合は、非同期の手法を使うことで ユーザーの体感速度の向上が期待できます。

非同期にインポートする場合、 ファイルを読み込む順序が保証されない方法（async）と、 順序が保証される方法（defer）の2通りあります。

非同期に読み込むが、順序は保証されない（async）

次のコードのように「async」を記述します。

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

「async」を使った場合は読み込む順序は保証されません。 ですから上の例で「sample2.js」が「sample1.js」に依存する場合は 正しく動作しない可能性があります。

JavaScriptファイルに依存関係がある場合は次の「defer」を使ってください。

非同期に読み込み、順序が保証される（defer）

次のコードのように「defer」を記述します。

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

「defer」を使うと記述した順番にJavaScriptファイルを読み込んで実行します。 JavaScriptファイルに依存関係がある場合はこちらの方法を使います。

JavaScript入門