JavaScriptのモジュールとは？ファイル分割と再利用を可能にする仕組みを解説

JavaScriptのコードが大きくなると、1つのファイルですべてを管理するのは大変です。
そんなときに役立つのが モジュール（module） という仕組みです。

モジュールを使えば、コードをファイルごとに分けて管理し、必要な部分だけを読み込んで使うことができます。

モジュールとは？

モジュールとは、JavaScriptのコードを機能ごとにファイル単位で分割し、必要に応じてインポート・エクスポートできる仕組みです。

主なメリット

• コードの整理がしやすい
• 再利用性が高まる
• スコープが限定されているため安全

基本構文：エクスポートとインポート

エクスポート（他のファイルで使えるようにする）

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

export const PI = 3.14;

インポート（他のファイルから取り込む）

// main.js
import { add, PI } from "./math.js";

console.log(add(2, 3)); // 5
console.log(PI);        // 3.14

デフォルトエクスポート

1つのモジュールに対して、1つだけ「デフォルト」でエクスポートすることも可能です。

// message.js
export default function() {
  console.log("こんにちは！");
}

// main.js
import greet from "./message.js";
greet(); // こんにちは！

モジュールを使う際の注意点

• モジュールを使うファイルは <script type="module"> で読み込む必要がある
• ファイル拡張子（例：.js）を明示的に指定する
• 相対パス（./や../）を正しく書く必要がある
• モジュール内の変数や関数はデフォルトでブロックスコープになる（グローバル汚染なし）

HTMLでの読み込み例

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

名前の変更（別名インポート）

import { add as sum } from "./math.js";
console.log(sum(1, 2)); // 3

まとめ

• モジュールはコードを分割・再利用するための仕組み
• export で外部に公開、import で読み込み
• default エクスポートも可能
• type="module" を使ってHTMLから読み込む
• 名前変更や一部だけの読み込みも柔軟に対応

モジュールは、保守しやすく再利用しやすいJavaScriptのコードを書くために欠かせない仕組みです。
小さなモジュールから始めて、プロジェクト全体をスッキリ整理していきましょう。