import functionで読み込んだClassを使う(JavaScript)

やりたいこと

Dynamicでmoduleを読み込みたい場合import文ではなく import functionでモジュールを読み込みます。しかし単純に書いても思った通り動作しませんでした。

動作するように修正します。

以下のimport文をimport functionに書き換えます。

import { myClass } from './myClass.js';

myClass.jsからmyClass クラスを読み込みます。

以下のコードを試してみましたが動作しませんでした。

const myClass= import ('./myClass.js')

結論から書くと以下のようにすると修正前ら書くと以下のようにすると修正前と同じ値がmyClassに入りました。

const myClass= (await import('./myClass.js'))['myClass'];

ではなぜダメな例では動かなかったのかを解説します。

これはimport()の返り値を２重で勘違いしているためです。

一つ目の勘違いはimport()がasync関数で返り値がpromiseであることです。

そのためawaitを追加して同期するようにしました。（もちろんthenで返り値を受けても問題ありません）

上記を踏まえて修正すると以下のようになりますが、まだ動作しません。

const myClass= await import('./myClass.js');

ここで二つ目の勘違いです。

上記のpromiseが返すのが欲しいクラスだけでなく、すべてのエクスポートを含んだオブジェクトを返すためです。（エクスポートが一つでも関係なくパックされます）

そのため以下のように[‘myClass’]で必要なクラス名を指定する必要があります。

const myClass= (await import('./myClass.js'))['myClass'];

import文をimport functionに置き換えることができました。