JavaScriptのimport文は、いままでHTMLで<script>タグを追加するなりしないと使えなかった外部のJavaScriptファイルを、JavaScriptファイル上で読み込むことができます。
注意点
注意点は以下
-
exportされたクラス・メソッドしかimportすることはできない -
import文を使うときは、HTMLの<script>タグにtype="module"属性を付与する - ローカル環境(
file://なURL)では動作しない
exportされたクラス・メソッドしかimportすることはできない
インポートしたいJavaScriptのメソッドおよびクラスは、必ずexport句で「そのクラス・メソッドがエクスポート対象である」ということを明示する必要があります。
例えば以下のようにAクラスをインポートできるようにしたいときは…
export class A {
constructor() {
this.current = new B();
}
}
class B {
}
class Aの前にexportと書いて、そのクラスがエクスポート対象であることを明示する必要があります。その中で使われているメソッドやクラスなどにはexport句をつける必要はありません。
上記のようなスクリプトは、以下のようにしてインポートできます。
import {A} from './importable.js';
let a = new A();
import文を使うときは、HTMLの<script>タグにtype="module"属性を付与する
import文を使うときは、import文を使いたいJavaScriptファイルまたは、JavaScriptコードをHTMLから呼び出すときに、<script type="module">というように、type="module"属性を付与する必要があります。
<!DOCTYPE html>
<html>
<body>
<!-- ... -->
<script src="index.js" type="module"></script>
</body>
</html>
という感じ。または
<!DOCTYPE html>
<html>
<body>
<!-- ... -->
<script type="module">
import {A} from './importable.js';
let a = new A();
</script>
</body>
</html>
こんな感じ。
ローカル環境(file://なURL)では動作しない
こちらが軽くハマったのですが、import文はローカル環境に配置したHTML上では動作せず、「Cannot use import statement outside a module」というエラーが出ます。
ですので、オフライン環境で動作チェックをするときも、適当なサーバを立てて、そこからHTMLを表示する必要があります。
個人的に一番気楽なのは、PHPのビルトインサーバ機能
とりあえずプロジェクトのフォルダでおもむろにphp -S 127.0.0.1:8080などとすると、とりあえずそのフォルダをドキュメントルートとした簡易サーバが立ち上がるので、非常に便利です。PHPコードなんか一行も書いてないのですが。
なお、参考文献にもあるとおりですが、import文で呼び出されたモジュールおよび、type="module"属性を指定したスクリプトは、強制的にstrictモードになり、変数の宣言が強制となります。
うっかり変数宣言を忘れた変数などがあるとその時点でエラーになりますので、気をつけましょう。