はじめに

どんなトライでもそうですが、最初からうまく行った試しがありません。今回も、ダイナミックimportを試してみましたが、うまく動作しませんでした。
何度テストとしても駄目でした。
あきらめかけましたが、もう少しやってみようと続けました。
すこしづつ、動き始めました。これは、何んとかなるかなと思うところまできました。
そして、ネットで取得したサンプルですが、やっと動作しました。
今回は、この顛末記です。

ネットで取得したサンプルです。

以下のサイトのサンプルをベースにしています。
Dynamic imports(ダイナミックインポート)

sub.js

/******************************************************
*ダイナミックexportテスト
*  
*******************************************************/
export function hi() {
  alert(`Hello`);
}
//これはエラーになる。
function aaa(){
    alert("aaa関数");
}

export function bye() {
  alert(`Bye`);
}
export default function() {
  alert("Module loaded (export default)!");
}

stampTube.js

//一部抜粋
/***********************************************************
*ダイナミックimportのテスト
*このstampTube.jsと同じフォルダー内のsub.jsをimportしているサンプル。
*モジュールパスは、./sub.js
*exportされている関数しか、importしないので、say.aaa()はエラーになる。
*
*  
************************************************************/
 async function saysay() {
    let say = await import('./sub.js');     //ダイナミックimportの形式
                           //ここで、exportしている関数をロード?? 
    say.hi(); // Hello!
    say.bye(); // Bye!
    say.default(); // Module loaded (export default)!
    say.aaa();
  }
/************************************************************
* 
*************************************************************/
saysay().then(()=>{alert("完了");});

一見、わかりやすいサンプルですが、はじめは動作しませんでした。importのモジュールパスを間違えていたとか、サンプルでは、ボタンでload()関数を呼び出していましたが、テストした環境では、モジュールのstampTube.jsでダイナミックimport()をしていました。そこでは、load()関数だけを追加して、load()関数を呼び出すボタンがありませんでした。
そこで、saysay()という関数にして、then()メソッドで、完了のalert()文を表示するようにしました。こうすることで、サンプルベースのダイナミックimport()が成功しました。

教訓

教訓と呼べるような高尚なことはなにもありませんが、過去の教訓を忘れていることもよくありません。同じ轍を踏まずとも言いますが、これは失敗を繰り返すという故事の様です。しかし、まったく新しいことに挑戦する場合は、過去の経験、教訓もないので、仕方がないかもしれません。ただ、その挑戦する勇気は、褒めてあげてもいいかもしれません。安全を求めて、いつも同じ方法を使っていては、進歩がありません。また、時代に乗り遅れてしまいます。そこで、今回は、これからはESモジュール化の時代といわれてますので、取り組んでみました。

あとがき

いくら慎重に考えても、初めてのトライは失敗します。まるで宇宙ロケットの打ち上げの様です。いつも覚悟はしていますが、やはり、そうなるかとがっかりします。
プログラミングの開発でもこの繰り返しです。
何回テストしたら、成功するのか。失敗から学ぶとはこのことですね。失敗しても学べないこともありますが。