JavaScript モジュール

Volardev 編集部 April 18, 2026

1. モジュールとは？

モジュールとは、関数や値をエクスポート（export）、あるいはインポート（import）できるコードブロックのことです。

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

// "add" 関数をインポート
import { add } from './math.js';

let result = add(2, 3);

モジュールを使用することで、コードを別々のファイルに分割できるようになります。
モジュールは、モダンなJavaScriptにおける極めて重要な基本機能です。

2. モジュールファイル

JavaScriptのモジュールは通常はファイルですが、HTMLスクリプトとして記述することも可能です。

モジュールファイルは、import / export を使用する .js ファイルです。
モジュールスクリプトは、import / export を使用する HTML内のスクリプトです。

3. モジュールの使い方

モジュール同士で機能をやり取りするために、export と import を使用します。
type="module" 属性を指定した HTMLスクリプトは、モジュールとして扱われます。

モジュールファイル "math.js":

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

モジュールスクリプト:

<script type="module">

// add 関数をインポート
import { add } from './math.js';

let result = add(2, 3);

</script>

注意:

モジュールファイルは必ずサーバー上に配置する必要があります。

モジュールは HTTP(s) プロトコルでのみ動作します。
file:// プロトコルで開かれたウェブページでは、import / export を使用することはできません。

4. モジュールファイル "person.js"

// 名前（name）と年齢（age）をエクスポート
export const name = "Jesse";
export const age = 40;

5. モジュールスクリプト

<script type="module">

// 名前（name）と年齢（age）をインポート
import { name, age } from "./person.js";

</script>

6. エクスポート可能な要素

モジュールでは以下の要素をエクスポートできます：

変数（Variables）
関数（Functions）
オブジェクト（Objects）
クラス（Classes）

7. モジュールファイル "message.js"

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' は ' + age + '歳です。';
};

export default message;

8. モジュールスクリプト

<script type="module">
import message from "./message.js";
</script>

補足:
モジュールはデフォルトでストリクトモード（strict mode）で動作します。

9. なぜモジュールを使うのか？

9.1 コードの整理

モジュールはコードの整理に役立ちます。大規模なコードベースを、特定のタスクに特化した小さく自己完結したファイルに分割できます。これは大規模で複雑なアプリケーションにおいて不可欠です。

9.2 命名衝突の防止

モジュールが登場する前、開発者にはグローバルスコープしかありませんでした。これは「ネームスペース汚染（名前空間の汚染）」を引き起こし、無関係なコードが誤って他のグローバル変数を上書きしてしまうリスクがありました。モジュールはプライベートなスコープを持ちます。明示的にエクスポートされない限り、変数や関数がグローバルに公開されることはありません。

9.3 可読性の向上

モジュールによってコードの構造が改善され、特に大規模なプロジェクトやチーム環境において、コードの把握、理解、管理が容易になります。

9.4 容易な再利用性

モジュールは、アプリケーションの異なる部分や、全く新しいプロジェクト間でも簡単に再利用できます。あるファイルから関数や変数、オブジェクトをエクスポートし、別のファイルでインポートできるようにすることで、再利用性を促進します。これにより冗長なコードが排除され、より効率的な開発プロセスが実現します。

9.5 保守とデバッグの容易さ

コードを個別のモジュールに分割することで、アプリケーションの一部分における変更やバグ修正を特定のモジュール内に隔離でき、システム全体への影響を最小限に抑えることができます。これにより、プロジェクトの成長に合わせてコードベースの保守やスケーリングが容易になります。

9.6 開発効率の向上

モジュール化により、複数の開発者がコードベースの異なる部分を同時に、衝突のリスクを抑えて開発できるようになります。明確なモジュールの境界はコミュニケーションを円滑にし、既存のコードへの影響を最小限に抑えながら新機能を追加することを可能にします。

9.7 カプセル化とアイソレーション

モジュール内で定義された変数や関数はデフォルトでプライベートであり、明示的にエクスポートされた場合にのみ他のモジュールからアクセス可能になります。これによりコードのアイソレーション（分離）が強化され、意図しない副作用のリスクが軽減され、コードの論理的思考が容易になります。

9.8 依存関係管理の改善

モジュールは明示的な import および export ステートメントを使用して依存関係を管理します。これにより、アプリケーションの各パーツ間の関係や、外部ライブラリ・コンポーネントの管理が把握しやすくなります。
また、スクリプトが正しい順序でロードされることを手動で保証していた古い手法に比べ、モジュールシステムは遥かに信頼性が高いものです。