TypeScriptプログラミング：モジュールと名前空間を使いこなしてコードを美しく整理

2024-04-14

TypeScriptにおけるモジュールと名前空間：インポートとRequireの詳細比較

モジュールは、関連するコードのまとまりを 1 つのファイルにまとめたものです。各モジュールは、独自のスコープを持ち、他のモジュールから公開されたシンボルのみを外部から利用できます。モジュールは、exportキーワードを使用して、公開するシンボルを明示的に定義します。

利点:

コードの再利用性を向上させる
名前空間によるグローバルスコープ汚染を回避する
コードを論理的に分割して管理しやすくする

例:

// shapes.ts
export class Circle {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  get area(): number {
    return Math.PI * this.radius * this.radius;
  }
}

export class Square {
  sideLength: number;

  constructor(sideLength: number) {
    this.sideLength = sideLength;
  }

  get area(): number {
    return this.sideLength * this.sideLength;
  }
}

名前空間は、グローバルスコープでシンボルを宣言するための方法です。名前空間内のシンボルにアクセスするには、名前空間修飾子を使用する必要があります。名前空間は、コードの整理と、異なるソースからのシンボルの衝突回避に役立ちます。

異なるソースからのシンボルの衝突を回避する
グローバルスコープを整理する
コードライブラリをより論理的に構成する

// shapes.ts
namespace Shapes {
  export class Circle {
    radius: number;

    constructor(radius: number) {
      this.radius = radius;
    }

    get area(): number {
      return Math.PI * this.radius * this.radius;
    }
  }

  export class Square {
    sideLength: number;

    constructor(sideLength: number) {
      this.sideLength = sideLength;
    }

    get area(): number {
      return this.sideLength * this.sideLength;
    }
  }
}

インポートとRequire

importとrequireは、モジュールと名前空間の要素をコードに取り込むための構文です。

import: モジュールシステムで使用される構文です。ES modulesとTypeScript modulesの両方をサポートしています。
require: CommonJSで使用される構文です。Node.jsなどのサーバーサイド開発で使用されます。

// index.ts
import { Circle, Square } from './shapes';

const circle = new Circle(10);
const square = new Square(5);

console.log(`Circle area: ${circle.area}`);
console.log(`Square area: ${square.area}`);

モジュールと名前空間、インポートとRequireの使い分け

一般的に、以下のような使い分けが推奨されます。

モジュール: コードの再利用性とモジュール性を高めたい場合、およびコードを論理的に分割して管理したい場合に使用します。
名前空間: 異なるソースからのシンボルの衝突を回避したい場合、およびグローバルスコープを整理したい場合に使用します。
import: モジュールシステムで使用されるコードでモジュール要素を取り込む場合に使用します。

モジュールと名前空間は、TypeScriptにおける重要な概念であり、コードを整理し、依存関係を管理するのに役立ちます。importとrequireは、モジュールと名前空間の要素をコードに取り込むための構文です。それぞれの長所と短所を理解し、状況に応じて適切なものを選択することが重要です。

モジュールの例

この例では、shapes.ts というモジュールを作成し、Circle と Square という 2 つのクラスを定義します。これらのクラスは、円の面積と正方形の面積を計算するメソッドを提供します。

// shapes.ts
export class Circle {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  get area(): number {
    return Math.PI * this.radius * this.radius;
  }
}

export class Square {
  sideLength: number;

  constructor(sideLength: number) {
    this.sideLength = sideLength;
  }

  get area(): number {
    return this.sideLength * this.sideLength;
  }
}

名前空間の例

// shapes.ts
namespace Shapes {
  export class Circle {
    radius: number;

    constructor(radius: number) {
      this.radius = radius;
    }

    get area(): number {
      return Math.PI * this.radius * this.radius;
    }
  }

  export class Square {
    sideLength: number;

    constructor(sideLength: number) {
      this.sideLength = sideLength;
    }

    get area(): number {
      return this.sideLength * this.sideLength;
    }
  }
}

インポートの例

この例では、index.ts ファイルで shapes.ts モジュールから Circle と Square クラスをインポートし、それらを使用して円の面積と正方形の面積を計算します。

// index.ts
import { Circle, Square } from './shapes';

const circle = new Circle(10);
const square = new Square(5);

console.log(`Circle area: ${circle.area}`);
console.log(`Square area: ${square.area}`);

Require の例

// shapes.js
const Circle = require('./Circle');
const Square = require('./Square');

const circle = new Circle(10);
const square = new Square(5);

console.log(`Circle area: ${circle.area}`);
console.log(`Square area: ${square.area}`);

説明

各例では、モジュールまたは名前空間を定義する方法と、import または require を使用してコードに取り込む方法を示します。
モジュールは、export キーワードを使用して公開されるシンボルを明示的に定義します。
名前空間は、グローバルスコープでシンボルを宣言するための方法です。
import は、モジュールシステムで使用される構文です。
require は、CommonJSで使用される構文です。

これらの例は、モジュール、名前空間、インポート、Require の基本的な使用方法を示しています。より複雑なシナリオについては、TypeScript ドキュメントを参照してください。

TypeScriptにおけるモジュールと名前空間のその他の使用方法

TypeScript では、主に以下の 3 種類のモジュールが使用されます。

ES modules: ECMAScript 標準のモジュールシステムです。import 文を使用してインポートします。
CommonJS modules: Node.js などのサーバーサイド開発で使用されるモジュールシステムです。require 文を使用してインポートします。
AMD modules: RequireJS などの非同期モジュールローダーで使用されるモジュールシステムです。define と require 文を使用してインポートします。

複数のモジュールを 1 つのモジュールに結合することができます。これにより、コードを整理し、依存関係を軽減することができます。

// index.ts
import { Circle } from './shapes/Circle';
import { Square } from './shapes/Square';

const circle = new Circle(10);
const square = new Square(5);

console.log(`Circle area: ${circle.area}`);
console.log(`Square area: ${square.area}`);

名前空間は階層構造にすることができます。これにより、コードをより論理的に整理することができます。

// shapes.ts
namespace Shapes {
  export namespace Geometry {
    export class Circle {
      radius: number;

      constructor(radius: number) {
        this.radius = radius;
      }

      get area(): number {
        return Math.PI * this.radius * this.radius;
      }
    }

    export class Square {
      sideLength: number;

      constructor(sideLength: number) {
        this.sideLength = sideLength;
      }

      get area(): number {
        return this.sideLength * this.sideLength;
      }
    }
  }
}

型エイリアスを使用して、モジュールまたは名前空間内の型の長い名前を短縮することができます。

// index.ts
import { Circle as MyCircle, Square as MySquare } from './shapes';

const circle = new MyCircle(10);
const square = new MySquare(5);

console.log(`Circle area: ${circle.area}`);
console.log(`Square area: ${square.area}`);