TypeScript: ディレクトリごとモジュールをまとめてインポート！3つの方法徹底比較

2024-05-21

TypeScriptでディレクトリ内のすべてのモジュールをインポートする方法

ワイルドカードを使用する

最もシンプルな方法は、ワイルドカード (*) を使用してディレクトリ内のすべてのモジュールをインポートすることです。構文は以下の通りです。

import * as modules from './path/to/directory';

この方法の利点は、シンプルで記述量が少ないことです。一方、欠点として、個々のモジュールに直接アクセスできない点が挙げられます。

require 関数を使用する

Node.js の require 関数を使用して、ディレクトリ内のすべてのモジュールを動的にインポートする方法もあります。構文は以下の通りです。

const modules = require.context('./path/to/directory', true);

Object.keys(modules).forEach(function(key) {
  const module = modules(key);
  // ... module を使用する
});

この方法の利点は、個々のモジュールに直接アクセスできることです。一方、欠点として、記述量が多くなることと、Node.js 環境でのみ使用できる点が挙げられます。

ツールを使用する

ts-loader や @loadable/ts などのツールを使用すると、ディレクトリ内のすべてのモジュールを自動的にインポートすることができます。これらのツールは、ビルドプロセス時にモジュールを分析し、必要なモジュールを自動的にインポートするコードを生成します。

この方法の利点は、記述量を減らすことができ、メンテナンス性も向上します。一方、欠点として、ツールを導入する必要があることと、設定が複雑になる可能性がある点が挙げられます。

まとめ

それぞれの方法の利点と欠点を理解した上で、状況に合った方法を選択することが重要です。

シンプルで記述量が少ない方法を求める場合は、ワイルドカードを使用する方法がおすすめです。
個々のモジュールに直接アクセスしたい場合は、require 関数を使用する方法がおすすめです。
ツールによる自動化を希望する場合は、ts-loader や @loadable/ts などのツールを使用する方法がおすすめです。

TypeScriptでディレクトリ内のすべてのモジュールをインポートするサンプルコード

ワイルドカードを使用する

// src/directory/index.ts
export * from './module1';
export * from './module2';
export * from './module3';

// src/main.ts
import * as modules from './directory';

console.log(modules.module1.default()); // module1 のデフォルトエクスポートを実行
console.log(modules.module2.function1()); // module2 の function1 関数を実行
console.log(modules.module3.property1); // module3 の property1 プロパティにアクセス

説明:

src/directory/index.ts ファイルでは、ディレクトリ内のすべてのモジュールを再エクスポートします。
src/main.ts ファイルでは、* を使用して src/directory ディレクトリ内のすべてのモジュールをインポートします。
インポートされたモジュールは、modules オブジェクトのプロパティとしてアクセスできます。

require 関数を使用する

// src/directory/module1.ts
export default function function1() {
  console.log('module1 の function1 関数を実行しました');
}

// src/directory/module2.ts
export const property1 = 'module2 の property1 プロパティ';

// src/main.ts
const modules = require.context('./directory', true);

Object.keys(modules).forEach(function(key) {
  const module = modules(key);
  if (module.default) {
    console.log(module.default()); // デフォルトエクスポートを実行
  } else {
    for (const property in module) {
      console.log(module[property]); // プロパティにアクセス
    }
  }
});

各モジュールファイル (src/directory/module1.ts および src/directory/module2.ts) は、エクスポートするものに応じて、デフォルトエクスポートまたは個々のエクスポートを使用します。
forEach ループを使用して、各モジュールを処理します。
モジュールにデフォルトエクスポートがある場合は、そのエクスポートを実行します。

ts-loader を使用する

前提条件:

ts-loader と webpack がインストールされていることを確認してください。

// src/directory/module1.ts
export default function function1() {
  console.log('module1 の function1 関数を実行しました');
}

// src/directory/module2.ts
export const property1 = 'module2 の property1 プロパティ';

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          getCustomModuleFactory: function(context) {
            return function (source) {
              const modules = {};
              const requireContext = require.context(context.resourcePath, true);
              requireContext.keys().forEach(function(key) {
                modules[key] = requireContext(key);
              });
              return modules;
            };
          },
        },
      },
    ],
  },
};

// src/main.ts
import { modules } from './directory';

console.log(modules.module1.default()); // module1 のデフォルトエクスポートを実行
console.log(modules.module2.function1()); // module2 の function1 関数を実行
console.log(modules.module3.property1); // module3 の property1 プロパティにアクセス

webpack.config.js ファイルでは、ts-loader の getCustomModuleFactory オプションを使用して、ディレクトリ内のすべてのモジュールをインポートするカスタムモジュールファクトリーを定義します。
ts-loader は、カスタムモジュール

TypeScriptでディレクトリ内のすべてのモジュールをインポートする方法：その他の方法

barrel ファイルとは、ディレクトリ内のすべてのモジュールをまとめてエクスポートするファイルのことです。構文は以下の通りです。

// src/directory/index.ts
export * from './module1';
export * from './module2';
export * from './module3';

// src/main.ts
import { module1, module2, module3 } from './directory';

console.log(module1.default()); // module1 のデフォルトエクスポートを実行
console.log(module2.function1()); // module2 の function1 関数を実行
console.log(module3.property1); // module3 の property1 プロパティにアクセス

利点:

コードが読みやすくなり、メンテナンス性も向上します。

すべてのモジュールをインポートするため、不要なモジュールもインポートされてしまう可能性があります。

glob パターンを使用して、ディレクトリ内のすべてのモジュールのパスを指定することもできます。構文は以下の通りです。

import { Glob } from 'glob';
import * as modules from './directory/**/*.ts';

const glob = new Glob('./directory/**/*.ts');

glob.on('match', (path) => {
  const modulePath = path.replace(/\.ts$/, '');
  const module = require(modulePath);
  // ... module を使用する
});

この方法は、glob パッケージを使用して、ディレクトリ内のすべての .ts ファイルのパスを取得します。
各ファイルのパスに対して、require 関数を使用してモジュールをインポートします。

ワイルドカードよりも柔軟なパターン指定が可能

glob パッケージのインストールが必要
コードが複雑になる

TypeScript aliases を使用する

TypeScript 4.1 以降では、paths プロパティを使用して、エイリアスを定義することで、モジュールをインポートすることができます。構文は以下の通りです。

{
  "compilerOptions": {
    "paths": {
      "@modules/*": ["src/directory/*"]
    }
  }
}

tsconfig.json ファイルで、@modules プレフィックス付きのエイリアスを定義します。
モジュールのインポート時に、エイリアスを使用することができます。

// src/main.ts
import { module1, module2, module3 } from '@modules';

console.log(module1.default()); // module1 のデフォルトエクスポートを実行
console.log(module2.function1()); // module2 の function1 関数を実行
console.log(module3.property1); // module3 の property1 プロパティにアクセス