TSConfig コンパイルターゲットの指定
TypeScript プロジェクトを作成するとき、 tsconfig.json
で compilerOptions.target
を指定することができる。
Next.js のプロジェクトを生成する create-next-app を使うとデフォルトで es5
が指定される。しかし ES5 がリリースされたのは2009年であり、フロントエンドの成長(ここでは言語機能やブラウザ機能の進歩)を考えるともはや古代。どう決めたらいいのか考えてみる。
tsconfigって何だっけ
TypeScript プロジェクトでは必ず設定してるけどこいつは何だ。
次の2つの役割を持つ。
- TypeScript プロジェクトのプロジェクトルートを示す
- コンパイラオプションの指定
jsconfigとの違い
jsconfig.json は tsconfig.json から派生したもので、TypeScript を使用していないプロジェクトで tsconfig.json の役割を果たす。 tsconfig.json の allowJs
を true
にしたものと同様。
Tip:
jsconfig.json
is a descendant of tsconfig.json, which is a configuration file for TypeScript.jsconfig.json
istsconfig.json
with"allowJs"
attribute set totrue
.
compilerOptions.targetのすること
target 属性が何をするものなのか整理する。
前提
- TypeScript はコンパイラによって JavaScript にコンパイルされる
- JavaScript の仕様である ECMAScript は複数のバージョンが存在する
- JavaScript 実行環境がコンパイルした ECMAScript のバージョンに対応している必要がある
targetの値
target の値は、前提1のコンパイル後の JavaScript が前提2の ECMAScript のどのバージョンに対応するかの指定に使われる。
エディタによる TypeScript コーディングのサポートを受けている場合は、target の値で対応している機能までで入力補完などが行われる。
targetでの動作を支えるlibとpolyfill
指定した target のECMAScript バージョンに使いたい機能がない場合でも、 compilerOptions.lib
を指定することで、TypeScript でのエラーを回避できる。実行環境で動作させるためには compilerOptions.lib
で指定した機能に対応するポリフィル(polyfill)を実装内に組み込む必要がある。
ポリフィルという名称の考案者による記事
ポリフィルの歴史についてまとめられた記事
polyfill を深堀りする - mizdra's blog
target, lib の指定とポリフィルの組み込みについて実験された記事
https://www.tohuandkonsome.site/entry/2019/10/10/215920
targetの決め方
実行環境ごとの target 指定の流れ
Node.js
使用する Node.js のバージョンで、十分に機能をサポートしている ECMAScript のバージョンを指定する。Node Green というサイトで、ECMAScript の機能と Node.js のサポート対応表が公開されているので参考になる。
ブラウザ
Internet Explorer のサポート終了から、フロントエンドで考慮するブラウザ機能のラインが数段階変わった。2022年初めの記事だが、OS・ブラウザのシェア率などからベースラインについて考察されている。
ECMAScript の機能と各ブラウザの最新数バージョンでのサポート対応表も存在する。
自分たちが実装するサービスのターゲットと各ブラウザのシェアを見ながら、どこにラインを置くかを決めるとよさげ。