【JavaScript】HTMLファイルへのスクリプト埋め込みと実行の最適解

2026年1月22日

概要

Webページに動きをつけるためには、HTMLファイル内にJavaScriptを適切に記述・読み込みさせる必要があります。本記事では、HTML内に直接記述する「インラインスクリプト」と、外部ファイルを読み込む「外部スクリプト」の2つの手法を解説します。特に、ページの描画速度や保守性を考慮した、モダンなdefer属性を使用した読み込み方法を標準として採用します。

仕様（入出力）

入力: ブラウザによるHTMLファイルの読み込み完了
出力:
1. コンソールへの初期化メッセージ表示
2. 画面上の指定要素（ステータス表示エリア）へのテキスト書き換え

基本の使い方

JavaScriptをHTMLに適用するには、<script>タグを使用します。実務においては、HTMLとJavaScriptを分離して管理する「外部ファイル読み込み」が推奨されますが、学習や簡単なテストではHTML内に書くこともあります。

以下のコードは、外部ファイル（main.js）として保存したスクリプトを、HTMLから読み込んで実行する構成です。

コード全文（HTML / JavaScript）

HTML (index.html)

defer属性を付与することで、HTMLの解析を邪魔せずにスクリプトを裏側で読み込み、解析完了後に実行させます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript読み込みデモ</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>システムステータス</h1>
        <p>現在の状態: <span id="status-text">読み込み中...</span></p>
    </div>
</body>
</html>

JavaScript (main.js)

DOM要素を取得し、テキストを書き換える基本的な処理です。

/**
 * アプリケーションの初期化処理
 * HTMLの読み込み完了後に実行されます
 */
const initApplication = () => {
    // コンソールへの出力（開発者ツールで確認可能）
    console.log('システムを開始しました');

    // HTML要素の取得
    const statusElement = document.querySelector('#status-text');

    // 要素が存在する場合のみテキストを変更
    if (statusElement) {
        statusElement.textContent = '稼働中 (Active)';
        statusElement.style.color = 'green';
    }
};

// スクリプト読み込み完了時に初期化関数を実行
initApplication();

カスタムポイント

ファイルパスの変更: HTMLファイルと異なる階層にJSファイルを置く場合は、src="js/main.js"のようにパスを修正してください。
実行タイミングの制御: 画像などのリソースも含めて完全に読み込まれた後に実行したい場合は、window.addEventListener('load', ...)を使用するよう書き換えます。
ターゲット要素: querySelectorの引数を変更することで、操作対象のHTML要素を自由に変更可能です。

注意点

読み込み順序とブロッキング: <script>タグにdeferやasyncを付けずに<head>内に書くと、JavaScriptの読み込み・実行が終わるまで画面が真っ白のまま止まってしまいます。必ずdeferをつけるか、<body>の閉じタグ直前に記述してください。
キャッシュの影響: ブラウザは外部JSファイルをキャッシュ（保存）します。コードを修正しても反映されない場合は、ブラウザのキャッシュを削除するか、スーパーリロード（Ctrl + F5等）を行ってください。
構文エラー: HTML内のタグの閉じ忘れ（例: <script>の閉じタグがない）は、ページ全体の表示崩れやスクリプトの動作不良を引き起こします。

応用

type=”module”の使用

最新のJavaScript機能（import/export）を使用して、機能を部品化する場合の記述です。

<script type="module" src="app.js"></script>

// app.js内で他のファイルを読み込むことが可能になります
import { setupConfig } from './config.js';
setupConfig();

まとめ

JavaScriptをHTMLに組み込む際は、ページの表示速度を損なわないようdefer属性を活用するのが現代のベストプラクティスです。インライン記述は手軽ですが、コード量が増えると管理が難しくなるため、早い段階で外部ファイルへの切り出しを習慣づけると良いでしょう。コードの役割と実行タイミングを意識することが、バグのない実装への近道です。

よかったらシェアしてね！