はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- モジュールについての理解を深める
本題
1.ダイナミックインポート
exportで宣言された変数や関数を非同期で読み込める
前提
moduleAの変数や関数をmoduleBで使用したい
moduleA.js
export let publicVal = 0;
export function publicFn() {
console.log('publicFn called')
}
export default 1;
例1
通常のモジュールの読み込みは以下の通り
moduleB.js
// importを使用した場合
import { publicFn, publicVal } from './moduleA.js';
// moduleAで定義した通りpublicFn called'と出力される
publicFn();
上記をダイナミックインポートにすると下記の通りとなる
moduleB.js
// importという関数を宣言する
// 引数にはファイル名を記述し、Promiseが帰ってくるので、thenメソッドで繋げる
// thenの中に関数を定義し、中身を確認する
import('./moduleA.js').then(function (modules) {
// publicFnやpublicValが入ったオブジェクトが以下のように返ってくる
console.log(modules);
// それを使って出力結果を表示する
modules.publicFn();
// public calledと出力される
})
// // Module {Symbol(Symbol.toStringTag): 'Module'}
// default: (...)
// publicFn: (...)
// publicVal: (...)
例2
awaitとasyncを使用することも可能
moduleB.js
async function fn() {
// importの実行部分をawaitで受けて変数に格納
const modules = await import('./moduleA.js')
// 使いたい関数を下記のように実行
modules.publicFn();
}
fn();
今日はここまで！