JavaScript基礎｜モジュールとは？必要性と使い方のまとめ

JavaScriptのモジュールについて、なぜ必要なのかどのように使用するかまとめ

4/24/2025

🌀JavaScriptのグローバル名前空間の汚染

プロジェクトが大きくなってくると一つのファイルにたくさんのコードが溜まってしまう。
それを解決するために、ファイルを分けることにした。

しかし、JavaScriptの名前空間（変数の命名）は一つだけ。
複数ファイルで同じ名前の変数や関数を定義すると、後から読み込まれたファイルの内容で上書きされてしまう。

// fileA.js
var counter = 0;

// fileB.js
var counter = 100;

console.log(counter); // どちらのcounterか分からない

この名前の衝突（名前空間の衝突）を解決するために、「modules（モジュール）」が生まれた。

🚀CommonJSの登場（モジュールのはじまり）

JavaScriptはもともとブラウザで動く言語で、ファイル間の読み込み（モジュール機能）はなかった。
そのため、スクリプトが増えるとさきほどの「名前空間の衝突」が発生。
複数人で同時作業をするには名前の重複は避けることが難しい。

そこで、Node.js の登場にあわせて作られたのがCommonJSという独自仕様のモジュールシステム。

CommonJS の特徴

  • require() を使ってモジュールを読み込む
  • module.exports で値を外に公開する
  • 同期的に読み込む（ファイルをその場で読み込む）
  • Node.js 環境で標準的に使われたモジュール形式
// add.js
function add(a, b) {
  return a + b;
}
module.exports = add;

// main.js
const add = require('./add');
console.log(add(2, 3)); // → ５が出力される

CommonJSの制限

IE などの旧ブラウザは ES Modules を理解できなかったため、ブラウザではそのまま使用することができない。
そのため、開発時にモジュールを使っても、本番では1ファイルにまとめる必要があった。→これが「bundle（バンドル）」という

バンドルについては下記記事を参照

JavaScript基礎｜パッケージ管理システム(NPM)、モジュール管理、ビルドの仕組み

❓ES Modulesの登場（モジュールの進化）

ES2015（ES6） で JavaScript に公式のモジュール仕様が追加された。ブラウザもネイティブ対応するようになっり（IEは非対応）、import / exportでブラウザでモジュールが使用できるようになった。

モジュール同士のデータのやり取り

1. user.js（データの定義）

// user.js
export const name = "いぬ";

name という変数を定義し、他のモジュールでも使えるように export（外部公開）している

2. index.js（データの利用）

import { name } from "./user.js";

document.body.textContent = name;

user.js から name を import（読み込み）して利用できる。このファイルがメインの実行ファイルになる。

3. index.html（HTMLファイル）

スクリプトタグにtype=“module”といれることで、名前空間がお互いに影響しなくなる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <!-- モジュールとして読み込む -->
  <script type="module" src="./index.js"></script>
</head>
<body></body>
</html>

モジュール化したものは遅延評価を受けることになる。type="module"とつけると、ブラウザは1番最後に読み込みをする。（例えhead内に記述をしたとしても最後に読み込む。）

⭐️import の2つの書き方

importの書き方にはnamed（名前付き）とdefault（デフォルト）がある。

🔹 1. 名前付き（Named Export / Import）

📝特徴：

  • 複数の値を export できる
  • 必ず 同じ名前で import しなければならない

animal.js

export const inu = "いぬ";
export const neko = "ねこ";

main.js

import { inu, neko } from "./animal.js";

document.body.innerHTML = `
  <p>好きな動物１：${inu}</p>
  <p>好きな動物２：${neko}</p>
`;

💡 ポイント

  • export const で複数のデータを公開できる
  • { inu, neko } のように 名前を一致させて import する

🔹 2. デフォルト（Default Export / Import）

📝特徴：

  • モジュールにつき 1つだけ export できる
  • import 時に 自由な名前 をつけられる
  • import 時に{}（中かっこ）を使わない

favorite.js

export default "ねこ";

main.js

import ichiban from "./favorite.js";

document.body.textContent = `一番好きな動物は：${ichiban}`;

💡 ポイント

  • export default で1つだけエクスポート
  • import 時は 好きな名前（例：ichiban） をつけてもいい

使い分け

  • named：いろんな関数や定数を一括管理（便利・拡張しやすい）
  • default：ファイルの主役を1つにしたい（読みやすく保守しやすい）

✅現代での主な使い方（フロントエンド）

🔹 ブラウザ（フロントエンド）

  • ESModules が主流（<script type="module"> で読み込む）
  • React / Vue などの開発時は Webpack や Vite を使って モジュールをバンドル

✔ ESModulesの使い方（ブラウザ）

<!-- index.html -->
<script type="module" src="./main.js"></script>
// animal.js
export const name = "いぬ";

// main.js
import { name } from "./animal.js";
document.body.textContent = name;