JavaScript

この記事では「JavaScript」について、基本の意味と使い方を初心者向けにやさしく説明します。

It’s a way in Node.js to use import and export like in the browser, so you can split your code into small files and keep everything easy to read and work with.

Node.js

Node.jsでブラウザと同じように import と export が使え、ファイルを分けて読み書きしながら分かりやすく作れる仕組みのことです。

Node.js の ESM とは？

JavaScript のプログラムをファイルごとに分けて使う仕組みを「モジュール」と呼びます
Node.js では、かつて require() / module.exports という独自方式でモジュールを扱っていました
しかしブラウザでは import / export というモジュール方式が標準です

ESM（ECMAScript Modules）とは「import / export を使ってモジュールを扱う、JavaScriptの標準ルール」のことです。

つまり ESM は…

ブラウザと Node.js の書き方を揃えられる
追加のツールなしで import が書ける
将来性が高い（標準仕様）

例：ESM の書き方

moduleA.js

JavaScript

export function hello() {
    console.log("Hello!");
}

main.js

JavaScript

import { hello } from "./moduleA.js";
hello();

ブラウザでも Node.js でも同じように動く、というのがメリット。

Node.jsでESMを使うには？

Node.js は昔からの require 方式（CommonJS）をサポートしていたので、ESM を使うためには「これ ESM で書いてますよ！」と Node.js に示す必要があります。

方法は2つ。

方法①：package.json に "type": "module"

JSON

{
	"type": "module"
}

これで .js が ESM として扱われる。

方法②：拡張子を .mjs にする

JavaScript

import something from "./other.mjs";

.mjs は自動的に ESM として扱われる。

require と import どっちを使えばいいの？

結論：

新しく書くコードは import/export（ESM）でOK
ただし、古いライブラリでは require が残っていることがある
実務でも ESM に移行が進んでいる

よくあるつまずき例

JavaScript

import express from "express";

を使いたいのに

JavaScript

SyntaxError: Cannot use import statement outside a module

が出る → "type": "module" を忘れているケースが多い。

正確な説明

ECMAScript Modules (ESM) は ECMAScript 2015 (ES6) で規定された公式モジュール仕様
Node.js は長年 CommonJS 方式（require / module.exports）を採用していたが、Node.js v12 以降で ESM が本格的に利用可能になった
import / export は静的解析が可能なため、ツリーシェイキング、事前読み込み、最適化などの長所がある
.mjs または "type": "module" が ESM のシグナル
require と import は混在できるが制約がある（特に default export や相互読み込み）