TypeScriptのrequireメソッド入門！15選の詳細サンプルコードで解説

はじめに
●TypeScriptのrequireメソッドとは
- ○requireメソッドの基本
●requireメソッドの使い方
●requireメソッドの応用例
●注意点と対処法
- ○サンプルコード9：型定義がないモジュールのインポート
- ○サンプルコード10：循環参照を避ける方法
●カスタマイズ方法
まとめ

はじめに

TypeScriptはJavaScriptのスーパーセットとして知られ、静的型付けの機能を持つことで、大規模開発や品質の高いコードの実現をサポートします。

TypeScriptの特徴的な機能のひとつに、モジュールシステムがあります。

そして、その中でのキーメソッドとして「requireメソッド」が挙げられます。

この記事では、TypeScriptのrequireメソッドについての詳細な説明を行い、その基本的な使い方から応用的な使い方までをサンプルコードを交えて徹底的に解説していきます。

初心者の方でも安心して読み進められるよう、各サンプルコードには詳細な説明を添えています。

●TypeScriptのrequireメソッドとは

JavaScriptの世界では、モジュールという概念を用いて、コードの再利用や管理を容易にするための機能が提供されています。

TypeScriptもその特徴を引き継ぎつつ、独自の強化を施しています。

requireメソッドは、CommonJSスタイルのモジュールインポートをサポートするためのメソッドとして知られています。

このコードでは、外部モジュールを取り込むためにrequireメソッドを使用しています。

具体的には、モジュールのファイルパスを指定することで、そのモジュールの機能や変数を現在のスクリプト内で利用することができます。

○requireメソッドの基本

TypeScriptでのrequireメソッドの基本的な使い方はJavaScriptのそれと非常に似ています。

しかし、TypeScriptでは静的型付けが強化されているため、インポートするモジュールの型情報も考慮する必要があります。

const moduleA = require('./moduleA');

このコードでは、カレントディレクトリに存在するmoduleA.jsというファイルをインポートしています。

moduleAという変数を通じて、moduleA.js内の公開されている関数や変数を利用することができます。

このコードを実行すると、moduleA.jsが提供する機能をカレントファイルで使用することが可能となります。

ただし、TypeScript独自の型システムを最大限に活用するためには、インポートするモジュールに関する型定義を正しく行うことが求められます。

この点は、JavaScriptとの大きな違いとなります。

●requireメソッドの使い方

TypeScriptにおいて、外部モジュールを利用する際には、requireメソッドを用いることが一般的です。

JavaScriptのNode.js環境では、require関数を使用してモジュールを読み込むことができますが、TypeScriptでは型の概念が加わっているため、その使い方や注意点が少し異なります。

○サンプルコード1：基本的なモジュールのインポート

TypeScriptで最も基本的なモジュールのインポート方法を次のサンプルコードを通じて紹介します。

// math.tsというファイルで、以下のように関数をエクスポートしているとします。
export function add(a: number, b: number): number {
    return a + b;
}

// main.tsでmath.tsをインポートする場合
const math = require('./math');

const result = math.add(2, 3);
console.log(result); // ここで5と出力されます。

このコードでは、math.tsという外部モジュールをインポートして、その中に定義されたadd関数を使用しています。

require('./math')の部分でmath.tsファイルをインポートし、mathという変数に割り当てています。

この後、math.add(2, 3)という形で、インポートしたモジュール内の関数を呼び出しています。

このコードを実行すると、console.log(result)の部分で計算結果の5がコンソールに表示されることを期待します。

実際に、上記のコードを実行すると、コンソールには5という数値が表示されます。

○サンプルコード2：JSONファイルのインポート

TypeScriptのrequireメソッドを使用して、JSONファイルをインポートする方法について紹介します。

JSON形式のデータをプロジェクト内で利用する場面は多く、設定ファイルやテストデータなど、様々な場面で使用されます。

