92
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptのimport文を使ってみた

Posted at

JavaScriptのimport文は、いままでHTMLで<script>タグを追加するなりしないと使えなかった外部のJavaScriptファイルを、JavaScriptファイル上で読み込むことができます。

注意点

注意点は以下

  • exportされたクラス・メソッドしかimportすることはできない
  • import文を使うときは、HTMLの<script>タグにtype="module"属性を付与する
  • ローカル環境(file://なURL)では動作しない

exportされたクラス・メソッドしかimportすることはできない

インポートしたいJavaScriptのメソッドおよびクラスは、必ずexport句で「そのクラス・メソッドがエクスポート対象である」ということを明示する必要があります。

例えば以下のようにAクラスをインポートできるようにしたいときは…

importable.js
export class A {
  constructor() {
    this.current = new B();
  }
}

class B {
}

class Aの前にexportと書いて、そのクラスがエクスポート対象であることを明示する必要があります。その中で使われているメソッドやクラスなどにはexport句をつける必要はありません。

上記のようなスクリプトは、以下のようにしてインポートできます。

index.js
import {A} from './importable.js';

let a = new A();

import文を使うときは、HTMLの<script>タグにtype="module"属性を付与する

import文を使うときは、import文を使いたいJavaScriptファイルまたは、JavaScriptコードをHTMLから呼び出すときに、<script type="module">というように、type="module"属性を付与する必要があります。

index.html
<!DOCTYPE html>
<html>
<body>
  <!-- ... -->
  <script src="index.js" type="module"></script>
</body>
</html>

という感じ。または

index.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モードになり、変数の宣言が強制となります。

うっかり変数宣言を忘れた変数などがあるとその時点でエラーになりますので、気をつけましょう。

参考文献

92
63
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
92
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?