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

JavaScriptの動的インポート（Dynamic Import）の使い方と実装例を解説

JavaScriptの動的インポートとは

動的インポート（Dynamic Import）とは、JavaScriptのモジュールを必要なタイミングで読み込むための機能です。通常の静的なimport文と異なり、import()関数はPromiseを返すため、async/awaitやthen()と組み合わせて柔軟に扱うことができます。

これにより、ユーザーがボタンをクリックしたときなど、実際に必要になった瞬間にだけモジュールを読み込むことが可能になります。

動的インポートの基本構文

import()関数にモジュールのパスを渡すと、そのモジュールが非同期に読み込まれ、Promiseが解決された時点でモジュールのエクスポートにアクセスできるようになります。

let module = await import("./module.js");

サンプルコード

以下は、ボタンをクリックしたタイミングで外部モジュールを動的に読み込み、その結果を画面に表示する実装例です。

<!DOCTYPE html>
<html lang="ja">
<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: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Dynamic imports in JavaScript.</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックするとモジュールが動的に読み込まれます
</h3>
<script>
    document.querySelector(".Btn").addEventListener("click", loadModule);
    let resEle = document.querySelector(".result");
    async function loadModule() {
        let test = await import("./sample.js");
        resEle.innerHTML += test.testImport() + "<br>";
        resEle.innerHTML += test.tellTime();
    }
</script>
</body>
</html>

コードの解説

  • ボタン要素にクリックイベントリスナーを登録し、クリック時にloadModule()関数が呼び出されるようにします。
  • loadModule()はasync関数として定義されており、await import("./sample.js")によってモジュールを非同期に読み込みます。
  • 読み込んだモジュールが公開しているtestImport()メソッドとtellTime()メソッドを呼び出し、その戻り値を結果表示用の要素に追記していきます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptの動的インポート（Dynamic Import）の使い方と実装例を解説

「CLICK HERE」ボタンをクリックすると、sample.jsがその場で読み込まれ、以下のようにモジュールの実行結果が表示されます。

JavaScriptの動的インポート（Dynamic Import）の使い方と実装例を解説

動的インポートを活用するメリット

  • 初期読み込みの高速化：ページ表示時に不要なモジュールを読み込まないため、初回表示が速くなります。
  • コード分割（Code Splitting）：バンドルを小さなチャンクに分割でき、パフォーマンスの向上が期待できます。
  • 条件付き読み込み：ユーザーの操作や特定の条件を満たした場合にのみモジュールを読み込むなど、柔軟な制御が可能です。

このように、動的インポートを活用することで、必要なコードを必要なときにだけ読み込む効率的なアプリケーションを構築できます。

  1. JavaScriptのBigIntとは？使い方をサンプルコード付きで解説

    BigIntは、253 − 1 より大きい整数値を表現するために用意された組み込みオブジェクトです。 通常のNumber型で安全に扱える整数の上限は「Number.MAX_SAFE_INTEGER」（9007199254740991 = 253 − 1）までです。これを超える数値をNumber型で扱うと、計算誤差や精度の低下が発生してしまいます。そこで活躍するのがBigIntです。数値リテラルの末尾に「n」を付けるか、BigInt()関数を使用することで、どれほど巨大な整数でも正確に表現・演算できます。 以下は、JavaScriptでBigIntを使用する具体的なサンプルコードです。 サンプル

  2. JavaScriptで動的インポート（dynamic import）をawaitする方法

    この記事では、JavaScriptの動的インポート（dynamic import）をawaitを使って読み込む方法について解説します。 注意： このサンプルコードは、モジュールを読み込むためローカルサーバー（localhost）環境が必要です。HTMLファイルを直接開くのではなく、Live Serverなどの開発用サーバー経由で実行してください。 動的インポートとは？ 通常のimport文はファイルの先頭で静的に宣言しますが、import()関数を使うと、必要なタイミング（例：ボタンクリック時）でモジュールを遅延読み込みできます。戻り値はPromiseであるため、awaitと組み合わせることで