このコードでは、TypeScriptを使ってJSONファイルをインポートしています。

実際のサンプルコードを見てみましょう。

// config.jsonの例
{
  "appName": "My Application",
  "version": "1.0.0"
}

// TypeScriptでのインポート方法
const config = require('./config.json');
console.log(config.appName);  // 出力: My Application
console.log(config.version);  // 出力: 1.0.0

上記のサンプルコードでは、config.jsonというファイルがプロジェクトのルートディレクトリに配置されていると仮定しています。

その後、requireメソッドを使ってこのJSONファイルをインポートし、その内容を変数configに格納しています。

このコードを実行すると、config.appNameとconfig.versionの内容がそれぞれコンソールに出力され、”My Application”と”1.0.0″という結果が得られます。

JSONファイルのインポートは、TypeScriptのデフォルトの設定では、型情報が不明確であるため、型エラーが発生する可能性があります。

しかし、TypeScriptのコンパイラオプションであるresolveJsonModuleをtrueに設定することで、JSONモジュールのインポートをサポートすることができます。

○サンプルコード3：非同期でのモジュールインポート

JavaScriptおよびTypeScriptの開発において、非同期でモジュールをインポートするというテクニックは、特に大規模なアプリケーションやWebページのパフォーマンス向上に寄与します。

このテクニックを使用すると、特定のモジュールやライブラリが必要になるまで読み込まないため、初回のページロードの高速化が図れます。

ここでは、非同期でモジュールをインポートする方法について、サンプルコードを交えて徹底的に解説します。

このコードでは、import()という動的インポート構文を使っています。

import()はPromiseを返すため、async/await構文と組み合わせて使用できます。

// 非同期でのモジュールインポートのサンプルコード
async function loadModule() {
    const module = await import('./myModule.ts');
    module.someFunction();
}

コメント：ここでは、myModule.tsというファイルからsomeFunctionという関数を非同期にインポートして実行しています。

このコードを実行すると、非同期的にmyModule.tsが読み込まれ、そのモジュールのsomeFunctionが実行されます。

これにより、loadModule関数が呼ばれた際に初めてモジュールの読み込みが開始されるため、ページの初回読み込み時には不要なモジュールが読み込まれず、読み込みの高速化が図れます。

●requireメソッドの応用例

requireメソッドを利用することで、TypeScriptでは様々な応用的なモジュールインポートが可能となります。

今回は、動的なモジュール名を使用してのインポート方法を、具体的なサンプルコードとともに解説していきます。

○サンプルコード4：動的なモジュール名を使用したインポート

TypeScriptのrequireメソッドを使うと、文字列を動的に生成して、その結果に基づいてモジュールをインポートすることができます。

下記のサンプルコードでは、動的なモジュール名を使用して、異なるモジュールをインポートしています。

// moduleA.ts
export const name = "モジュールA";

// moduleB.ts
export const name = "モジュールB";

// main.ts
function importModule(moduleName: string) {
    // requireメソッドで動的にモジュールをインポート
    const module = require(`./${moduleName}`);
    console.log(module.name);
}

// 動的にモジュールAをインポート
importModule('moduleA');
// 動的にモジュールBをインポート
importModule('moduleB');

このコードでは、importModule関数内で、引数moduleNameを使って動的にモジュールのパスを指定しています。

requireメソッドを使用することで、文字列テンプレートを使ってモジュールの名前を動的に指定してインポートしています。

このコードを実行すると、モジュールAとモジュールBが順にインポートされ、それぞれのモジュールからエクスポートされているnameがコンソールに出力されます。

結果として、”モジュールA”、”モジュールB”という文字列が順番にコンソールに表示されます。

○サンプルコード5：条件に応じたモジュールのインポート

TypeScriptの世界において、時としてある条件下で特定のモジュールをインポートしたいケースが生じます。

このシナリオでは、条件に応じたモジュールのインポートの方法を解説します。

