JavaScriptでdynamic import 使えばオンラインエディタでもmoduleをimportできる

背景

ブラウザで動くJavaScriptのオンラインエディタでモジュールを開発して, それを共有して作業を進められないか考えていました。オンラインエディタでJavaScriptを実行するときはFunctionコントラクタでエディタの中に書いたコードを実行します。しかし、普通のimportはJavaScriptのファイルの冒頭に書いて、静的に読み込まなくてはならないため、Functionコントラクタの中でimportはできません。JavaScriptでもpythonのようにいつでもimportできればいいのにと思っていました。

そんなある日、tonkotsuboy_comさんの記事を発見しました。

Chrome 63以降で使えるJavaScriptのdynamic import（動的読み込み）

おぉ、これでいける！！tonkotsuboy_comさんありがとうございます。
きっとこれでJavaScriptでデータ処理するコードを開発するのが加速すると思います。

方法

tonkotsuboy_comさんが書いてくださった方法そのままでいけます。複数のmoduleをインポートすることを考えると、async & awaitで書くのが良いとおもいます。
export_test1.jsとexport_test2.jsをネットから見える場所においておけば、async付けた関数の中でawait importで順番に読み込めば、moduleで読み込んだ関数を使えます。

export_test1.js

export const func1 = (value) =>{
  console.log('export_test1.js func1')
  return value*2
}

export const func2 = (value) =>{
  console.log('export_test1.js func2')
  return value**2
}

export_test2.js

export const func1 = (value) =>{
  console.log('export_test1.js func1')
  return value*2
}

export const func2 = (value) =>{
  console.log('export_test1.js func2')
  return value**2
}

import_test1.js

const main = async ()=>{
  const module1 = await import("/jsnote/sample/public/module/export_test1.js")
  const module2 = await import("/jsnote/sample/public/module/export_test2.js")
  console.log(module1.func1(3))
  console.log(module1.func2(3))
  console.log(module2.func1(3))
  console.log(module2.func2(3))
}
main()

実行の様子

jsnoteのレジスタでexport_test1.jsとexport_test2.jsを登録して、import_test1.jsで使ってみました。

Chromeの最新版をお使いの方は、github pagesで動くこちらで試してみてください

jsnoteでレジスタに自分のmoduleを登録してをお使いになられる方はgithubからcloneしてご自分の環境で動かしてみてください。

リポジトリへのリンク
https://github.com/Toyoharu-Nishikawa/jsnote

使い方へのリンク
https://qiita.com/Toyoharu-Nishikawa/items/044d53974c42bc635f0f