【JavaScript入門】外部ファイル（.js）の読み込み方法をやさしく解説｜src属性・パスの違い・読み込み順まで完全ガイド

この記事で分かること

JavaScript外部ファイル（.js）の読み込み方法
src属性の正しい使い方
相対パス・絶対パスの違い
読み込み位置（head / body）の最適解
defer / async との関係
初心者がつまずきやすいポイント

JavaScriptを実務で使う場合、外部ファイル（.js）として読み込むのが基本です。
HTMLとJavaScriptを分離することで、保守性・再利用性・表示速度が大幅に向上します。読み込み位置やパスの指定、defer / async の使い分けも重要なポイントです。

JavaScriptを学び始めると必ず出てくるのが 外部ファイルの読み込み。
しかし初心者の多くが、

src属性ってどう書くの？
相対パスと絶対パスの違いが分からない…
head と body のどっちに書けばいい？
defer / async って何？

といった疑問でつまずきます。この記事では、図解とコード例を使って、外部ファイルの読み込みを完全に理解できるように解説します。

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

外部ファイル（.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>

外部ファイルに関するよくある質問（FAQ）

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

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

Q2. パスは相対パスと絶対パスどちらを使うべき？

A. 初心者は相対パスが分かりやすくおすすめ。

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

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

Q4. head に書いても動かないのはなぜ？

A. DOM構築前に実行されるため。defer を使うと解決。

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

書籍で学ぶのが向いている人

紙の本でじっくり読み込みたい
体系的にまとまった教材で学びたい
ネット記事だけだと情報が断片的に感じる

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

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

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

この本で解決できること：

JavaScriptの基本文法をやさしく理解できる
手を動かしながら学べるため、挫折しにくい
「まず動くものを作ってみたい」が実現できる

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

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

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