JavaScript 逆引き集 | Module（ESM）インポート

Module（ESM）インポート — import fs from 'fs'（環境による）

JavaScript には モジュール という仕組みがあり、コードを分割して再利用できます。
ESM（ECMAScript Modules）は import / export を使う書き方で、ブラウザや Node.js で利用できます。ただし 環境によって使い方が少し違うので注意が必要です。

基本の書き方（ESM）

// 他のファイルから関数や変数をインポート
import { hello } from './utils.js';

hello(); // utils.js 内の関数を呼び出す

// 他のファイルから関数や変数をインポート
import { hello } from './utils.js';

hello(); // utils.js 内の関数を呼び出す

• import ... from '...' でモジュールを読み込む。
• export で外部に公開する。

Node.js 環境での注意点

Node.js では従来 CommonJS (require) が使われていましたが、今は ESM もサポートされています。

CommonJS（従来）

const fs = require('fs');
const data = fs.readFileSync('file.txt', 'utf-8');
console.log(data);

const fs = require('fs');
const data = fs.readFileSync('file.txt', 'utf-8');
console.log(data);

ESM（新しい書き方）

import fs from 'fs';

const data = fs.readFileSync('file.txt', 'utf-8');
console.log(data);

import fs from 'fs';

const data = fs.readFileSync('file.txt', 'utf-8');
console.log(data);

• 注意: Node.js で ESM を使うには以下のいずれかが必要です。
  • package.json に "type": "module" を書く
  • ファイル拡張子を .mjs にする

ブラウザ環境での使い方

ブラウザでは fs モジュールは使えません（ファイルシステムに直接アクセスできないため）。
代わりに自分で作ったモジュールをインポートします。

utils.js

export function hello() {
  console.log("こんにちは、モジュール！");
}

export function hello() {
  console.log("こんにちは、モジュール！");
}

main.js

import { hello } from './utils.js';
hello();

import { hello } from './utils.js';
hello();

HTMLで読み込む

<script type="module" src="main.js"></script>

<script type="module" src="main.js"></script>

• type="module" を付けるとブラウザが ESM として読み込む。

よく使うテンプレート集

デフォルトエクスポート

// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import add from './math.js';
console.log(add(2, 3));

// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import add from './math.js';
console.log(add(2, 3));

名前付きエクスポート

// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

// main.js
import { add, sub } from './math.js';
console.log(add(5, 2), sub(5, 2));

// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

// main.js
import { add, sub } from './math.js';
console.log(add(5, 2), sub(5, 2));

全部まとめてインポート

import * as math from './math.js';
console.log(math.add(1, 2), math.sub(3, 1));

import * as math from './math.js';
console.log(math.add(1, 2), math.sub(3, 1));

例題: ファイル読み込み（Node.js）

// Node.js 環境で "type": "module" を設定済み
import fs from 'fs';

const text = fs.readFileSync('hello.txt', 'utf-8');
console.log("ファイル内容:", text);

// Node.js 環境で "type": "module" を設定済み
import fs from 'fs';

const text = fs.readFileSync('hello.txt', 'utf-8');
console.log("ファイル内容:", text);

• 効果: hello.txt の内容を読み込んで表示。
• 注意: ブラウザでは使えない。Node.js 専用。

実務でのコツ

• 環境依存:
  • Node.js → import を使うには "type": "module" が必要。
  • ブラウザ → type="module" を <script> に付ける。
• fs モジュール: Node.js 専用。ブラウザでは使えない。
• 構造化: モジュールを分けるとコードが整理され、再利用しやすい。
• 互換性: 古いコードは require を使っていることが多い。新規は import を推奨。

練習問題（モジュール分割）

1. math.js に add と sub 関数を export する。
2. main.js で import して計算結果を表示する。
3. HTMLで <script type="module" src="main.js"> を読み込む。

• 効果: ブラウザでモジュール分割を体験できる。

直感的な指針

• import / export = コードを分けて再利用する仕組み。
• Node.js では設定が必要、ブラウザでは <script type="module">。
• fs は Node.js 専用。ブラウザでは使えない。
• 初心者はまず「自作モジュールを分けてインポート」から練習すると理解が深まる。