TypeScriptのtargetとmoduleの違いを徹底解説！初心者でもわかるコンパイル設定
生徒
「TypeScriptの設定ファイルで、targetとmoduleっていう項目がありますけど、これって何が違うんですか？」
先生
「どちらもTypeScriptをJavaScriptに変換する際の設定ですが、targetはJavaScriptのバージョンを、moduleはモジュールシステムの形式を決めるものなんです。」
生徒
「具体的にはどう設定すればいいんですか？」
先生
「それでは、それぞれの役割と設定方法を詳しく見ていきましょう！」
1. TypeScriptのコンパイルとは？
TypeScriptは、ブラウザやNode.jsで直接実行することができません。そのため、TypeScriptで書いたコードを、JavaScriptに変換する必要があります。この変換作業のことをコンパイルと呼びます。
例えるなら、日本語で書いた手紙を英語に翻訳するようなものです。TypeScript（日本語）をJavaScript（英語）に翻訳して、初めてコンピュータが理解できるようになります。
このコンパイルの設定を管理するのがtsconfig.jsonという設定ファイルです。その中でも特に重要なのが、targetとmoduleという二つの設定項目になります。
2. targetオプションとは？
targetは、TypeScriptをコンパイルした結果、どのバージョンのJavaScriptに変換するかを指定する設定です。
JavaScriptには、ES5、ES6（ES2015）、ES2016、ES2017、ESNextなど、複数のバージョンがあります。新しいバージョンほど便利な機能が使えますが、古いブラウザでは動かない可能性があります。
例えば、アロー関数やクラスといった機能は、ES6以降で使えるようになりました。もし古いブラウザでも動作させたい場合は、targetをES5に設定して、新しい機能を古い書き方に変換してもらう必要があります。
targetの設定例
tsconfig.jsonファイルで、以下のように設定します。
{
"compilerOptions": {
"target": "ES5"
}
}
この設定により、TypeScriptのコードは、ES5バージョンのJavaScriptに変換されます。
実際のコンパイル結果の違い
例えば、次のようなTypeScriptコードがあったとします。
const greet = (name: string) => {
console.log(`こんにちは、${name}さん！`);
};
target: ES5に設定した場合、次のようなJavaScriptに変換されます。
var greet = function (name) {
console.log("こんにちは、" + name + "さん！");
};
target: ES6に設定した場合、次のようなJavaScriptに変換されます。
const greet = (name) => {
console.log(`こんにちは、${name}さん！`);
};
ES5では、アロー関数が通常の関数に、テンプレート文字列が文字列連結に変換されていることがわかります。
3. moduleオプションとは？
moduleは、コンパイル後のJavaScriptで、どのモジュールシステムを使うかを指定する設定です。
モジュールシステムとは、プログラムを複数のファイルに分けて管理し、それらを連携させる仕組みのことです。例えば、計算機能を持つファイルと、画面表示機能を持つファイルを分けて作成し、必要に応じて読み込んで使うことができます。
JavaScriptには、CommonJS、ES6（ESModule）、AMD、UMDなど、いくつかのモジュールシステムがあります。環境によって使えるシステムが異なるため、適切なものを選ぶ必要があります。
主なモジュールシステムの種類
- CommonJS：Node.jsで使われる伝統的なモジュールシステムです。
- ES6（ESModule）：最新のJavaScript標準のモジュールシステムです。
- AMD：ブラウザで非同期読み込みをするためのシステムです。
- UMD：CommonJSとAMDの両方に対応した形式です。
moduleの設定例
Node.jsで使う場合は、次のように設定します。
{
"compilerOptions": {
"module": "CommonJS"
}
}
最新のブラウザやモダンな環境で使う場合は、次のように設定します。
{
"compilerOptions": {
"module": "ES6"
}
}
実際のコンパイル結果の違い
次のようなTypeScriptコードがあったとします。
export const message = "こんにちは";
module: CommonJSに設定した場合、次のようなJavaScriptに変換されます。
exports.message = "こんにちは";
module: ES6に設定した場合、次のようなJavaScriptに変換されます。
export const message = "こんにちは";
CommonJSでは、exportsというキーワードを使ってモジュールを公開しますが、ES6ではexportというキーワードを使います。
4. targetとmoduleの違いを整理
ここまでの内容を整理すると、次のようになります。
| 設定項目 | 役割 | 主な設定値 |
|---|---|---|
| target | JavaScriptのバージョンを指定 | ES5、ES6、ES2015、ES2020、ESNext |
| module | モジュールシステムの形式を指定 | CommonJS、ES6、AMD、UMD |
targetは「どの時代のJavaScriptに変換するか」を決め、moduleは「どのようにファイルを連携させるか」を決めるものです。この二つは独立した設定なので、組み合わせて使うことができます。
5. 実際の設定例とおすすめの組み合わせ
Node.jsで開発する場合
Node.jsでサーバーサイドのプログラムを作る場合は、次のような設定がおすすめです。
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS"
}
}
Node.jsは比較的新しいバージョンのJavaScriptに対応しているため、targetはES2020に設定します。モジュールシステムは、Node.jsの標準であるCommonJSを使います。
モダンなブラウザで使う場合
最新のブラウザをターゲットにする場合は、次のような設定がおすすめです。
{
"compilerOptions": {
"target": "ES6",
"module": "ES6"
}
}
最新のブラウザはES6の機能をサポートしているため、targetとmoduleの両方をES6に設定します。これにより、コンパイル後のコードもシンプルで読みやすくなります。
古いブラウザにも対応する場合
Internet Explorer などの古いブラウザにも対応する必要がある場合は、次のような設定を使います。
{
"compilerOptions": {
"target": "ES5",
"module": "UMD"
}
}
targetをES5にすることで、古いブラウザでも動作する互換性の高いコードに変換されます。moduleをUMDにすることで、さまざまな環境で使えるモジュール形式になります。
6. tsconfig.jsonファイルの作り方
設定ファイルであるtsconfig.jsonは、プロジェクトのルートディレクトリに配置します。ファイルがない場合は、手動で作成するか、次のコマンドで自動生成できます。
tsc --init
このコマンドを実行すると、デフォルトの設定が記載されたtsconfig.jsonファイルが作成されます。その後、必要に応じてtargetやmoduleを変更して使います。
完全な設定ファイルの例
実際のプロジェクトでは、次のような設定ファイルを使うことが多いです。
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"strict": true,
"outDir": "./dist",
"rootDir": "./src"
}
}
strictは型チェックを厳格にする設定、outDirはコンパイル後のファイルを出力するフォルダ、rootDirはソースコードが置かれているフォルダを指定します。
7. よくある間違いと注意点
targetとmoduleの組み合わせに注意
targetとmoduleは、組み合わせによっては意図しない動作をすることがあります。例えば、targetをES5に設定しているのに、moduleをES6に設定すると、モジュール部分だけES6の書き方になり、古いブラウザでは動かない可能性があります。
基本的には、targetが古いバージョンならmoduleも古い形式に、targetが新しいバージョンならmoduleも新しい形式にすることをおすすめします。
環境に合わせた設定を選ぶ
開発する環境（ブラウザ、Node.js、React、Vueなど）によって、適切な設定が異なります。フレームワークを使う場合は、公式ドキュメントで推奨されている設定を参考にすると良いでしょう。
