JavaScriptのexportとimportについてまとめ

Vue.jsやReactをコーディングしていると必ず出てくるimportとexport記述。
なんとなく使っているけど、使うライブラリによってなんかimportの記述方法が違うぞ？って思ったことありませんか？
僕も分かっているようで実はなんとなくで詳しくは分からず使っていたJavaScriptのimportとexportについてまとめてみました。

ECMAScriptとCommonJSって何？

JavaScriptの仕様には下記の２つがあります。

ECMAScript = ブラウザで動かす際のJavaScriptの仕様
　　　　　　（プレーンJSやReact、Vue.js等で使われる）

CommonJS = サーバーサイドやJS単体で動くクライアントのCUIやGUIでのJavaScriptの仕様
　　　　　　（Node.js等で使われる）

ちなみに今回まとめる内容は上記の「 ECMAScript 」仕様についてのexportとimportを解説します。

Default exports（デフォルトexport）

exportする側のプログラム（libA.js）

export default function () {
  return "this is common A default";
}

importする側のプログラム

前記述「 libA.js 」内のdefault exportの関数をimportする側は下記の3種類の呼び出し方法があります。

importパターン1

推奨とされているimport記述でエイリアスの記述を省略した形式

//------ 呼び出しパターン1 ------
import libADefFuncAlias1 from "./libA";

//実行
libADefFuncAlias1 ();

importパターン2

明示的にエイリアス記述を明記する形式

//------ 呼び出しパターン2 ------
import { default as libADefFuncAlias2 } as lib from "./libA";

//実行
libADefFuncAlias2 ();

importパターン3

「*」でexportするファイル内の関数を全てインポートして実行（呼び出し）時にはエイリアス名.default()を記述

//------ 呼び出しパターン3 ------
import * as lib from "./libA";

//実行
lib.default();

Named exports（名前付き）

default以外のモジュールに対して個別の名前を付けてexportする場合の記述方法です。

exportする側のプログラム （libB.js）

export記述パターン1

export function func1() {
  return "this is func 1";
}

export const func2 = () =>  {
  return "this is func 2";
}

export記述パターン2

function func1() {
  return "this is func 1";
}

const func2 = () =>  {
  return "this is func 2";
}

export { func1, func2 };

importする側のプログラム

importパターン1

//------ 呼び出しパターン1 ------
import { func1, func2 } from "./libB";

//実行
func1();
func2();

importパターン2

//------ 呼び出しパターン2 ------
import * as libBAlias from "./libB";

//実行
libBAlias.func1();
libBAlias.func2();

参考サイト

export – JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

import – JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import