JavaScriptのモジュール: コード分割と再利用の基礎

jsコード JavaScript

現代のWeb開発において、コードを効率的に管理し、再利用可能にする仕組みは不可欠です。JavaScriptのモジュールシステムは、コード分割の基盤を提供し、シンプルかつ強力な開発環境を構築するのに役立ちます。

本記事では、JavaScriptのモジュールについて、その基礎から応用までを詳しく解説します。

モジュールの基本概念

モジュールとは、再利用可能なコードの単位を指します。
ファイルごとにコードを分割し、他のファイルに取り込むことで、アプリケーション全体を効率的に構築・管理できます。

主な特徴

  • モジュールスコープ: ファイルごとに独立したスコープがあり、変数や関数がグローバル環境に影響を与えない。
  • 依存性管理: モジュール間の関係を明確にし、他のコードに依存せず個々のモジュールをテスト可能。

モジュールの基本構文

モジュールとして作成した機能は、エクスポートすることにより、他のファイルからインポートして使用できるようになります。

エクスポートする方法は主に2通りあり、「名前付きエクスポート」と「デフォルトエクスポート」です。
名前付きエクスポートは複数の値や関数をエクスポート可能で、デフォルトエクスポートでは1つのみエクスポートできます。

名前付きエクスポート

モジュール内で複数の値や関数をエクスポートし、他のファイルでインポート可能にする方法です。

module.js
export const greeting = "Hello";
export function sayHello() {
  console.log(`${greeting}!`);
}
main.js
import { greeting, sayHello } from './module.js';
sayHello(); // "Hello!"
console.log(greeting); // "Hello"

VS Codeのターミナルで実行してみると、以下のような結果になります。
エクスクラメーションマーク「!」付のSayHello関数の結果と、エクスクラメーションマーク無しの変数greetingの値の両方が表示されています。

VS Code ターミナル
node main.js 👈実行コマンド
Hello!
Hello

デフォルトエクスポート

1つの値や関数をモジュールのデフォルトとしてエクスポートする方法です。
デフォルトエクスポートの書き方は2通りあります。

module.js
export default function sayHello() {
  console.log("Hello, default!");
}
module.js
// 別の書き方👇
function func() {
  console.log("Hello, default!");
}
// この書き方の場合、名前を任意に変更できる
export default sayHello;
main.js
import sayHello from './module.js';
sayHello(); // "Hello, default!"

動的インポート

動的インポートにより、必要なタイミングでモジュールをロードし、アプリケーションのパフォーマンスを向上させることができます。

import('./module.js').then(module => {
  module.sayHello();
});

動的インポートの主な利点は次の通りです。

  • 必要に応じてモジュールをロードするため、初期ロード時間を短縮できる。
  • 特定条件でモジュールを動的に切り替える柔軟性を持たせられる。

Node.jsのモジュールシステム

Node.jsでは、JavaScriptのモジュールシステムに加え、独自の仕組みとしてCommonJSが存在します。

CommonJSの基本構文

require と module.exports を使ってファイルをインポート・エクスポートする仕組みです。

module.js
module.exports = function sayHello() {
  console.log("Hello from CommonJS!");
}
main.js
const sayHello = require('./module.js');
sayHello(); // "Hello from CommonJS!"

ESモジュールとの違い

  • CommonJSはNode.jsで広く使用されていますが、現在の標準はESモジュール（import/export）の方です。
  • ESモジュールは非同期ロードをサポートしており、ブラウザとサーバーの両方で動作可能です。

モジュールスコープ

モジュール内の変数や関数はグローバルスコープから隔離されています。これにより、以下の利点があります。

  • 変数の衝突を防ぐ: 独立したスコープにより、異なるモジュール間での競合が発生しない。
  • セキュリティ向上: 外部からモジュールの内部が変更されるリスクを減少させられる。

モジュールバンドラーの活用

JavaScriptモジュールを効率的に管理するために、WebpackやViteなどのモジュールバンドラーを使用できます。

モジュールバンドラーとは

モジュールをバンドルする（束ねる）ものです。

JavaScriptファイルやCSSファイル、画像ファイルなどの、静的アセットをひとまとめにバンドル化するツールの総称で、「ビルドツール」と呼ばれる場合もあります。

Webpackの特徴

  • 2025年3月現在、最も広く使用されているモジュールバンドラー。
  • 高度なカスタマイズ性を提供。
  • 大規模プロジェクトにも対応可能。

Viteの特徴

  • 軽量で高速。
  • 開発速度を重視したプロジェクトに最適。
  • 開発時と本番ビルド時で異なるアプローチを取っており、本番ビルドの際には内部的にRollupを活用している。

まとめ

JavaScriptのモジュールシステムは、コードの分割、再利用、依存性の管理を可能にする強力な機能です。
システムの規模が大きくなればなるほど、不可欠な知識になります。

まずは本記事で扱っている基礎知識をしっかりと押さえていただければと思います。

スポンサーリンク

コメント

タイトルとURLをコピーしました