条件に応じて異なるモジュールをインポートするシチュエーションとして、開発環境と本番環境で異なる設定やモジュールを使用することが考えられます。

下記のサンプルコードでは、isDevelopmentというフラグを使って、開発環境かどうかを判別し、それに応じて適切なモジュールをインポートしています。

let isDevelopment = true; // この値は実際の環境設定やフラグによって変わります。

if (isDevelopment) {
    var config = require('./dev_config');
} else {
    var config = require('./prod_config');
}

このコードでは、isDevelopmentの値がtrueの場合、dev_configモジュールをインポートし、それ以外の場合はprod_configモジュールをインポートしています。

このコードを実行すると、現在のisDevelopmentの値に基づいて、対応するモジュール(dev_configまたはprod_config)がロードされます。

これにより、環境ごとに異なる設定や機能を簡単に切り替えることができます。

さらに進んで、複数の条件に基づいて異なるモジュールをインポートする場合を考えます。

例えば、異なるプラットフォームやデバイスタイプに応じて異なるモジュールをインポートしたい場合などです。

下記のサンプルコードでは、デバイスタイプを示すdeviceType変数を使用して、対応するモジュールを動的にインポートしています。

let deviceType = "mobile"; // 例として"mobile"を指定していますが、実際にはユーザーエージェントや環境変数などから取得される可能性があります。

switch(deviceType) {
    case "desktop":
        var module = require('./desktop_module');
        break;
    case "mobile":
        var module = require('./mobile_module');
        break;
    default:
        console.error("未知のデバイスタイプ");
        break;
}

上記のコードを実行すると、deviceTypeの値に応じて、適切なモジュール(desktop_moduleまたはmobile_module)がロードされます。

これにより、異なるデバイスタイプやプラットフォームに最適化された機能や設定を提供することが可能になります。

○サンプルコード6：ネストされたモジュールのインポート

TypeScriptでは、モジュールシステムを利用して、外部ファイルやライブラリを簡単にインポートできます。

特に大規模なプロジェクトでは、モジュールを複数のディレクトリやサブディレクトリに分けて管理することが一般的です。

このとき、ディレクトリがネストされている場合にも、適切にモジュールをインポートする必要があります。

ネストされたモジュールのインポートは、ディレクトリ構造に応じたパス指定が要求されるため、その構造を理解することが重要です。

では、ネストされたモジュールの具体的なインポート方法を示すサンプルコードをご紹介します。

// 例として、次のようなディレクトリ構造を考えます。
// src/
// ├── main.ts
// └── utils/
//     ├── index.ts
//     └── nested/
//         └── helper.ts

// src/utils/nested/helper.ts の中身
export function helperFunction() {
    return "これはヘルパー関数です。";
}

// src/main.ts の中身
const { helperFunction } = require("./utils/nested/helper");
console.log(helperFunction());

このコードでは、main.tsファイルからutils/nested/helper.tsというネストされたディレクトリに存在するhelperFunction関数をインポートしています。

そして、その関数を実行して結果をコンソールに出力しています。

このコードを実行すると、”これはヘルパー関数です。”という文字列がコンソールに表示されます。

また、重要な点として、requireメソッドでのインポート時には、モジュールのパスは実際のディレクトリ構造を基にして相対パスで指定することが求められます。

そのため、正確なディレクトリ構造を理解し、それに基づいてパスを指定することが重要です。

○サンプルコード7：複数のモジュールを一度にインポート

TypeScriptでの開発において、しばしば複数のモジュールを一度にインポートするシチュエーションが発生します。

例として、あるライブラリやモジュールのいくつかの関数やクラスを利用する場合などが考えられます。

このような時に、一度に複数のモジュールを効率よくインポートする方法を解説いたします。

下記のサンプルコードは、math モジュールと string モジュールの二つを一度にインポートする例です。

