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

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

この記事では、JavaScriptの動的インポート（dynamic import）をawaitを使って読み込む方法について解説します。

注意： このサンプルコードは、モジュールを読み込むためローカルサーバー（localhost）環境が必要です。HTMLファイルを直接開くのではなく、Live Serverなどの開発用サーバー経由で実行してください。

動的インポートとは？

通常のimport文はファイルの先頭で静的に宣言しますが、import()関数を使うと、必要なタイミング（例：ボタンクリック時）でモジュールを遅延読み込みできます。戻り値はPromiseであるため、awaitと組み合わせることで、非同期処理の中でスッキリと記述できます。

サンプルコード

以下は、ボタンをクリックしたときに外部モジュールを動的にインポートして結果を表示する例です。

<!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>Awaiting on 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>

sample.js（インポートされるモジュール）

次に、動的に読み込まれる側のモジュールです。2つの関数をエクスポートしています。

function testImport() {
   return "Module testImport has been imported" + "<br>";
   }
   function tellTime() {
      return new Date();
   }
export { testImport, tellTime };

コードの解説

  • async function loadModule()：非同期関数として定義することで、内部でawaitが使用可能になります。
  • await import("./sample.js")：モジュールの読み込みが完了するまで待機し、その後モジュール名前空間オブジェクトを受け取ります。
  • test.testImport() / test.tellTime()：取得したモジュールからエクスポートされた関数を呼び出し、結果を画面に表示します。

実行結果

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

「CLICK HERE」ボタンをクリックすると −

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

このように、モジュールから返されたメッセージと現在の日時が画面に表示されれば、動的インポートの成功です。この手法を活用すれば、初期読み込みを高速化しつつ、必要になった時点でのみコードを取得できるため、パフォーマンス最適化に非常に有効です。

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

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

  2. JavaScriptで動的に生成される要素にイベントをアタッチする方法

    JavaScriptで後から動的に追加される要素にイベントを紐付けるには、document.addEventListener()を使った「イベントデリゲーション」の手法が便利です。documentオブジェクトに対してリスナーを登録しておけば、ページ読み込み後に生成された要素であっても、クリックなどのイベントを正しく捕捉できます。基本的な考え方通常、addEventListener()は要素そのものに対して登録しますが、動的に追加された要素は登録時点でまだ存在しないため、直接イベントを設定できません。そこで、イベントがバブリング（親要素への伝播）する仕組みを利用し、documentレベルでイベン