浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】import構文とexport構文

 パッケージ化されたJavaScriptコード、例えばnpmのライブラリを読む時、使う時に理解しているとやりやすいのですが、直感的にわかりにくい部分があるため記事化です。
import – JavaScript | MDN
export – JavaScript | MDN
 色々ありますが、基本はdefaultのexport、名前付きのexportに対応する名前自由のimportと名前付きのimportです。これ以降のサンプルコードはいずれも上記リンクの一部分の引用です。

// 名前付きimport, export
// {name1, name2}の様に{}を付けてexport対象の名前を指定するとその名前のexport部が格納されます。
import { name1, name2 } from "module-name";
// export対象に名前がついている、defaultとついていないならば名前付きexport
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // var, const も使用可
export let name1 = …, name2 = …, …, nameN; // var, const も使用可
export function FunctionName(){...}
export class ClassName {...}
// default import, export
// {}なしで好きに名前を付けるとdefaultのexport部が格納されます。
import defaultExport from "module-name";
// expoprt default hogehogeとするとそれがdefaultのexportになります。
export default expression;
export default function (…) { … } // class, function* も使用可
export default function name1(…) { … } // class, function* も使用可
export { name1 as default, … };

 {}がimport構文中で名前付き, defaultを切り替える重要な役割を果たしています。このため{name1}の様な無意味に見える{}でも意味があります。このため次の様な構文も正しい構文です。

import defaultExport, { name1, name2 } from "module-name";

 上記コードはdefaultExportの中にdefaultでexportされたモノが、name1, name2にname1, name2の名でexportされたモノが格納されます。

  • この記事いいね! (1)