JavaScriptのexport/import文

概要

最近のJavaScriptのライブラリーやコード類を見るとexport/import文をよく見かけます。昔のJavaScriptには存在しない構文で、よく知らなかったので整理します。

MDNの以下の情報を参考にしました。

• export – JavaScript | MDN
• import – JavaScript | MDN

export

exportはJavaScriptの値をエクスポートします。エクスポートされた値は、importやダイナミックインポートにより、他のJavaScriptコードで使うことができます。

なお、ダイナミックインポートは応用的なもので、用途が限定されるので、importを原則使います。

export文を使うと、HTMLのscript要素にtype=”module”の指定か、他のモジュールでインポートされることが必須になります。

以下の書式となります。

export <target>
export default <target>

1番目の書式は名前付きエクスポート (named export) で、2番目の書式はデフォルトエクスポート (default export) になります。

名前通り、エクスポート時に名前を付けるか付けないかが違いです。importする際に、名前を指定するかしないかの違いになります。デフォルトエクスポートは名前を付けないので、モジュールごとに1回しか使えません。名前付きエクスポートは何回も宣言できます。

なお、「なぜ default export を使うべきではないのか？」で説明されている通り、デフォルトエクスポートは、import時にユーザー側で任意の名前を自分でつけて取り込む必要があり、複数のJavaScriptで名前がばらばらになる可能性があります。後々exportした中身が変わった場合に、import時の名前をリファクタリングで一括置換する際に困るので、デフォルトエクスポートは使わず原則名前付きエクスポートを使ったほうがいいようです。

そういうことなので、名前付きエクスポートのみ詳しく説明します。

export { myFunction2, myVariable2 };
// (var/let/const/function/class)
export let myVariable = Math.sqrt(2);

上記の2構文で、シンボルをオブジェクト形式でエクスポートするか、エクスポート時にシンボルを宣言・定義してエクスポートします。

なお、エクスポートは名前を宣言するだけで、そこで使うわけではないので、定義を後で実装しても問題ありません。例えば、以下のようにできます。

export { x };
const x = 1;

exportで覚えておけばいいことの基本は以上です。

import

import文は他のモジュールでexport文でエクスポートされた値をインポートします。

import文はscript要素にtype=”module”の指定が必須になります。インポートで取り込んだ値 (バインディング) はエクスポートしたモジュールによって更新されるため、ライブバインディングと呼ばれます。script要素のnomodule属性を指定すると、下位互換性を確保できます。

書式は以下となります。

import {export1, export2} from "module-name";

module-nameは、インポート対象のモジュールです。.jsファイルへの相対・絶対パス名です。

インポートしたシンボルはその名前でそのまま使えます。関数やオブジェクトをエクスポートして、それを他で流用するのが主な用途になるでしょう。

結論

JavaScriptのexport/import文でした。

いくつかの書式がありますが、基本は名前付きエクスポートと、名前を指定したインポートを覚えておけばそれでよさそうです。ここに限定すればそれだけのシンプルなことです。

他の重要な書式などが登場したら、そのときにまた情報を追記します。