Help us understand the problem. What is going on with this article?

JavaScriptのimport文を使ってみた

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

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

参考文献

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away