これらのモジュールはそれぞれ、数学関数と文字列操作関数を提供していると仮定します。

// math.ts モジュールの中身
export function add(a: number, b: number): number {
    return a + b;
}

// string.ts モジュールの中身
export function concatenate(str1: string, str2: string): string {
    return str1 + str2;
}

// main.ts での利用例
const math = require('./math');
const stringFuncs = require('./string');

console.log(math.add(2, 3)); // 数値の加算
console.log(stringFuncs.concatenate("Hello, ", "World!")); // 文字列の連結

このコードでは、math.ts モジュールと string.ts モジュールを main.ts にてインポートしています。

そして、それぞれのモジュール内の関数を利用しています。

実際にこのコードを実行すると、数値の加算と文字列の連結を行い、それぞれの結果がコンソールに表示されることになります。

具体的には、最初の console.log は 5 を、次の console.log は “Hello, World!” を表示します。

○サンプルコード8：エラーハンドリングを伴うインポート

TypeScriptを使用してアプリケーションを開発する際、モジュールのインポートが失敗するケースも考慮する必要があります。

モジュールが存在しない、あるいは特定の条件に合致しない場合など、さまざまな理由でインポートが失敗する可能性が考えられます。

このようなエラーをキャッチし、適切にハンドリングすることで、アプリケーションの堅牢性を高めることができます。

エラーハンドリングを伴うインポートのサンプルコードを紹介します。

// myModule.ts
export const sayHello = () => {
  console.log("Hello from myModule!");
};

// main.ts
try {
  const myModule = require('./myModule');
  myModule.sayHello();
} catch (error) {
  console.error("モジュールのインポートに失敗しました：", error);
}

このコードでは、まずmyModule.tsファイルでsayHelloという関数を定義してエクスポートしています。

その後、main.tsファイルでmyModuleをインポートしようとしています。

この際、try-catchブロックを使用して、エラーが発生した場合のハンドリングを行っています。

このコードを実行すると、myModule.tsが正しく配置されている場合、コンソールに”Hello from myModule!”と表示されます。

しかし、myModule.tsが存在しない場合や、その他のエラーが発生した場合は、”モジュールのインポートに失敗しました：”というメッセージとともに、エラーの詳細が表示されます。

このようにtry-catchブロックを使用することで、エラー発生時の対応を柔軟に行うことができます。

モジュールのインポートが失敗すると、アプリケーションの動作が停止することも考えられるため、エラーハンドリングは非常に重要です。

適切なエラーメッセージを表示することで、開発者やエンドユーザーに正確な情報を提供し、トラブルシューティングを容易にすることができます。

以上のサンプルコードを実行した場合、期待する結果は次の通りです。

モジュールが正しく配置され、インポートが成功した場合、”Hello from myModule!”というメッセージがコンソールに表示されます。

モジュールが存在しない、またはその他のエラーが発生した場合、”モジュールのインポートに失敗しました：”というメッセージとともに、エラーの詳細がコンソールに表示されます。

●注意点と対処法

TypeScriptでrequireメソッドを使用する際、いくつかの注意点があります。

これらの注意点を理解することで、より安全に、そして効果的にrequireメソッドを使用することが可能になります。

1つ目の注意点は、requireメソッドを使うとき、型定義が存在しないモジュールをインポートすることです。

TypeScriptは静的型付け言語であるため、型定義が提供されていないモジュールをインポートする場合、コンパイルエラーが発生する可能性があります。

そのため、型定義が存在しないモジュールを安全にインポートする方法を学ぶことは、requireメソッドを使用する上で非常に重要です。

○サンプルコード9：型定義がないモジュールのインポート

型定義が存在しないモジュールをインポートするサンプルコードを紹介します。

// @ts-ignore
const noTypeDefModule = require('noTypeDefModule');

このコードでは、noTypeDefModuleという型定義が存在しないモジュールをインポートしています。

