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

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

この記事は、2026年10月時点のHTML Standard「script要素」とMDN Web Docsの解説に基づいています。対象：HTML Standard（Living Standard）のscript要素。開発者ツールの操作例はデスクトップ版Chromeを対象とし、バージョン固有の違いは扱いません。

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

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

JavaScriptを学ぶ順番もあわせて確認したい方は、全体の学習ガイドをご覧ください。→ JavaScript ロードマップ｜基礎からDOM・イベント・フォーム操作まで体系的に学ぶガイド

scriptタグの基本的な書き方

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

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

この例は、HTML内にid="message"を付けた場所があると、その場所の文章を「JavaScriptが動きました」に変えます。

実行結果：ページにある「message」の場所の文章が、「JavaScriptが動きました」に変わります。ページにその場所がない場合は、文章は変わりません。

ページの部品をJavaScriptから見つけたり変更したりできる仕組みを、DOMといいます。

ページの部品がまだ読み込まれていないタイミングで処理すると、対象が見つからずエラーになることがあります。

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なら、ひとつ上の場所にあるファイルを指定します。

実行結果：ブラウザは、指定した場所からmain.jsを読み込みます。このscriptタグだけでは、ページ上の表示は変わりません。画面に変化が出るかどうかは、読み込むJavaScriptの内容によります。

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

HTMLとJavaScriptを一緒に動かす

例を試すには、HTMLファイルを作成して保存できるテキストエディターと、HTMLを開けるデスクトップ版ブラウザが必要です。ここではChromeでの確認を例にします。特定のOSやChromeの番号に依存する書き方ではなく、HTML Standardのscript要素の動きを扱います。

次の例では、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>

実行結果：この段階ではJavaScriptのファイルをまだ作っていないため、ページを開くと「ボタンを押してください。」という文章と「文章を変える」ボタンが表示されます。ボタンを押しても、JavaScriptファイルを用意するまでは文章は変わりません。

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は、ボタンが押されたときに行う処理を登録する書き方です。ここでは、ボタンが押されたら案内文を書き換えます。

実行結果：ページを開いた直後は表示が変わりません。ボタンを押すと、案内文が「JavaScriptが動きました。」に変わります。

3. ブラウザで確認する

1. index.htmlとmain.jsを同じフォルダーに保存します。
2. index.htmlをChromeで開きます。
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>

実行結果：deferを付けると、HTMLを読み終えた後に外部ファイルのJavaScriptが実行されます。ページ内の部品を使う処理は、部品が読み込まれてから動きます。

エラーが出た場合は、Chromeの開発者ツールを開き、エラー一覧で内容とファイル名を確認します。ChromeではWindows・Linuxの場合はCtrl+Shift+J、Macの場合はCommand+Option+Jでエラー一覧を開けます。ショートカットが使えない場合は、Chromeのメニューから「その他のツール」→「デベロッパーツール」を選び、「Console」タブを開きます。

エラーの行にファイル名や行番号が表示されていたら、そのファイルを開いて該当する場所を確認します。表示内容はブラウザによって異なるため、エラー文だけでなく、示されたファイルや行も見てください。Chromeのショートカットは、公式のChrome DevToolsのキーボードショートカットでも確認できます。

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

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

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

実行結果：この通常のscriptタグでは、HTMLを読み終えた後にfirst.js、second.jsの順で実行されます。どちらかのファイルが見つからない場合や、ファイル内で使う名前が正しくない場合は、期待した処理にならないことがあります。

各ファイルが存在することと、ファイル内で使う名前が正しく設定されていることも確認してください。

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

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

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

この記事のJavaScript仕様の説明に関連する書籍では、対象としている標準の版が示されている場合があります。紹介している書籍はECMAScript 2023までを対象としています。

記事内の例は、HTML Standardのscript要素の基本的な動きを示しています。ブラウザの操作画面や表示内容は、ブラウザやその版によって異なる場合があります。

JavaScriptを順番に学ぶ

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

• 基礎の学習順を確認する：JavaScript 基礎ロードマップ｜初心者が最短で学ぶためのガイド