今回はTypeScriptにおけるモジュール、その中でも内部モジュールについて解説したいと思います。TypeScriptで複数のファイル構成を扱う際は、非常に重要な概念になってくるのでぜひこの機会に理解を深めましょう。
そもそもモジュールとは
モジュールとは、あるまとまりを持った機能単位のことを指します。モジュールに分割して開発を進めることで、コードの保守や再利用がしやすくなるという利点があります。
IT用語辞典には、モジュールの説明が以下のように書かれています。
モジュール（英：module）とは「部品」のこと。
もう少し、いろいろ書くと「そいつ単独でも機能としては成立するけど、普通は他のものと組み合わせて使うよ！」な部品のことです。
参考：https://wa3.i-3-i.info/word12243.html
TypeScriptでのモジュールの役割
TypeScriptを含めた様々なプログラミング言語では、モジュールを使うことで共通のコードを複数ファイルで分割して管理することができます。
例えば以下のメソッドを複数のページで使いたいとします。
その場合は以下のコードを別ファイルに切り出し、使いたいページで呼び出すという手法を使います。これがモジュールの役割になります。
function multi(x: number, y: number): number{
return x * y
}グローバルモジュールとは
内部モジュールと外部モジュールを学習する上で、グローバルモジュールについての知識は必須なので先に解説しておきます。
とは言っても、目新しい知識は全くありません。
普段みなさんが使っているメソッドや変数は全てグローバルモジュールになります。
例えば以下のコードを「sample.ts」というファイルに記載しました。
↓ sample.ts
function multi(x: number, y: number): number{
return x * y
}
続いて、新たに「test.ts」という名前のファイルを作成し、先ほどのメソッドを呼び出す記述をしました。
↓ sample.ts
/// <reference path="./test.ts" />
console.log(multi(5, 3))
ここでコンパイルを実行すると、エラーが出ることなく期待される結果が出力されると思います。このように、どこからでも変数やメソッドを呼び出すことができるモジュールをグローバルモジュールと呼びます。
% tsc test.ts --out all.js
% node all.js
=> 15TypeScriptでとあるコードを記述すると、デフォルトでグローバル空間に追加されます。
例えば「sample1.ts」で以下のコードを記述したとします。
var test1 = "アイウエオ";
続いて「sample2.ts」を作成し、先程定義した変数test1を使う記述をしても正常に動作します。
var test2 = test1;
このようにコードがグローバル空間にあることで、どこからもその値を呼び出すことができます。しかし一方で、グローバル空間を使うことで名前が競合する危険があるということを覚えておきましょう。
外部モジュールとは
では本題の外部モジュールについて見ていきましょう。
外部モジュールとは、複数ファイルに機能を分割し、それぞれをモジュールとして参照する仕組みのことです。
JavaScript(TypeScript)にはこういった機能がなかったため、CommonJSというAPI仕様が策定され、それをサポートする環境(NodeJsやRequireJs)で使われるようになりました。
ここではコンパイルまでの流れについて見ていきます。
コンパイルにはNodeJsで使用されるCommonJS方式と、RequireJSで使用されるAMD 方式の2つがあるのでそれぞれについて見ていきましょう。
CommonJS方式
まずは「test.ts」を作成し、export付きでシンプルな変数を定義します。モジュールのデータを外部に公開するには「export」というキーワードを付けなければならない点に注意しましょう。
↓ test.ts
export var string = "テスト";
続いて「sample.ts」を作成し、先程定義した変数を呼び出す記述をしましょう。別ファイルからモジュールを呼び出すには「import」キーワードを使用し、そのあとに「require(“”)」という命令を使います。
↓ sample.ts
import User = require('./test')
console.log(User.string);
では先程のファイルをコンパイルしてみましょう。コンパイルするには、モジュールを指定しなければならないので「-m commonjs」を付与します。
% tsc test.ts -m commonjs
すると、正常にコンパイルが実行され「test.js」というファイルが生成されたと思います。
AMD方式
続いてAMD方式でのコンパイルについて見ていきます。
とは言っても、先程のCommonJS方式との違いはありません。唯一異なる箇所は、コンパイルを実行するコマンドの「commonjs」という部分が「amd」に変わる所のみです。
試しにコンパイルを実行してみましょう。
↓ test.ts
export var string = "テスト";
↓ sample.ts
import User = require('./test')
console.log(User.string);
↓ コンパイルの実行
% tsc test.ts -m amd
すると、CommonJSの時と同様に正常にコンパイルが実行され「test.js」というファイルが生成されたと思います。
まとめ
- モジュールとは、あるまとまりを持った機能単位のことを指す。
- モジュールに分割して開発を進めることでコードの保守や再利用がしやすくなる。
- グローバルモジュールとは、どこからでも変数やメソッドを呼び出すことができるモジュールである。
- TypeScriptでとあるコードを記述すると、デフォルトでグローバル空間に追加される。
- 外部モジュールとは、複数ファイルに機能を分割し、それぞれをモジュールとして参照する仕組みのことである。
- コンパイルにはCommonJS方式とAMD方式の2つがある。
- モジュールのデータを参照する場合はexportを記述する。
- 外部モジュールは1ファイルに1モジュールが原則である。
- 別ファイルからモジュールを呼び出すには「import」キーワードを使用し、そのあとに「require(“”)」という命令を記述する。
- CommonJS方式ではコンパイル時に「-m commonjs」を付与する。
- AMD方式ではコンパイル時に「-m amd」を付与する。
参考
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典：
https://wa3.i-3-i.info/word12243.html
ファイルモジュール：
https://typescript-jp.gitbook.io/deep-dive/project/modules
TypeScript超入門(3)：モジュール：
https://qiita.com/ringtail003/items/f7ed257c86e5522f6e59
TypeScriptで複数ファイル構成する2つの方法：
https://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules
今回はTypeScriptにおけるモジュール、その中でも外部モジュールについて解説しました。モジュールを使用することで、保守性や管理のしやすさが向上することは明確でしたね。モジュールが使えるコードでは積極的に使用するようにしましょう。
内部モジュールについてはこちら
