【JavaScript入門】scriptタグの基本とHTMLへの書き方をやさしく解説｜配置場所・外部ファイル・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タグの基本的な書き方
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：読み込み完了後すぐ実行（順番保証なし）
理由：複数ファイルを読み込んでも順番が崩れないため
外部ファイル（.js）を読み込む方法
実務では、JavaScriptを外部ファイルに分離するのが基本です。
<script src="main.js"></script>
外部ファイル化のメリット：
- 複数ページで同じコードを共有できる
- HTMLとスクリプトが分離されて読みやすい
- キャッシュが効いてページ表示が高速化
外部ファイルの例
// main.js
console.log("外部ファイルが読み込まれました");
初心者がつまずきやすいポイント
① 相対パスと絶対パスの違い
- 同じフォルダ →
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>
JavaScript 初心者におすすめの学習書籍
scriptタグの基本が分かったら、次は文法・DOM・イベントを体系的に学ぶ段階に進むと理解が一気に深まります。
いちばんやさしい JavaScript の教本
手を動かしながら JavaScript を学びたい方に向いている入門書です。
scriptタグ・DOM操作・イベント処理など、この記事の次のステップに直結する内容が豊富で、
「まずは動くものを作ってみたい」という方にぴったりです。
この本で解決できること：
- JavaScriptの基本文法をやさしく理解できる
- ブラウザで動かしながら学べるため、挫折しにくい
- scriptタグを使った簡単な動きから始められる
確かな力が身につくJavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
文法 → DOM → イベント → 非同期処理と段階的に学べるため、
scriptタグで読み込んだコードをどのように活用していくかがイメージしやすくなります。
この本で解決できること：
- JavaScriptの基礎を体系的に学び直せる
- 初心者がつまずきやすい部分を重点的に理解できる
- 実務で使えるレベルの基礎力を身につけられる
JavaScriptを動画で学びたい方へ（scriptタグの次のステップに最適）
scriptタグの書き方や配置場所は、実際の画面の動きを見ながら学ぶと理解しやすくなります。
動画講座なら、HTMLとJavaScriptの連携や、defer / async の挙動も、
実際のブラウザ画面を見ながら確認できるのが大きなメリットです。
超JavaScript 完全ガイド 2026
JavaScriptの基礎から応用までを体系的に学べる講座です。
scriptタグによる読み込みから、DOM操作・イベント処理・非同期処理まで一通りカバーしているため、
「JavaScriptをしっかり身につけたい」という方に向いています。
この講座で解決できること：
- JavaScriptの基礎〜応用を体系的に理解できる
- HTMLとJavaScriptの連携方法を画面で確認しながら学べる
- defer / async を含む実務的な書き方のイメージがつかめる
→ 超JavaScript 完全ガイド 2026（Udemy）
JavaScriptをとことんやってみよう
「まずは動かしてみたい」という方に向いている講座です。
scriptタグで読み込んだJavaScriptを使って、DOM操作やイベント処理を中心に学べるため、
本記事で学んだ内容をすぐに実践したい方にぴったりです。
この講座で解決できること：
- JavaScriptの動きを実際に試しながら理解できる
- DOM操作・イベント処理の基礎が身につく
- 短時間で「動くものを作る」経験が得られる
→ JavaScriptをとことんやってみよう（Udemy）
体系的に学びたい方へ（スクールという選択肢）
scriptタグや外部ファイルの読み込みまでは理解できても、
「DOM操作やイベント処理に進んだ途端に難しく感じる」という方も多いです。
そういったときに、質問できる環境や学習ロードマップを一緒に考えてくれる人がいると、
学習効率は大きく変わります。
独学の限界を感じやすいポイント
- エラーの原因が分からず、調べても解決できない
- 学習の順番に自信が持てない
- モチベーションが続かず、途中で止まってしまう
- 実務レベルのコードレビューを受ける機会がない
無料相談で得られるメリット
- あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
- 独学で詰まりやすいポイントを事前に教えてくれる
- 学習方法の改善点をプロがアドバイスしてくれる
- エンジニア転職を考えている場合、キャリア相談も可能
JavaScript を独学で学んでいて、
「もっと効率よく理解したい」「プロに質問しながら進めたい」
と感じる方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
scriptタグに関するよくある質問（FAQ）
Q1. scriptタグはどこに書くのが正解？
A. 基本は bodyの最後。headに書く場合は defer を使う。
Q2. async と defer の違いは？
A. async は読み込み完了後すぐ実行（順番保証なし）。defer はHTML解析後に実行（順番保証あり）。
Q3. 外部ファイルと内部記述はどちらが良い？
A. 実務では外部ファイルが基本。保守性・再利用性・高速化の面で優秀。
Q4. scriptタグは複数書いてもいい？
A. 問題なし。複数書く場合は defer を使うと順番が安定する。
まとめ
- scriptタグはJavaScriptをHTMLで使うための基本
- 基本は body の最後に書くのが最適
- head に書く場合は defer / async を使う
- 実務では外部ファイル（.js）を読み込むのが基本
- 初心者は defer を使うと安全
