【保存版】tsconfig.jsonの「target」オプション：バージョン指定で開発をスムーズに

2024-05-17

TypeScriptにおけるtsconfig.jsonの「target」オプションとは？

このファイルの中で、targetオプションは、コンパイルされたJavaScriptのターゲットとなるJavaScriptのバージョンを指定します。これは、生成されるJavaScriptコードがどのブラウザや実行環境で実行可能であるかを決定します。

targetオプションで指定できる値は、以下の通りです。

ES3：JavaScriptの初期バージョン
ES5：現在最も広く使用されているバージョン
ES6：最新のバージョンの1つ
ES7、ES8、：以降のバージョン

例

{
  "compilerOptions": {
    "target": "ES6"
  }
}

上記の例では、コンパイルされたJavaScriptコードは、ES6以降のブラウザや実行環境で実行可能になります。

targetオプションを指定しない場合、デフォルトはES5となります。

targetオプションの選択は、プロジェクトの要件によって異なります。古いブラウザをサポートする必要がある場合は、ES5などの古いバージョンをターゲットにする必要があります。一方、最新機能を利用したい場合は、ES6またはそれ以降のバージョンをターゲットにすることができます。

補足

targetオプションは、TypeScriptコンパイラが使用するライブラリにも影響を与えます。ターゲットとなるJavaScriptバージョンに対応するライブラリのみが使用されます。
polyfillを使用することで、古いブラウザで新しいJavaScript機能を使用することができます。

targetオプションは、TypeScriptコンパイルされたJavaScriptのターゲットとなるJavaScriptバージョンを指定する重要なオプションです。プロジェクトの要件に応じて適切なバージョンを選択することが重要です。

TypeScriptにおけるtsconfig.jsonの「target」オプション - サンプルコード

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs"
  }
}

index.ts

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message = greet('TypeScript');
console.log(message);

このコードをコンパイルするには、以下のコマンドを実行します。

tsc index.ts

コンパイルされたJavaScriptコードは、index.jsファイルに出力されます。

"use strict";

function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet('TypeScript');
console.log(message);

このコードは、ES6の機能であるアロー関数やテンプレートリテラルを使用しています。これらの機能は、targetオプションをES6に設定することで有効になります。

この例では、moduleオプションをcommonjsに設定しています。これは、Node.jsのCommonJSモジュールシステムを使用することを意味します。
targetオプションを変更することで、生成されるJavaScriptコードのバージョンを変更できます。

TypeScriptにおける「target」オプションの代替手段

Babelを使用する

Babelは、JavaScriptのコードを古いバージョンにトランスパイルするためのツールです。targetオプションの代わりにBabelを使用することで、より柔軟なバージョン管理が可能になります。

{
  "presets": ["@babel/preset-env"]
}

上記のpackage.jsonファイルは、Babelを使用して、現在の環境に合わせてJavaScriptコードをトランスパイルすることを指定します。

Browserlistを使用する

Browserlistは、さまざまなブラウザと実行環境の互換性を考慮したJavaScriptコードを生成するためのツールです。targetオプションの代わりにBrowserlistを使用することで、より精度の高いバージョン管理が可能になります。

{
  "browsers": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

1%以上のシェアを持つすべてのブラウザ
最新の2つのブラウザバージョン
非推奨ではないすべてのブラウザ

PostCSSを使用する

/* postcss.config.js */
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    })
  ]
};

targetオプションは、TypeScriptコンパイルされたJavaScriptのターゲットとなるJavaScriptバージョンを指定するための簡単な方法ですが、より柔軟なバージョン管理が必要な場合は、Babel、Browserlist、PostCSSなどの代替手段を検討する必要があります。

それぞれのツールには長所と短所があるため、プロジェクトの要件に応じて適切なツールを選択することが重要です。

typescript tsconfig transpiler