モジュールとは｜基礎を学ぶ

このレッスンで分かること

モジュール はファイル単位で機能を分割する仕組み

export で外部公開、import で取り込み、 ES Modules (ESM) が現代標準

CommonJS (require / module.exports) は Node の歴史的形式、今も現役

ブラウザでも <script type="module"> で ESM が直接使える

モジュールとは

モジュールの概念とimport/exportの基本を学ぼう。本レッスンでは、モジュールの基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

モジュールとは

コードをファイルに分割して整理する仕組み、それがモジュールです。

なぜモジュールが必要か

1つのファイルに全てのコードを書くと、以下の問題が発生します。

可読性の低下は数千行のファイルは理解が困難
名前の衝突はグローバルな変数名が被る
再利用の困難は別プロジェクトでコードを使い回しにくい

import/export の基本

JavaScript

// math.js - 関数をエクスポート
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export const PI = 3.14159;

JavaScript

// main.js - 関数をインポート
import { add, subtract, PI } from './math.js';

console.log(add(2, 3));      // 5
console.log(subtract(10, 4)); // 6
console.log(PI);              // 3.14159

ESModules と CommonJS

JavaScriptには2つのモジュールシステムがあります。

JavaScript

// ESModules（現在の標準）
import { func } from './module.js';
export function func() {}

// CommonJS（Node.jsの従来方式）
const { func } = require('./module');
module.exports = { func };

特徴	ESModules	CommonJS
構文	import/export	require/module.exports
読み込み	静的（コンパイル時）	動的（実行時）
環境	ブラウザ + Node.js	Node.js
トップレベルawait	対応	非対応

ブラウザでのモジュール使用

HTMLでtype="module"を指定するとESModulesが使えます。

HTML

<!-- type="module" が必要 -->
<script type="module" src="main.js"></script>

モジュールスクリプトの特徴は以下のとおりです。

自動的にstrictモードになる
各モジュールは独自のスコープを持つ（グローバル汚染なし）
同じモジュールは一度だけ評価される

モジュールの利点まとめ

名前空間の分離は変数名の衝突を防ぐ
依存関係の明確化はimportで何を使っているか一目瞭然
再利用性は共通ロジックを別ファイルに切り出せる
テスタビリティは各モジュールを単体でテストしやすい

JavaScript

//  良い設計：関心ごとに分割
import { validateEmail } from './validators.js';
import { sendEmail } from './email.js';
import { logAction } from './logger.js';

//  悪い設計：1ファイルに全て
// validate, send, log が全て同じファイルに...

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

React コンポーネント分割 ─ 1 ファイル 1 コンポーネント、export default Button
ライブラリ公開 ─ npm パッケージは ESM + CJS の両対応が主流
設定の分離 ─ config.js db.js routes.js のように関心ごとに分ける
dynamic import ─ import("./heavy.js") で遅延ロード、コード分割

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

循環インポート ─ A → B → A の循環は undefined 参照になる、依存方向を整理
named export と default export の混乱 ─ どちらを使うかチームでルール統一
バンドラー固有の構文 ─ webpack の require.context などは可搬性が低い
import * as foo ─ 必要なものだけ named import で取るほうが tree-shaking に有利

パフォーマンス考慮事項

tree-shaking ─ ESM の static 構造で未使用 export を削除、バンドルサイズ削減
dynamic import ─ 初回ロードを軽量化、ルートごとに分割
バンドラの最適化 ─ webpack / esbuild / Rollup が ESM 前提の最適化を行う
Top-level await ─ ESM では使えるが、CJS では不可。互換性に注意

この章のポイント

ここまでの要点 ESM (export / import) が現代標準、CJS (require / module.exports) は Node の歴史。tree-shaking と dynamic import でパフォーマンス向上。

よくある質問

Q. 実務ではどんな場面でこの知識を使いますか？

A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。

Q. コードレビューで指摘されやすいポイントは？

A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。

Q. 次に学ぶべき内容は何ですか？

A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。

次のレッスン

次は named exportとdefault export で、モジュールの概念とimport/exportの基本を学ぼうを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

モジュールとはの要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. モジュールとはとは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン