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