scriptタグの使い方｜配置・読み込み・実行順【JavaScript入門】

本記事にはプロモーション（アフィリエイト広告）を含みます。

JavaScriptをHTMLに組み込むには、scriptタグを使います。どこに置くか、deferやasyncを付けるかによって、読み込みや実行のタイミングが変わります。

この記事では、通常のscriptタグと、別ファイルに書いたJavaScriptを読み込む場合を中心に説明します。まず配置場所と実行順を整理し、その後、手元で動かせる例を紹介します。

scriptタグの基本的な書き方

JavaScriptをHTMLの中に直接書く場合は、開始タグと終了タグの間に記述します。

<script>
  document.getElementById("message").textContent = "JavaScriptが動きました";
</script>

この例では、ページにある「message」という名前の場所に文字を入れます。ページの部品がまだ読み込まれていないタイミングでこの処理を実行すると、対象が見つからずエラーになることがあります。

headとbodyのどちらに置くか

headに置いた通常のscriptタグは、読み込み中にその場所へ来ると、JavaScriptの読み込みと実行が終わるまでHTMLの読み取りを一時停止します。ページ内の部品を使う処理は、部品が読み込まれる前に動くと対象を見つけられません。

この説明は、async・deferを付けていない通常のscriptタグについてです。外部ファイルを読み込むscriptタグにこれらの属性を付けた場合や、module形式では、動作が異なります。

配置方法は、次のように選べます。

• ページの部品を使わない短い処理なら、置き場所に応じた実行タイミングを確認して使います。
• ページの部品を使う処理なら、body内の対象部品より後に置く方法があります。
• 外部ファイルをheadから読み込むなら、通常のscriptではdeferを使う方法があります。

defer・async・moduleの違い

deferとasyncは、外部ファイルを読み込む通常のscriptタグで使う属性です。読み込み中もHTMLの読み取りを続け、JavaScriptを実行するタイミングを変えます。

どちらも外部ファイルを読み込む場合の指定です。HTML内に直接書いた通常のscriptタグでは、deferやasyncを付けても同じ動作にはなりません。

module形式では、外部ファイルは基本的にHTMLの読み取り後に実行されます。asyncを付けた場合は、読み込みが終わった時点で実行されることがあります。module形式のscriptタグにdeferを付けても、deferによる追加の動作はありません。

ほかのJavaScriptファイルの処理が終わってから動かす必要がある場合は、asyncではなくdeferを検討します。読み込み順に関係しない独立した処理なら、asyncが使える場合があります。

外部ファイルを読み込む方法

JavaScriptを別のファイルに保存し、scriptタグのsrcにその場所を書けば読み込めます。HTMLとJavaScriptを分けると、どこに何を書くか整理しやすくなります。一方、ファイルを増やすため、保存場所や指定する場所の確認が必要です。

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

./main.jsは、HTMLファイルと同じ場所にあるmain.jsを指定しています。../main.jsなら、ひとつ上の場所にあるファイルを指定します。

同じHTMLを別の場所へ移すと、相対パスではJavaScriptファイルを見つけられなくなることがあります。HTMLとJavaScriptファイルの位置関係を確認してください。

HTMLとJavaScriptを一緒に動かす

次の例では、HTMLとJavaScriptを同じフォルダーに保存します。ページを開くと案内文が表示され、ボタンを押すと文章が変わります。

1. HTMLファイルを作る

次の内容をindex.htmlという名前で保存します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>scriptタグの練習</title>
  <script src="./main.js" defer></script>
</head>
<body>
  <p id="message">ボタンを押してください。</p>
  <button id="change-button">文章を変える</button>
</body>
</html>

2. JavaScriptファイルを作る

同じフォルダーにmain.jsを作り、次の内容を保存します。

const button = document.getElementById("change-button");
const message = document.getElementById("message");

button.addEventListener("click", function () {
  message.textContent = "JavaScriptが動きました。";
});

HTMLを読み終えた後にJavaScriptが動くよう、scriptタグにdeferを付けています。そのため、JavaScriptがボタンや文章を探すときには、HTML内の部品が読み込まれています。

addEventListenerは、ボタンが押されたときに行う処理を登録する書き方です。ここでは、ボタンが押されたら案内文を書き換えます。

3. ブラウザで確認する

1. index.htmlとmain.jsを同じフォルダーに保存します。
2. index.htmlをブラウザで開きます。
3. 最初に「ボタンを押してください。」と表示されることを確認します。
4. 「文章を変える」ボタンを押し、「JavaScriptが動きました。」に変わることを確認します。

期待される結果：ページを開いた直後は「ボタンを押してください。」、ボタンを押した後は「JavaScriptが動きました。」と表示されます。

動かないときに確認すること

ボタンを押しても文章が変わらない

まず、HTMLとJavaScriptのファイル名、保存場所、scriptタグのsrcの指定を確認します。例では、両方のファイルが同じフォルダーにあり、指定が./main.jsになっている必要があります。

次に、HTML内のidとJavaScript内の文字が一致しているか確認します。たとえば、HTMLがid="change-button"なら、JavaScriptも"change-button"を探す必要があります。

headに置いたコードで対象が見つからない

通常のscriptタグをheadに置き、deferを付けずにページ内の部品を探すと、その部品がまだ読み込まれていないことがあります。scriptタグにdeferを付けるか、対象となる部品の後にscriptタグを移動します。

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

エラーが出た場合は、ブラウザの開発者向け画面で、エラーの内容とファイル名を確認します。表示内容はブラウザによって異なることがあるため、文面だけでなく、示されたファイルや行も見てください。

複数のファイルの順番が崩れる

asyncを付けた外部ファイルは、読み込みが終わったものから実行されます。先に書いたファイルが先に実行されるとは限りません。前のファイルの処理を使う必要があるときは、deferを使う方法を検討してください。

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

この通常のscriptタグでは、HTMLを読み終えた後に、first.js、second.jsの順で実行されます。各ファイルが存在することと、ファイル内で使う名前が正しく設定されていることも確認してください。

公式資料で仕様を確認する

属性の適用条件や実行タイミングを詳しく確認したい場合は、仕様の説明も参照してください。

• WHATWG HTML Standard：script要素（HTMLのscriptタグに関する仕様）
• MDN：script要素（属性や使用例の説明）

この記事案に対して、特定のブラウザ・バージョンを使った動作確認は行われていません。公開前に、掲載したコードを実行し、確認したブラウザ名・バージョンと確認日を記録してください。

JavaScriptを順番に学ぶ

scriptタグの基本を確認したら、外部ファイルの読み込み方や、ページの部品を操作する方法へ進むと理解を深められます。JavaScript基礎ロードマップでは、学ぶ順番に沿って記事を確認できます。

• JavaScript 基礎ロードマップ｜初心者が最短で学ぶためのガイド
• JavaScript ロードマップ｜基礎からDOM・イベント・フォーム操作まで体系的に学ぶガイド