@ts-ignoreコメントは、次の行のTypeScriptの型チェックを無視するために使用されます。

このコードを実行すると、noTypeDefModuleモジュールが正常にインポートされ、プログラム内でそのモジュールの関数やプロパティを利用することができます。

ただし、この方法を使用すると、TypeScriptの静的型チェックの恩恵を受けることができません。

そのため、実行時にエラーが発生する可能性があります。

○サンプルコード10：循環参照を避ける方法

循環参照は、プログラムの中でモジュールAがモジュールBを参照し、同時にモジュールBもモジュールAを参照するような状況を指します。

TypeScriptでこのような状況に遭遇すると、不具合や意図しない動作を引き起こすことがあります。

特に、TypeScriptのrequireメソッドを使用してモジュールをインポートする際には、この問題に気をつける必要があります。

循環参照を解消する方法として、次のサンプルコードを参照してください。

// ファイル名: moduleA.ts
import { functionB } from './moduleB';

export function functionA() {
    console.log('functionAが呼び出されました');
    functionB();
}

// ファイル名: moduleB.ts
import { functionA } from './moduleA';

export function functionB() {
    console.log('functionBが呼び出されました');
}

このコードでは、moduleA.ts と moduleB.ts の二つのモジュールが相互に参照しています。

しかし、functionB は functionA を呼び出さないため、循環参照の問題は発生しません。

もし、functionB の中で functionA を呼び出すと、循環参照が発生します。

このような場合には、共通のロジックを別のモジュールに分けるなどの方法で問題を解消する必要があります。

このコードを実行すると、functionAを呼び出すと、「functionAが呼び出されました」と表示され、その後に「functionBが呼び出されました」と表示されるのが確認できます。

●カスタマイズ方法

TypeScriptにおけるrequireメソッドは、Node.jsの環境で用いられるものです。

しかし、それだけではなく、さまざまなカスタマイズ方法が存在します。

カスタマイズ方法を理解することで、もっと柔軟に、そして効率的にモジュールをインポートすることが可能となります。

○サンプルコード11：カスタムリゾルバを使用したインポート

このコードではカスタムリゾルバを使用して、独自のロジックでモジュールの解決を行います。

通常、TypeScriptはモジュール名から該当するファイルを探しますが、カスタムリゾルバを使用することで、その検索方法を自分の好みに合わせて変更することができます。

// resolver.ts
import * as path from 'path';

function customResolver(moduleName: string) {
    // 例として、モジュール名に'_custom'が含まれる場合に特定のディレクトリを参照する
    if (moduleName.includes('_custom')) {
        return path.join(__dirname, 'custom_modules', moduleName + '.ts');
    }
    return require.resolve(moduleName);
}

const myModule = require(customResolver('myModule_custom'));

console.log(myModule);

このコードを実行すると、’myModule_custom’というモジュール名に対して、’./custom_modules/myModule_custom.ts’のファイルがインポートされる結果となります。

通常のrequireでは、このような挙動は期待できませんが、カスタムリゾルバを介することで、このような柔軟なモジュールの解決が可能となります。

○サンプルコード12：Webpackを用いたバンドリング

Web開発の現場では、TypeScriptを使用して大規模なアプリケーションを構築する際、多数のファイルやモジュールが関与することがよくあります。

これらを一つのファイルにまとめ、ブラウザで読み込みやすくするために、Webpackというツールを用いてバンドリングを行うことが一般的です。

Webpackを使用すると、複数のTypeScriptファイルを1つのJavaScriptファイルにまとめることができます。

また、この際にrequireメソッドを使ってモジュールをインポートすることができるのです。

Webpackを使用してTypeScriptファイルをバンドリングする基本的な手順を示すサンプルコードとその詳細な説明を紹介します。

// index.ts
const message = require('./message.ts');
console.log(message.greeting);

このコードでは、’./message.ts’という外部モジュールをimportしています。

