はじめに

Node.jsを使っている皆さんこんにちは。
あなたはクライアントのJavaScriptでCommonJSのexport / import、例えば

@js
// export
module.exports = {}

// import
const mod = require('mod')

のような形式です。
ですが、ブラウザではこのコードは動かないんです。
最近はその代わりとして、ESModuleという形式がよく使われています。

@js
// export
// 1:
export function exec(){}
export const pi = 3.14

// 2:
const pi = 3.14
const rand = Math.random()

export { pi, rand }

// 3:
export default function () {}

// import
// 1:
import { exec, pi } from 'mod'

// 2:
import { pi, rand } from 'mod'

// 3:
import ModName from 'mod'

このような形です。
このほかにもDynamic Importってのもあるんですが難しいのでここでは解説しません。

エクスポートについて

エクスポートには主に2種類あり、1 や2 のような名前付きエクスポートと3 のようなデフォルトエクスポートがあります。
主に機能が一つの場合はデフォルトエクスポートを使った方が良いですが、全てを名前付きエクスポートに統一するのも良いですね。

インポートについて

インポートも名前付きエクスポートとデフォルトエクスポートの2つをインポートする種類があります。
1 と2 が名前付きインポートで、3 はデフォルトインポートです。
デフォルトインポートは何の名前をつけても構いませんが、名前付きインポートはエクスポートで定義した名前で呼び出す必要があります。

終わりに

どうでしたでしょうか。
JavaScriptは現在ESModuleがデファクトスタンダードになっているので、ESModuleを使うのが無難かと思います。また、ブラウザでそのままHTMLのスクリプトタグに埋め込む場合、<script type='module'></script> のように、typeをmoduleにする必要があります。
みなさんもぜひESModuleライフを楽しみましょう！