名前空間？モジュール？TypeScriptのコード整理術、教えちゃいます！
TypeScriptの名前空間（Namespace）とは？
TypeScriptにおける名前空間（Namespace）は、コードを論理的にグループ化し、グローバルスコープの汚染を防ぐための仕組みです。名前空間を使用することで、同じ名前の変数や関数が異なる場所で定義されていても、名前の衝突を避けることができます。特に大規模なプロジェクトや、複数のライブラリを使用する場合に有効です。
名前空間は、namespaceキーワードを使用して定義します。名前空間の中に変数、関数、クラスなどを定義することで、それらはその名前空間に属することになります。
namespace MyNamespace {
export const myVariable = "Hello, Namespace!";
export function myFunction() {
return "Namespace function!";
}
}
console.log(MyNamespace.myVariable);
console.log(MyNamespace.myFunction());TypeScriptのモジュール（Module）とは？
モジュールは、名前空間と同様にコードを整理するための仕組みですが、より現代的で推奨される方法です。モジュールは、ファイルスコープを持ち、importとexportキーワードを使って、他のファイルとの間で変数、関数、クラスなどを共有します。
TypeScriptでは、ES Modules（ECMAScript Modules）とCommonJSの2種類のモジュールが一般的に使用されます。ES Modulesは、ブラウザとNode.jsの両方でネイティブにサポートされており、TypeScriptの推奨されるモジュール形式です。
// my_module.ts
export const myVariable = "Hello, Module!";
export function myFunction() {
return "Module function!";
}
// main.ts
import { myVariable, myFunction } from './my_module';
console.log(myVariable);
console.log(myFunction());名前空間とモジュールの違い
名前空間とモジュールの主な違いは、スコープと可視性の扱いにあります。
名前空間は、グローバルスコープを拡張しますが、モジュールはファイルスコープを持ちます。つまり、モジュール内の変数は、明示的にexportされない限り、他のファイルからはアクセスできません。名前空間は、exportキーワードを使用しない場合でも、同じ名前空間内の要素はアクセス可能です。
また、モジュールは依存関係を明示的に宣言するため、コードの可読性と保守性が向上します。名前空間は、依存関係が暗黙的になる可能性があり、大規模なプロジェクトでは管理が難しくなることがあります。
TypeScriptの公式ドキュメントでは、モジュールが推奨されています。名前空間は、レガシーコードとの互換性のために残されていますが、新しいプロジェクトではモジュールを使用することが推奨されます。
以下に、名前空間とモジュールの主な違いをまとめます。
* スコープ: 名前空間はグローバルスコープを拡張、モジュールはファイルスコープ
* 依存関係: 名前空間は暗黙的、モジュールは明示的
* 推奨: モジュール
// 名前空間の例（非推奨）
namespace MyNamespace {
export const myVariable = "Hello, Namespace!";
}
console.log(MyNamespace.myVariable); // グローバルにアクセス可能
// モジュールの例（推奨）
// my_module.ts
export const myVariable = "Hello, Module!";
// main.ts
import { myVariable } from './my_module';
console.log(myVariable); // 明示的にimportする必要がある名前空間とモジュールの使い方
名前空間は、レガシーコードや小規模なプロジェクトで使用されることがあります。名前空間を使用するには、namespaceキーワードで名前空間を定義し、その中に変数、関数、クラスなどを定義します。名前空間の外からアクセスできるようにするには、exportキーワードを使用します。
namespace MyNamespace {
export const myVariable = "Hello, Namespace!";
export function myFunction() {
return "Namespace function!";
}
}
console.log(MyNamespace.myVariable);
console.log(MyNamespace.myFunction());モジュールを使用するには、importとexportキーワードを使用します。exportキーワードで公開する要素を指定し、importキーワードで他のモジュールから要素をインポートします。
// my_module.ts
export const myVariable = "Hello, Module!";
export function myFunction() {
return "Module function!";
}
// main.ts
import { myVariable, myFunction } from './my_module';
console.log(myVariable);
console.log(myFunction());参考リンク
まとめ
TypeScriptの名前空間とモジュールは、コードを整理し、再利用性を高めるための重要な機能です。名前空間は、レガシーコードとの互換性のために残されていますが、新しいプロジェクトではモジュールを使用することが推奨されます。モジュールは、ファイルスコープを持ち、依存関係を明示的に宣言するため、コードの可読性と保守性が向上します。importとexportを使いこなして、より効率的なTypeScript開発を行いましょう。
