TypeScript ファイルで JavaScript モジュールをスマートにインポート！ CommonJS と ES Module の徹底比較

2024-04-22

JavaScript モジュールを TypeScript ファイルにインポートする方法

TypeScript で JavaScript モジュールをインポートするには、主に以下の 2 つの方法があります。

CommonJS 形式
ES Module 形式

それぞれの形式について、詳細と利点・欠点、そして実際にどのようにインポートするかを見ていきましょう。

詳細

CommonJS 形式は、Node.js でよく使用されるモジュールシステムです。 require() 関数を使用してモジュールをインポートし、モジュール内のオブジェクトや関数を直接使用できます。

利点

Node.js との互換性が高い
既存の JavaScript ライブラリを簡単に利用できる

欠点

TypeScript の型システムの恩恵を受けられない
コードが冗長になりがち

インポート方法

const myModule = require('./path/to/myModule');

// モジュール内のオブジェクトや関数を直接使用
console.log(myModule.myFunction());

ES Module 形式は、より新しい JavaScript モジュールシステムです。 import キーワードを使用してモジュールをインポートし、モジュール内のオブジェクトや関数を名前付きで利用できます。

TypeScript の型システムとシームレスに連携できる
コードがより読みやすく、保守しやすい

Node.js 12 以前ではサポートされていない
一部の古い JavaScript ライブラリはまだ ES Module 形式に対応していない

import { myFunction } from './path/to/myModule';

// モジュール内のオブジェクトや関数を名前付きで利用
console.log(myFunction());

Protractor は、Angular やその他の Web アプリケーションをテストするための自動化フレームワークです。Protractor では、JavaScript モジュールを TypeScript ファイルにインポートする方法と同じように、テストスクリプトに JavaScript モジュールをインポートすることができます。

例

import { browser, by, element } from 'protractor';

describe('My App', () => {
  beforeEach(() => {
    browser.get('https://my-app.com');
  });

  it('should have a title', () => {
    expect(browser.getTitle()).toEqual('My App');
  });
});

TypeScript で JavaScript モジュールをインポートするには、CommonJS 形式と ES Module 形式の 2 つの方法があります。それぞれの形式には利点と欠点があるため、プロジェクトの要件に合わせて適切な形式を選択することが重要です。

例:

// myModule.js
function myFunction() {
  console.log('Hello from CommonJS!');
}

module.exports = {
  myFunction,
};

// index.ts
const myModule = require('./myModule');

console.log(myModule.myFunction()); // Hello from CommonJS!

// myModule.js
export function myFunction() {
  console.log('Hello from ES Module!');
}

// index.ts
import { myFunction } from './myModule';

myFunction(); // Hello from ES Module!

Protractor での利用

// spec.ts
import { browser, by, element } from 'protractor';

describe('My App', () => {
  beforeEach(() => {
    browser.get('https://my-app.com');
  });

  it('should have a title', () => {
    expect(browser.getTitle()).toEqual('My App');
  });
});

説明

myModule.js ファイル: myFunction 関数を含む JavaScript モジュールを定義します。
index.ts ファイル: require() 関数を使用して myModule.js モジュールをインポートし、myFunction 関数を呼び出します。

spec.ts ファイル: Protractor のテストスクリプトを定義します。
browser、by、element オブジェクトは、Protractor によって提供される標準のオブジェクトであり、テストスクリプト内で Web ブラウザと要素を操作するために使用されます。

補足

これらのサンプルコードは、あくまでも基本的な例です。実際のプロジェクトでは、より複雑なモジュール構造や、さまざまなインポートテクニックを使用する可能性があります。
TypeScript の最新機能や、Protractor のテストスクリプトの書き方に関する詳細については、それぞれの公式ドキュメントを参照してください。

JavaScript モジュールを TypeScript ファイルにインポートするその他の方法

TypeScript トリプルスラッシュ参照

TypeScript 2.9 以降では、トリプルスラッシュ参照と呼ばれる新しい機能を使用して、JavaScript モジュールをインポートすることができます。この方法は、CommonJS 形式と ES Module 形式の両方のモジュールをインポートする際に役立ちます。

/// <reference path="./path/to/myModule.d.ts" />

import { myFunction } from './path/to/myModule';

myFunction();

/// <reference path="..."> コメントは、TypeScript コンパイラに特定の JavaScript ファイルの型定義ファイルをロードするように指示します。
型定義ファイルは、JavaScript モジュールの公開 API に関する情報を提供します。
TypeScript コンパイラは、型定義ファイルを使用して、インポートされたモジュールの型を検証します。

AMD (Asynchronous Module Definition) は、JavaScript モジュールのもう 1 つの形式です。RequireJS などのライブラリで使用されることが多いです。

define(['require', './path/to/myModule'], function (require, myModule) {
  myModule.myFunction();
});

define() 関数は、AMD モジュールを定義するために使用されます。
第 1 引数は、依存関係のリストです。
第 2 引数は、モジュールファクトリ関数です。
モジュールファクトリ関数は、依存関係を使用してモジュールのロジックを実装します。

SystemJS は、ブラウザで JavaScript モジュールをロードおよび実行するためのモジュールローダーです。

<script src="https://unpkg.com/systemjs@latest/dist/system.js"></script>

<script>
  System.import('./path/to/myModule').then(function (myModule) {
    myModule.myFunction();
  });
</script>