import-export

javascriptのimport,export

javascriptでimportを行う時は、importできるメソッドを明示的にexportする必要があります。

default export

各モジュールに1個だけ指定することができるexport方法。

const add = (n,m) => n+m;
export default add;

default import

default exportをしたメソッドは、import ~~ from ファイル名（モジュール名）で読み込むことができます。
~~の部分はimport時に自由に決めることができます。

import addimp from './calc.js'
console.log(addimp(1,3));//4

名前付きexport

default exportは1個だけしかexportができないので、複数したい場合は名前付きexportを行います。

const add = (n,m) => n+m;
const minus = (n,m) => n-m;
const mul = (n,m) => n*m;
const div = (n,m) => n/m;

export default add;
export {minus,mul,div};

名前付きimport

importも基本的に同じような記述です。
asを使えば、好きな名前で読み込むこともできます。
※asはexportでもできるので、必ずメソッド名でexportしなくても良い

import add , {minus , mul , div as wari} from './calc.js'
console.log(add(1,3));//4
console.log(minus(6,1));//5
console.log(mul(2,3));//6
console.log(wari(4,2));//2

import * from ファイル名

*を使えば、一括で読み込むことができます。

import * as calc from './calc.js';
console.log(calc);

実行結果
[Module] {
  default: [Function: add],
  div: [Function: div],
  minus: [Function: minus],
  mul: [Function: mul]
}

使う時はこう。普通の書き方ですね。

import * as calc from './calc.js';
console.log(calc.default(1,3));
console.log(calc.minus(6,1));
console.log(calc.mul(2,3));
console.log(calc.div(4,2));

defaultがちょっと気持ち悪いので、defaultだけ別で読み込んでみます。

import add , * as calc from './calc.js';
console.log(add(1,3));
console.log(calc.minus(6,1));
console.log(calc.mul(2,3));
console.log(calc.div(4,2));

この例だとこっちのほうが気持ち悪かったな…。

集約

複数のモジュール読み込みたいとき、全部のimportを読み込むのは大変…ってことで、読み込みたいモジュールを集約することができます。

calc

const add = (n,m) => n+m;
const minus = (n,m) => n-m;
const mul = (n,m) => n*m;
const div = (n,m) => n/m;

export {add,minus,mul,div};

hello

const hello = (name) => `Hello${name}`;
const smallHello = (name) => `hello...${name}`;
const bigHello = (name) => `Hello!!!!!${name}`;
export {hello,smallHello,bigHello};

imp

export from ファイル名（モジュール名）を使うと、指定したものを再exportできるので、これを複数書きます。

export * as calc from "./calc.js";
export * as hello from "./hello.js";

main

impを読み込んで使います。

import * as imp from "./imp.js";
console.log(imp);

実行結果

[Module] {
  calc: [Module] {
    add: [Function: add],
    div: [Function: div],
    minus: [Function: minus],
    mul: [Function: mul]
  },
  hello: [Module] {
    bigHello: [Function: bigHello],
    hello: [Function: hello],
    smallHello: [Function: smallHello]
  }
}

ちゃんと使ってみる

import * as imp from "./imp.js";
console.log(imp.calc.add(2,3));//5
console.log(imp.hello.hello("おはし"));//Helloおはし

終わり！wsl2のコンソールからvimで書いて動かしながらやってたら疲れった…。