モジュールと名前空間

TypeScriptでは、コードを整理し、再利用可能な単位として扱うために「モジュール」と「名前空間」という概念を提供しています。このセクションでは、モジュールの概要、ES ModulesとCommonJS、名前空間の使い方について説明します。

モジュールの概要

モジュールは、コードを分割し、再利用しやすくするための単位です。TypeScriptでは、ファイル単位でモジュールを定義し、必要な部分を他のファイルからインポート・エクスポートして使います。モジュールを使用することで、コードの可読性や保守性が向上し、名前の衝突を防ぐことができます。

モジュールは、exportとimportキーワードを使って、外部から使えるようにする関数やクラス、定数などをエクスポートしたり、他のファイルからインポートしたりします。

typescript

// mathUtils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14;

typescript

// main.ts
import { add, PI } from "./mathUtils";

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

この例では、mathUtils.tsファイルで関数addと定数PIをエクスポートし、main.tsファイルでそれらをインポートして使用しています。

ES ModulesとCommonJS

JavaScriptには複数のモジュールシステムが存在し、TypeScriptでは主にES ModulesとCommonJSの2つのモジュールシステムをサポートしています。

ES Modules

ES Modules（ESM）は、ECMAScript（JavaScript）の標準モジュールシステムです。importとexportキーワードを使ってモジュールのインポートとエクスポートを行います。現代のJavaScript環境（ブラウザやNode.jsなど）では、ESMが広くサポートされています。

typescript

// export.ts
export const greeting = "Hello, World!";

// import.ts
import { greeting } from "./export";
console.log(greeting); // Hello, World!

CommonJS

CommonJSは、主にNode.jsで使用されるモジュールシステムです。module.exportsを使ってモジュールをエクスポートし、requireを使ってインポートします。Node.jsでのサーバーサイド開発では長らくCommonJSが標準でしたが、現在はESMへの移行が進んでいます。

javascript

// export.js
module.exports = {
  greeting: "Hello, CommonJS!",
};

// import.js
const { greeting } = require("./export");
console.log(greeting); // Hello, CommonJS!

TypeScriptでは、tsconfig.jsonのmoduleオプションでどちらのモジュールシステムを使用するかを指定することができます。

json

{
  "compilerOptions": {
    "module": "commonjs"  // または "esnext" など
  }
}

名前空間の使い方

名前空間（Namespace）は、コードの構造を整理し、名前の衝突を避けるために使用されるもう一つの方法です。名前空間は複数のクラスや関数をまとめるためのロジック的な枠組みであり、モジュールと似ていますが、通常は大規模なアプリケーション内で内部的に使用されます。

名前空間を定義するには、namespaceキーワードを使います。

typescript

namespace Utility {
  export function log(message: string): void {
    console.log(message);
  }

  export function error(message: string): void {
    console.error(message);
  }
}

Utility.log("This is a log message."); // This is a log message.
Utility.error("This is an error message."); // This is an error message.

上記の例では、Utilityという名前空間を定義し、その中にlog関数とerror関数を定義しています。これらの関数は名前空間の外部からアクセス可能ですが、Utilityという接頭辞を付けることで他の関数や変数との名前の衝突を避けることができます。

名前空間を使用することで、関連する機能を論理的にグループ化し、より整理されたコードを書くことができます。しかし、名前空間はES Modulesに比べるとスコープがグローバルに広がることがあるため、最近のTypeScriptプロジェクトでは、外部との依存を持つコードにはES Modulesを使用することが推奨されます。

まとめ

モジュールと名前空間を使うことで、TypeScriptのコードをより整理し、再利用性の高い形に保つことができます。ES ModulesはJavaScriptの標準であり、モダンな開発では最も一般的に使用されるモジュールシステムです。名前空間は、主に内部的にコードを整理するために使われますが、最近のプロジェクトではES Modulesが推奨されています。これらの概念を使いこなすことで、TypeScriptの大規模なプロジェクトでもコードの管理がしやすくなります。