HOWTO · HTML
JavaScript ファイルを HTML ファイルにリンクする
このチュートリアルでは、JavaScript ファイルを HTML ファイルにリンクする方法を紹介します
このページの内容
JavaScript を HTML に読み込むには、ページに <script> 要素を追加します。別の .js ファイルを読み込むには src 属性を使い、短いスクリプトなら開始タグと終了タグの間に記述します。DOM を使う一般的なページ用スクリプトは、外部ファイルを <head> に置いて defer を付けます。実行順序に依存しない独立したスクリプトには async を使います。
src で外部 JavaScript ファイルを読み込む
JavaScript ファイルを作成し、HTML 文書から参照します。たとえば、index.html と app.js が同じディレクトリにある場合、次のページで app.js を読み込めます。
このセクションのコードと表示されるラベルや出力は英語のままです。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>External script example</title>
<script src="./app.js" defer></script>
</head>
<body>
<h1 id="message">Waiting for JavaScript</h1>
</body>
</html>
./app.js は URL パスであり、JavaScript ファイルのコンピューター上の場所やサーバーの作業ディレクトリではなく、HTML 文書の URL を基準に解決されます。ページと同じ場所にある js サブディレクトリにファイルを置いた場合は、./js/app.js を使います。大文字・小文字と綴りを正確に合わせてください。大文字・小文字を区別しない開発環境で動くパスでも、区別するサーバーでは失敗することがあります。/js/app.js のように先頭にスラッシュを付けると、サイトの URL ルートを起点にします。
defer 属性を付けると、ブラウザーは HTML の解析中にファイルをダウンロードし、解析完了後に実行します。そのため、スクリプトが見出しを取得するときには、見出しが利用可能です。複数のページでファイルを共有する場合や、HTML と JavaScript を別々に管理したい場合は、参照先のファイルを分けておきます。
この例を実行します。
console.log("JavaScript loaded");
この短い JavaScript の例は、ブラウザーのコンソールにメッセージを出力するスクリプトの単独実行例です。ページの例では、app.js で document.querySelector("#message") を使い、要素が存在する場合に textContent を "JavaScript is connected" に設定できます。このように要素の存在を確認してから DOM を更新する方法は、ページ用に応用したものであり、実行結果として確認されたものではありません。
JavaScript を HTML ページに直接記述する
1 ページだけで使う短い処理なら、JavaScript を <script> 要素の中に直接記述できます。必要なマークアップの後、通常は </body> の直前に要素を置きます。
このセクションのコードと表示されるラベルや出力は英語のままです。
<body>
<h1 id="message">Waiting for JavaScript</h1>
<script>
const message = document.querySelector("#message");
if (message) {
message.textContent = "Inline JavaScript is connected";
}
</script>
</body>
ブラウザーは見出しを解析した後にスクリプトへ到達するため、要素を取得できます。インラインコードは、そのページだけで使う小さな処理に便利です。コードが増えてきた場合は、外部ファイルにすると再利用、キャッシュ、保守がしやすくなります。通常のページ更新に document.write を使わないでください。解析後に実行すると、文書全体を置き換えることがあります。要素を安全に変更するには、textContent などの DOM メソッドを使います。
外部スクリプトの実行タイミングを選ぶ
<head> に置かれた通常の外部スクリプトは、ダウンロードと実行の間、HTML の解析を一時停止します。すぐに本文内の要素を検索しても、その要素はまだ解析されていません。<body> の末尾近くに置いたスクリプトは、その前にあるマークアップの解析後に実行されるため、小さなページでは適した方法です。ただし、そのスクリプトの読み込みと実行中には、ブラウザーは解析を一時停止します。
一般的な DOM 依存ファイルには、<head> 内の <script src="./app.js" defer></script> が分かりやすい既定の選択肢です。遅延実行される外部スクリプトは、HTML の解析と並行してダウンロードされ、解析完了後に文書内の順序で実行されます。あるファイルが別の遅延実行ファイルに依存する場合は、依存先を先に記述します。defer が適用されるのは外部スクリプトです。インラインスクリプトに付けても、そのコードの実行は遅延されません。
単独で動作する分析用スクリプトなど、他のスクリプトに依存しないファイルには、<script src="./analytics.js" async></script> を使います。ダウンロードは解析と並行して行われ、準備ができるとすぐに実行されるため、解析完了前に動く場合があります。async スクリプトの実行順序は保証されず、ページ内の要素が用意される前に動くこともあります。そのため、互いに依存するスクリプトや、解析済みの DOM を必要とするスクリプトには使わないでください。async と defer はどちらも外部スクリプト用です。現代のブラウザーでは両方を指定すると、async の動作が優先されます。
スクリプトのパスとページの動作を確認する
何も起きない場合は、まず src の値が正確か、HTML ページがどこから配信されているかを確認します。ブラウザーの開発者ツールを開き、Network パネルでスクリプトのリクエストを調べます。「見つからない」という応答は、パス、ファイル名、大文字・小文字の誤りを示していることがよくあります。Console パネルには JavaScript の構文エラーや実行時エラーが表示されます。修正した後はページを再読み込みし、最新のリクエストとメッセージを確認してください。
リクエストが成功してもページが変わらない場合は、スクリプトが正しい要素 ID を取得しているか、その要素のマークアップができた後にスクリプトが実行されているかを確認します。<head> に置いた DOM 依存の外部スクリプトには defer を付けるか、小さなインラインスクリプトを対象要素より後ろに移動します。複数のスクリプトが連携する場合は、async ではなく、依存関係の順に並べた遅延実行ファイルを使います。ダウンロードの成功から分かるのは、ブラウザーがファイルを見つけたことだけです。スクリプトがエラーなく完了したことまでは確認できません。
よくある質問
JavaScript ファイルへのリンクはどこに置けばよいですか？ ページの DOM を使う一般的な外部スクリプトなら、defer を付けて <head> に置きます。本文の末尾に置いたスクリプトも、それより前のマークアップにアクセスできます。一方、defer のない <head> 内のスクリプトは、本文の解析前に実行されます。
defer は何をしますか？ HTML の解析を一時停止せずに外部スクリプトをダウンロードし、解析完了後、遅延実行スクリプトが記述された順に実行します。
1 つのページから複数の JavaScript ファイルを読み込めますか？ はい。ファイルごとに <script src="..." defer></script> 要素を追加します。遅延実行ファイルは文書内の順に実行されるため、共有される依存ファイルを、それを使うファイルより前に記述します。
async と defer の違いは何ですか？ どちらもダウンロードを並行して行えます。defer は解析完了まで実行を待ち、文書内の順序を保ちます。async は各ファイルの準備ができ次第実行され、順序は保たれません。
type="text/javascript" は必要ですか？ いいえ。HTML5 では JavaScript がスクリプト要素の既定の言語なので、通常の JavaScript では type は不要です。
