JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

JavaScriptファイルを動的に読み込むことで、ページの初期表示を高速化したり、必要なタイミングで必要なスクリプトだけを取得したりできます。ここでは、ボタンをクリックしたときに外部のJavaScriptファイルを読み込むサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Load a JavaScript file Dynamically</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click the above button to load external JavaScript
</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        var jsRef = document.createElement("script");
        jsRef.setAttribute("src", "sample.js");
        document.getElementsByTagName("head")[0].appendChild(jsRef);
    });
</script>
</body>
</html>

sample.js

resEle.innerHTML = 'JavaScriptが読み込まれました';

実行結果

上記のコードを実行すると、以下のように表示されます。

【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

「CLICK HERE」ボタンをクリックすると、外部のJavaScriptファイルが読み込まれ、次のようにメッセージが表示されます。

【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

コードの解説

JavaScriptファイルを動的に読み込む仕組みは、以下の3つのステップで構成されています。

  1. script要素の生成：document.createElement("script") を使って、新しい <script> 要素を作成します。
  2. 読み込むファイルの指定：setAttribute("src", "sample.js") で、読み込みたいJavaScriptファイルのパスを設定します。
  3. DOMへの追加：appendChild() で <head> 要素に追加すると、その時点でブラウザがスクリプトのダウンロードと実行を開始します。

この手法を活用すれば、ユーザーの操作や特定の条件をトリガーとしてスクリプトを読み込めるため、初期ロードの負荷を軽減し、ページ全体のパフォーマンス向上が期待できます。また、読み込み完了後に処理を実行したい場合は、onload イベントを組み合わせるとより柔軟な制御が可能です。


  1. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. 【JavaScript入門】配列を使ってラジオボタンを動的に生成する方法

    JavaScriptでは、配列のデータをもとにラジオボタンを動的に生成することができます。その際に活用するのが、要素を作成する createElement() メソッドと、作成した要素を画面に追加する appendChild() メソッドです。 サンプルコード 以下は、性別の選択肢を配列で管理し、それを元にラジオボタンを自動生成するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=devic