概要
最近のJavaScriptのライブラリーやコード類を見るとexport/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文でした。
いくつかの書式がありますが、基本は名前付きエクスポートと、名前を指定したインポートを覚えておけばそれでよさそうです。ここに限定すればそれだけのシンプルなことです。
他の重要な書式などが登場したら、そのときにまた情報を追記します。

詳細プロフィール。SNS: Twitter/[email protected]/[email protected]。2022-07-17からgnusocial.jpとweb.gnusocial.jpのサイトを運営しています。WordPressで分散SNSに参加しています。このアカウントの投稿に返信すると、サイトのコメント欄にも反映されます。自称ASD。
Comments
This Article was mentioned on web.gnusocial.jp