// message.ts
exports.greeting = 'こんにちは、TypeScript!';

上記のmessage.tsでは、’greeting’という名前の変数をexportしています。

次に、Webpackを使用してこれらのファイルをバンドリングします。

まずは、必要なパッケージをインストールします。

npm install webpack webpack-cli typescript ts-loader --save-dev

上記のコマンドで、WebpackやTypeScriptのコンパイラ、そしてTypeScriptファイルをJavaScriptにトランスパイルするためのローダー(ts-loader)をインストールします。

そして、Webpackの設定ファイルwebpack.config.jsをプロジェクトのルートディレクトリに作成します。

// webpack.config.js
module.exports = {
    entry: './index.ts',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: 'ts-loader' }
        ]
    }
};

この設定ファイルでは、エントリーポイントとして’./index.ts’を指定し、出力として’dist’ディレクトリに’bundle.js’という名前でファイルを出力します。

また、ts-loaderを使用してTypeScriptファイルをJavaScriptにトランスパイルします。

設定が完了したら、次のコマンドを実行してバンドリングを行います。

npx webpack

このコマンドを実行すると、’dist’ディレクトリに’bundle.js’というバンドルされたJavaScriptファイルが生成されます。

この’bundle.js’をブラウザで読み込むと、’index.ts’で指定したメッセージ「こんにちは、TypeScript!」が表示されます。

○サンプルコード13：独自のモジュールローダーの実装

TypeScriptのrequireメソッドは非常に柔軟性があり、多様なシナリオでのモジュールのインポートが可能です。

ここでは、TypeScriptで独自のモジュールローダーを実装する方法を詳しく解説します。

独自のモジュールローダーを実装することで、プロジェクト独自の要件や特定のインポートロジックをカスタマイズすることができます。

独自のモジュールローダーを実装することのメリットとして、次の点が挙げられます。

特定の条件や環境変数に基づいて異なるモジュールをインポートするロジックを実装できる
特定のプリフィックスやサフィックスを持つモジュールだけをインポートするようなフィルタリングロジックを導入できる
モジュールのインポート時に追加の処理や変換を行うことができる

下記のサンプルコードは、特定のプリフィックスを持つモジュールのみをインポートする独自のモジュールローダーを表しています。

// 独自のモジュールローダーの実装
function customRequire(moduleName: string) {
    // 特定のプリフィックスを持つモジュールのみをインポート
    if (moduleName.startsWith('myPrefix_')) {
        return require(moduleName);
    } else {
        throw new Error(`モジュール名 ${moduleName} は許可されていません`);
    }
}

try {
    const myModule = customRequire('myPrefix_myModule');
    console.log('モジュールのインポートに成功しました:', myModule);
} catch (error) {
    console.error('エラー:', error.message);
}

このコードでは、独自のモジュールローダー関数customRequireを定義しています。

この関数は、モジュール名が特定のプリフィックスmyPrefix_で始まる場合にのみ、そのモジュールをインポートします。

それ以外のモジュール名でこの関数を呼び出すと、エラーがスローされます。

このコードを実行すると、myPrefix_myModuleという名前のモジュールが存在すれば、そのモジュールが正常にインポートされ、「モジュールのインポートに成功しました」というメッセージが表示されます。

一方で、許可されていないモジュール名を使用してcustomRequire関数を呼び出すと、「モジュール名 xxx は許可されていません」というエラーメッセージが表示されます。

○サンプルコード14：拡張子を明示的に指定してインポート

TypeScriptにおけるrequireメソッドの利用方法には、さまざまな応用が考えられますが、その中でも拡張子を明示的に指定してモジュールをインポートする方法について取り上げます。

この方法を知ることで、ファイルの種類やインポートするモジュールの明確な識別が可能になり、コードの可読性やメンテナンス性を高めることができます。

このコードでは、.tsの拡張子を明示的に指定して、特定のTypeScriptファイルをインポートしています。

