大規模なプロジェクトを構築する際には、コードの整理や再利用性を高めるために、モジュールや名前空間を効果的に活用することが重要です。TypeScriptでは、ES6（ES2015）で導入されたモジュール機能を使って、コードをファイル単位で分割し、他のファイルとの依存関係を明確にできます。また、名前空間（以前は内部モジュールと呼ばれていた）は、関連するコードをグループ化し、名前の衝突を防ぐために使用します。
この章では、モジュールと名前空間の概念、使い方、そしてそれらを活用して大規模なプロジェクトを効率的に管理する方法について解説します。
9.1 モジュールとは？
モジュールとは、コードをファイル単位で分割して管理するための仕組みです。モジュールを使用すると、必要な部分だけを他のファイルにエクスポートし、必要に応じてインポートすることができ、依存関係を明確にしながら、再利用性の高いコードを作成することが可能になります。
TypeScriptでは、モジュールシステムはJavaScriptのES6モジュールをベースにしており、**importやexport**を使ってコードをやり取りします。
9.2 モジュールのエクスポートとインポート
TypeScriptでモジュールを活用するためには、他のファイルに公開したいコードを**エクスポート（export）し、それを必要な場所でインポート（import）**する必要があります。
9.2.1 エクスポートの方法
モジュールのエクスポートには、デフォルトエクスポートと名前付きエクスポートの2種類があります。どちらの方法も、関数、クラス、変数、型など、どんな要素でもエクスポートできます。
名前付きエクスポート
名前付きエクスポートでは、エクスポートする要素に名前をつけ、その名前で他のファイルからインポートできます。
// mathUtils.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
この例では、addとsubtractという関数が名前付きでエクスポートされています。
デフォルトエクスポート
デフォルトエクスポートでは、モジュールから1つのエクスポートをデフォルトとして指定できます。デフォルトエクスポートされたものは、インポート時に任意の名前をつけてインポートできます。
// calculator.ts
export default function multiply(a: number, b: number): number {
return a * b;
}
ここでは、multiply関数がデフォルトでエクスポートされています。
9.2.2 インポートの方法
エクスポートされたモジュールは、他のファイルでインポートして使用できます。インポートも、名前付きインポートとデフォルトインポートの2種類があります。
名前付きインポート
名前付きでエクスポートされたものをインポートする際には、**import { ... } from "..."**という構文を使います。
// app.ts
import { add, subtract } from "./mathUtils";
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
ここでは、mathUtils.tsからaddとsubtract関数をインポートし、それぞれを使用しています。
デフォルトインポート
デフォルトエクスポートをインポートする場合は、import ... from "..."の形式で行います。インポート時に任意の名前をつけることが可能です。
// app.ts
import multiply from "./calculator";
console.log(multiply(5, 3)); // 15
この例では、calculator.tsのデフォルトエクスポートであるmultiply関数をインポートしています。
9.2.3 インポートのまとめ
名前付きエクスポートとデフォルトエクスポートを同時にインポートすることも可能です。
// app.ts
import multiply, { add, subtract } from "./mathUtils";
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
console.log(multiply(5, 3)); // 15
このように、デフォルトエクスポートと名前付きエクスポートを組み合わせて使うことで、必要な要素だけを効率的にインポートできます。
9.3 モジュールの利点
モジュールシステムを使用することで、プロジェクト全体をより管理しやすく、再利用可能な部品に分割することができます。特に、次の利点が重要です。
- 再利用性の向上：モジュールは他のファイルやプロジェクトでも再利用できるため、同じコードを何度も書く必要がありません。
- 依存関係の明確化：モジュールをインポートすることで、どの部分がどのモジュールに依存しているかが明確になり、保守性が向上します。
- 名前空間の汚染防止：モジュールはそれぞれ独立したスコープを持つため、グローバルスコープを汚染することなく、安全にコードを追加できます。
9.4 名前空間とは？
名前空間（namespace）は、関連するコードをグループ化し、名前の衝突を防ぐための仕組みです。TypeScriptの名前空間は、複数の関数や変数、クラスなどをまとめて一つの論理的な単位として扱うことができ、特に大規模なプロジェクトで役立ちます。
名前空間はモジュールとは異なり、TypeScriptのコンパイル後にJavaScriptの標準的なモジュールシステムに変換されるわけではなく、単にコードを整理するための仕組みとして使われます。
9.4.1 名前空間の定義
名前空間を定義するには、namespaceキーワードを使います。名前空間内に定義されたメンバーは、その名前空間の外部からアクセスするためには、名前空間名を使ってアクセスする必要があります。
namespace Geometry {
export function calculateArea(radius: number): number {
return Math.PI * radius * radius;
}
export function calculateCircumference(radius: number): number {
return 2 * Math.PI * radius;
}
}
console.log(Geometry.calculateArea(5)); // 78.5398
console.log(Geometry.calculateCircumference(5)); // 31.4159
この例では、Geometryという名前空間を定義し、その中に2つの関数を含めています。名前空間内の要素に外部からアクセスするためには、**export**を使ってエクスポートする必要があります。
9.4.2 名前空間の分割
名前空間は、複数のファイルに分割することもできます。大規模なプロジェクトでは、名前空間をファイル単位で分割することで、コードの管理がしやすくなります。
// shapes.ts
namespace Shapes {
export class Circle {
constructor(public radius: number) {}
area(): number {
return Math.PI * this.radius * this.radius;
}
}
}
// app.ts
/// <reference path="shapes.ts" />
let circle = new Shapes.Circle(10);
console.log(circle.area()); // 314.159
/// <reference path="..." />ディレクティブを使って、外部の名前空間を参照することで、名前空間を複数のファイルに分割しながら使用できます。
9.4.3 名前空間とモジュールの違い
名前空間は、TypeScriptの古いコードベースやブラウザ環境でのコード整理に適しており、モジュールはES6ベースのモジュールシステムで、サーバサイドやモダンなフロントエンド開発で使われるのが一般的です。
- 名前空間は、グローバルスコープに影響を与えないようにローカルスコープを作成するためのツール。
- モジュールは、ファイル単位でコードを分割して、他のファイルからインポートして使用するための仕組み。
モダンなJavaScript開発では、基本的にモジュールが推奨されていますが、名前空間は特定の状況で有用です。
9.5 実践的なモジュールと名前空間の使い方
モジュールと名前空間は、さまざまな状況で活用できます。ここでは、いくつかの実践的な使い方を紹介します。
9.5.1 外部ライブラリの利用
外部ライブラリをTypeScriptで使用する際、型定義ファイル（.d.ts）を利用して、ライブラリの型をインポートできます。型定義ファイルが提供されているライブラリであれば、モジュールの一部としてインポートし、型チェックを行いながら安全に利用できます。
// 外部ライブラリ lodash の使用例
import * as _ from "lodash";
let numbers = [1, 2, 3, 4];
let shuffled = _.shuffle(numbers);
console.log(shuffled); // シャッフルされた配列
このように、外部ライブラリの機能をインポートしつつ、型安全なコードを保つことができます。
9.5.2 モジュールの再エクスポート
複数のモジュールからエクスポートされた要素を、さらにまとめて再エクスポートすることで、便利なAPIを提供することができます。これにより、複数のモジュールを統一されたインターフェースで利用できます。
// shapes/index.ts
export { Circle } from "./circle";
export { Square } from "./square";
// app.ts
import { Circle, Square } from "./shapes";
let circle = new Circle(10);
let square = new Square(5);
console.log(circle.area());
console.log(square.area());
まとめ
この章では、TypeScriptにおけるモジュールと名前空間について学びました。モジュールを使うことで、コードを再利用しやすく、依存関係を明確に整理できるようになります。また、名前空間を使ってコードをグループ化することで、大規模なプロジェクトでも管理しやすい構造を作ることができます。モジュールと名前空間を適切に使い分けることで、プロジェクトのスケーラビリティと保守性を向上させることができます。
