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

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

モジュール

利点

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

例

// 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は、モジュールと名前空間の要素をコードに取り込むための構文です。

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

// 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の使い分け

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

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

この例では、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}`);

説明

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

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

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

複数のモジュールを 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}`);