モジュール内の動的import()
動的なimport()でモジュールを必要なときに読み込みます
「モジュール内の動的import()」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
import()式
静的なimport宣言とは異なり、import("./module.js")は、モジュールの名前空間に解決されるPromiseを返す式です。関数内や条件分岐内、さらにはモジュールではないスクリプト内など、どこでも使用できます。
コード分割
動的importは、コード分割の主要な仕組みです。ルートハンドラーは、ユーザーが移動するまでルートのコードの読み込みを遅延できます。const mod = await import("./routes/admin.js")のように記述します。ルートが必要になるまで、そのコードのバイト列はダウンロードされません。
document.getElementById("settings-btn").addEventListener("click", async () => {
const { renderSettings } = await import("./settings.js");
renderSettings();
});返されるモジュール名前空間
解決された値はモジュール名前空間です。これは、モジュールのexportをプロパティとして持つオブジェクトです。名前付きexportはインラインで分割代入するか、デフォルトexportにはmodule.defaultでアクセスできます。
エラーの捕捉
import()はPromiseを返すため、取得の失敗や構文エラーは.catch()に伝播します。動的importは、ネットワーク障害を適切に処理できるよう、try/catch（async関数内）または.catch()で囲んでください。
try {
const mod = await import("./optional.js");
mod.run();
} catch (e) {
console.warn("Optional module failed", e);
}条件付き読み込み
古いブラウザーでのみpolyfillを読み込みます。if (!window.IntersectionObserver) await import("intersection-observer-polyfill")のように記述できます。モダンブラウザーではそのバイト列を完全に省略でき、古いブラウザーでも必要な場合にだけコストが発生します。
specifierの解決
specifierには静的importと同じ規則が適用されます。相対URL、絶対URL、またはImport mapで対応付けたベア名を使用できます。動的な文字列も使用できます。import(`./locales/${lang}.js`)のように記述しますが、Bundlerではこの形式のコード分割が難しい場合があります。
キャッシュ
一意のspecifierごとに、同じモジュールインスタンスが解決されます。2回目のimport("./mod.js")は、ネットワークへの再アクセスなしに読み込み済みのモジュールを返します。そのため、繰り返しダウンロードされる心配なく、イベントハンドラー内で動的importを安全に使用できます。
トップレベルの動的import
モジュール内では、動的importとトップレベルawaitを組み合わせて、非同期で読み込むヘルパーが利用可能になるまで実行を遅延できます。実行時にプラグインの一覧が決まるプラグインシステムに便利です。
// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();React.lazyおよびPreactとの使用
React.lazy、Preactのpreact/compatにある`lazy`、VueのdefineAsyncComponentは、いずれも動的importをラップしてコンポーネント単位のコード分割を実現します。ブラウザーのプリミティブはimport()であり、フレームワークはその上にSuspenseに似た読み込み境界を追加します。
WebpackとViteの分割
Bundlerはソース内のimport("...")を検出し、importされたモジュール用に別のチャンクを出力します。ランタイムのスタブは、最初の呼び出し時にそのチャンクを取得します。開発者はES仕様のimport()を記述し、Bundlerがネットワーク処理を組み立てます。
よくある間違い
ホットパス（レンダリングループ内など）でimport("X")を呼び出すと、呼び出しごとにキャッシュが再確認されます。再ダウンロードは発生しませんが、検索処理のオーバーヘッドは発生します。最初のimport後に、解決された名前空間を変数へ保存してください。
理解度チェック
import("./mod.js")は何を返しますか。
まとめ
動的import()は、静的なimport宣言をオンデマンドで利用する仕組みです。モジュール名前空間に解決されるPromiseを返し、コード分割、条件付きpolyfill、プラグインシステムを実現します。モジュールは最初のimport後にキャッシュされるため、以降の呼び出しにコストはかかりません。Bundlerは、動的importの呼び出しごとに別のチャンクを出力します。
よくある質問
「モジュール内の動的import()」レッスンは無料ですか？
はい。「モジュール内の動的import()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「モジュール内の動的import()」で何を学びますか？
動的なimport()でモジュールを必要なときに読み込みます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「モジュール内の動的import()」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ESモジュールスクリプト type=module
- Import Maps importmap
- モジュール内の動的import()
- Module Federationの基礎