【JavaScript ECMAScript】import演算子の使い方
import()演算子の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
import()関数は、JavaScriptのモジュールを動的にロードする処理を実行する関数です。
この関数は、プログラムの任意の場所で、必要に応じてモジュールを非同期的に読み込むことを可能にします。従来のimport文がファイルやスクリプトの先頭で静的にモジュールを宣言するのに対し、import()は、実行時にモジュールをロードするかどうかを決定できる柔軟性を提供します。
import()はPromiseを返します。モジュールのロードが成功すると、そのPromiseはモジュールオブジェクトで解決されます。このモジュールオブジェクトには、ロードされたモジュールがエクスポートするすべての値が含まれており、例えばモジュール名.エクスポート名のようにアクセスできます。ロードが失敗した場合は、Promiseは拒否されます。
この非同期的な性質から、import()は通常、async/await構文や.then()メソッドと組み合わせて使用されます。例えば、ユーザーのアクションに応じて特定の機能を提供するモジュールだけを読み込んだり、アプリケーションの初期ロード時間を短縮するために、初期表示に不要なモジュールを後からロードしたりするシナリオで非常に有用です。これにより、アプリケーションのパフォーマンス向上やリソースの効率的な利用が期待できます。
公式リファレンス: import()
構文(syntax)
1import('./path/to/module.js');
引数(parameters)
moduleSpecifier
- moduleSpecifier: string | URL | ImportAttribute: インポートするモジュールのパスまたはURLを指定します。ImportAttribute はオプションで、モジュールの読み込み方法に関する追加情報を提供します。
戻り値(return)
Promise
import() は、モジュールを非同期に読み込み、そのモジュールのエクスポートされた内容を含むオブジェクトを解決する Promise を返します。