【JavaScript入門】scriptタグの基本をやさしく解説｜書き方・配置場所・defer/asyncまで完全ガイド

この記事で分かること

scriptタグの基本的な書き方
head と body のどちらに書くべきか
外部ファイル（.js）の読み込み方法
defer / async の違いと使い分け
初心者がつまずきやすいポイント
次に学ぶべきステップ（外部ファイル・DOM・イベント）

JavaScriptをHTMLで使うときは、scriptタグを使って記述します。
scriptタグは、HTML内に直接書く方法と、外部ファイル（.js）を読み込む方法の2種類があります。特に実務では外部ファイル化が基本で、読み込み位置や defer / async の使い分けが重要です。

JavaScriptを学び始めた初心者が最初に触れるのが scriptタグ です。しかし、

どこに書けばいいの？（head？body？）
外部ファイルの読み込みってどうやるの？
defer と async の違いが分からない…

といった疑問が多く、つまずきやすいポイントでもあります。この記事では、初心者でも迷わないように、図解とコード例を使って分かりやすく解説します。

scriptタグの配置場所の図解（headとbodyの違い）

scriptタグの基本的な書き方

JavaScriptをHTMLに組み込む最も基本的な方法は、scriptタグを使うことです。


<script>
  console.log("JavaScriptが実行されました");
</script>

このように、scriptタグの中に直接JavaScriptを書きます。

scriptタグはどこに書くべき？（head と body）

結論：基本は <body> の閉じタグ直前に書くのが最適です。

HTMLの読み込みが終わってから実行されるため表示が速い
DOM構築後に実行されるためエラーが起きにくい
ユーザーが画面を見られる状態が早くなる


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

head に書く場合は defer / async を使う

head に書くと、HTMLの読み込みがブロックされてしまいます。
そのため、head に書く場合は defer または async を使います。


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

defer：HTML解析後に実行（読み込み順が保証される）
async：読み込み完了後すぐ実行（順番保証なし）

初心者は defer を使うのがおすすめ
理由：複数ファイルを読み込んでも順番が崩れないため

外部ファイル（.js）を読み込む方法

実務では、JavaScriptを外部ファイルに分離するのが基本です。


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

外部ファイル化のメリット：

複数ページで同じコードを共有できる
HTMLとスクリプトが分離されて読みやすい
キャッシュが効いてページ表示が高速化

外部ファイルの例


// main.js
console.log("外部ファイルが読み込まれました");

JavaScript外部ファイル読み込みの流れ図

初心者がつまずきやすいポイント

① 相対パスと絶対パスの違い

同じフォルダ → main.js
1つ上の階層 → ../main.js
ルートから指定 → /js/main.js

② head に書いて動かない問題

DOMがまだ読み込まれていないため、要素を操作するコードがエラーになることがあります。

③ async を使って順番が崩れる問題

複数ファイルを読み込む場合、async は順番が保証されないため注意が必要です。

良い例・悪い例で理解する scriptタグ

悪い例（DOMより先に実行されてしまう）


<head>
  <script>
    document.getElementById("btn").addEventListener("click", () => {});
  </script>
</head>

良い例（bodyの最後に書く）


<body>
  <button id="btn">クリック</button>
  <script src="main.js"></script>
</body>

良い例（head に defer を使う）


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

scriptタグに関するよくある質問（FAQ）

Q1. scriptタグはどこに書くのが正解？

A. 基本は bodyの最後。headに書く場合は defer を使う。

Q2. async と defer の違いは？

A. async は読み込み完了後すぐ実行（順番保証なし）。defer はHTML解析後に実行（順番保証あり）。

Q3. 外部ファイルと内部記述はどちらが良い？

A. 実務では外部ファイルが基本。保守性・再利用性・高速化の面で優秀。

Q4. scriptタグは複数書いてもいい？

A. 問題なし。複数書く場合は defer を使うと順番が安定する。

JavaScript 初心者におすすめの学習書籍

JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。

→ いちばんやさしい JavaScript の教本

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。

→ 確かな力が身につくJavaScript「超」入門

scriptタグの次に学ぶべき内容を体系的に学びたい方へ

scriptタグ → 外部ファイル → DOM → イベントの流れをまとめて学べるのが
「超JavaScript 完全ガイド 2026」 です。

→ 超JavaScript 完全ガイド 2026（Udemy）

体系的に学びたい方へ（スクールという選択肢）

JavaScriptを独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には DMM WEBCAMP の学習コースも選択肢のひとつです。

→ DMM WEBCAMP 無料相談はこちら

まとめ

scriptタグはJavaScriptをHTMLで使うための基本
基本は body の最後に書くのが最適
head に書く場合は defer / async を使う
実務では外部ファイル（.js）を読み込むのが基本
初心者は defer を使うと安全

【JavaScript入門】scriptタグの基本とHTMLへの書き方を初心者向けに解説