はじめに
どんなトライでもそうですが、最初からうまく行った試しがありません。今回も、ダイナミックimportを試してみましたが、うまく動作しませんでした。
何度テストとしても駄目でした。
あきらめかけましたが、もう少しやってみようと続けました。
すこしづつ、動き始めました。これは、何んとかなるかなと思うところまできました。
そして、ネットで取得したサンプルですが、やっと動作しました。
今回は、この顛末記です。
ネットで取得したサンプルです。
以下のサイトのサンプルをベースにしています。
Dynamic imports(ダイナミックインポート)
/******************************************************
*ダイナミックexportテスト
*
*******************************************************/
export function hi() {
alert(`Hello`);
}
//これはエラーになる。
function aaa(){
alert("aaa関数");
}
export function bye() {
alert(`Bye`);
}
export default function() {
alert("Module loaded (export default)!");
}
//一部抜粋
/***********************************************************
*ダイナミック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モジュール化の時代といわれてますので、取り組んでみました。
あとがき
いくら慎重に考えても、初めてのトライは失敗します。まるで宇宙ロケットの打ち上げの様です。いつも覚悟はしていますが、やはり、そうなるかとがっかりします。
プログラミングの開発でもこの繰り返しです。
何回テストしたら、成功するのか。失敗から学ぶとはこのことですね。失敗しても学べないこともありますが。