【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されたモノが格納されます。