はじめに
JavaScript の import/export と require/module.exports の違いについてちゃんと理解していないと、いざという時に「どっちだっけ？」となりがちですよね。
僕も毎回軽く調べてなんとなく理解して「動いたしまあいいか...」となることが多いですが、時間が経つとまた忘れて調べ直す、ということを何度も繰り返してきました。さすがにそろそろちゃんと理解したいので、この記事にまとめてみました。
また、調べていくうちに書きたいことが多くなってしまったので、記事を前後編に分割する予定です。前編（この記事）ではモジュールの仕様について解説し、後編ではモジュールが実装されているブラウザや Node.js などでモジュールを使う方法を紹介します。
- 前編: 仕様編（この記事）
- ECMAScript と CommonJS のモジュール機能の仕様
- 後編: 実装編（後で書く）
- ブラウザ、Node.js、TypeScript などでモジュール機能を使う方法
個人の備忘録的な記事ですが、僕と同じように忘れっぽい人の役に立てば幸いです。
モジュールとは
モジュールとは何かをちゃんと説明しようとするとこの記事の主題から逸れるので割愛しますが、この記事では少し簡単に「プログラムを分割したまとまり」というふうに説明しておきます。モジュールの役割や効果的な使い方など、ぜひ調べてみてください。
「プログラムを分割したまとまり」であるモジュールを別のモジュールで使えるようにするためには、プログラミング言語や処理系に「モジュールを扱うための仕組み」が必要です。
（この仕組みのことを「モジュールシステム」「モジュール機構」「モジュール機能」 などと呼ばれることが多いですが、この記事では モジュール機能 と呼びます）
JavaScript が登場してからしばらくは、このモジュール機能が存在しなかったため、独自の仕様や拡張などが作られた結果複数のモジュール機能が存在する言語となりました。現在代表的な ECMAScript のモジュール機能 や CommonJS のモジュール機能だけでなく、他にも AMD や UMD などがあります。
この記事では特に「ECMAScript のモジュール機能」と「CommonJS のモジュール機能」について紹介します。
ECMAScript のモジュール機能
こちらは最近主流になりつつある、ECMAScript のモジュール機能についてです。
ECMAScript とは
ECMAScript は数ある JavaScript の仕様の中でも最も中心的な仕様です。TC39 という委員会が ECMAScript を策定しています。
ECMAScript にはさまざまなバージョンがあり、「ES5」「ES6」 のように表記する場合もあれば、ES6 以降は「ES2015」「ES2016」のように西暦で表記する場合もあります。（ES6 = ES2015）
ECMAScript Modules (通称 ES Modules, ESM)
ECMAScript で定義されているモジュール機能が ECMAScript Modules です。
ES6(ES2015) で追加されました。
構文としては、 export 宣言でエクスポートされたものを import 宣言でインポートして使うことができます。
export const bar = 0
import { bar } from 'foo'
構文の詳細を知りたい方は MDN などのドキュメントを参照してください。
CommonJS のモジュール機能
こちらは Node.js を中心に現在も利用されている、CommonJS のモジュール機能についてです。
CommonJS とは
CommonJS も JavaScript の仕様のひとつです。2009年ごろに JavaScript をサーバーで使うための仕様を作るために ServerJS というプロジェクトが立ち上がり、CommonJS に改名されました。
CommonJS Modules (通称 CommonJS, CJS)
CommonJS で定義されているモジュール機能が CommonJS Modules です。
どの時点で追加されたのかまでは厳密には調べてないですが、ECMAScript Modules が登場するよりも前の2009年ごろにはすでにあったようです。
構文としては、 exports にエクスポートしたいものを渡して、 require でインポートできます。
exports.bar = 0
※ Node.js では exports ではなく module.exports と書く場合が多いです。詳細は後編で。
const bar = require('foo').bar
ここまでのまとめ
JavaScript のモジュール機能の代表的な2つの仕様を紹介しました。
- ECMAScript のモジュール機能
- ES6(ES2015) で追加された
-
exportとimportを使う
- CommonJS のモジュール機能
- 2009年ごろから存在する
-
exportsとrequireを使う
前編はここまでです。後編では以下について書こうと思います。
- ブラウザやNode.js でモジュールを使うにはどうすればいいか
- Webpack, Babel, TypeScript などでモジュールはどのように扱われるか