// myModule.tsの内容
export const hello = () => {
    return "Hello, TypeScript!";
};

// main.tsの内容
const myModule = require('./myModule.ts');
console.log(myModule.hello());

このコードを実行すると、myModule.tsファイル内の関数helloがインポートされ、”Hello, TypeScript!”という文字列がコンソールに表示されます。

通常、TypeScriptのモジュールをインポートする際は、拡張子を省略して記述しますが、今回は意図的に.tsという拡張子を付与しています。

一見すると冗長に思えるかもしれませんが、プロジェクト内で同名のファイルが存在している場合や、複数のファイル形式が混在している場合に、どのファイルを指しているのかを明確にするために役立ちます。

特に大規模なプロジェクトや、多くの開発者が関わる場合、このような手法を用いることでトラブルを未然に防ぐことができます。

さて、先程のコードの実行結果についてですが、このコードを実行すると、コンソールに”Hello, TypeScript!”という文字列が出力されます。

これは、myModule.tsからhello関数をインポートし、その関数を実行した結果、返ってきた文字列をコンソールに表示しているためです。

○サンプルコード15：モジュールのmocking

TypeScriptを利用する際、モジュールのmockingは非常に役立つ技術の一つです。

特にユニットテストを行う際や、特定の振る舞いを模倣するモジュールを用意したい場合に有用です。

ここでは、TypeScriptでモジュールのmockingをどのように行うのか、サンプルコードを交えて解説していきます。

まず、モジュールmockingの目的を理解することが重要です。

モジュールmockingは、元のモジュールの実際の実装を変更せずに、期待する振る舞いを模倣（モック）するためのものです。

これにより、モジュールが持つ特定の関数やメソッドの動作をテスト環境や開発環境で変更し、その振る舞いを検証することができます。

例えば、外部APIへの接続を行うモジュールがある場合、実際にAPIにアクセスすることなく、APIからの期待するレスポンスを模倣してテストを行いたい場合があります。

このような場合にモジュールのmockingを利用します。

このコードでは、externalService.tsという外部サービスへのアクセスを模倣したモジュールをmockingしています。

// externalService.ts
export const fetchData = () => {
  return "実データ";
};

// main.ts
import * as ExternalService from './externalService';

export const processData = () => {
  return ExternalService.fetchData();
};

// test.ts（テスト用のファイル）
import * as ExternalService from './externalService';
import { processData } from './main';

jest.mock('./externalService');

ExternalService.fetchData.mockImplementation(() => "モックデータ");

describe('processDataのテスト', () => {
  it('fetchDataがモックデータを返すことを検証', () => {
    expect(processData()).toBe("モックデータ");
  });
});

このコードを実行すると、processData関数はモックデータを返すことが検証されます。

元のfetchData関数が”実データ”を返すのに対して、モック化された後のfetchData関数は”モックデータ”を返すようになります。

これにより、外部サービスへの実際のアクセスを行わずに、期待する動作をテストすることができます。

また、モジュールのmockingを応用すると、次のようなケースでの使用が考えられます。

特定のエラーを模倣して、エラーハンドリングの動作を検証する。
ネットワークが不安定な状況を模倣して、リトライ処理などの動作を検証する。

例えば、次のサンプルコードは、fetchData関数がエラーをスローする振る舞いを模倣しています。

// test.ts
import * as ExternalService from './externalService';
import { processData } from './main';

jest.mock('./externalService');

ExternalService.fetchData.mockImplementation(() => {
  throw new Error("ネットワークエラー");
});

describe('エラーハンドリングのテスト', () => {
  it('fetchDataがエラーをスローすることを検証', () => {
    expect(() => processData()).toThrowError("ネットワークエラー");
  });
});

このコードを実行すると、processData関数がエラーをスローすることが検証されます。

このように、特定の状況を模倣することで、その状況下でのモジュールの動作を確認することができます。