ricomintea’s diary

好きなものを好きでいる

TSConfig コンパイルターゲットの指定

TypeScript プロジェクトを作成するとき、 tsconfig.jsoncompilerOptions.target を指定することができる。

Next.js のプロジェクトを生成する create-next-app を使うとデフォルトで es5 が指定される。しかし ES5 がリリースされたのは2009年であり、フロントエンドの成長(ここでは言語機能やブラウザ機能の進歩)を考えるともはや古代。どう決めたらいいのか考えてみる。

tsconfigって何だっけ

TypeScript プロジェクトでは必ず設定してるけどこいつは何だ。

www.typescriptlang.org

次の2つの役割を持つ。

  • TypeScript プロジェクトのプロジェクトルートを示す
  • コンパイラオプションの指定

jsconfigとの違い

jsconfig.json は tsconfig.json から派生したもので、TypeScript を使用していないプロジェクトで tsconfig.json の役割を果たす。 tsconfig.jsonallowJstrue にしたものと同様。

code.visualstudio.com

Tip: jsconfig.json is a descendant of tsconfig.json, which is a configuration file for TypeScript. jsconfig.json is tsconfig.json with "allowJs" attribute set to true.

compilerOptions.targetのすること

target 属性が何をするものなのか整理する。

前提

  1. TypeScript はコンパイラによって JavaScriptコンパイルされる
  2. JavaScript の仕様である ECMAScript は複数のバージョンが存在する
  3. JavaScript 実行環境がコンパイルした ECMAScript のバージョンに対応している必要がある

targetの値

target の値は、前提1のコンパイル後の JavaScript が前提2の ECMAScript のどのバージョンに対応するかの指定に使われる。

エディタによる TypeScript コーディングのサポートを受けている場合は、target の値で対応している機能までで入力補完などが行われる。

targetでの動作を支えるlibとpolyfill

指定した target のECMAScript バージョンに使いたい機能がない場合でも、 compilerOptions.lib を指定することで、TypeScript でのエラーを回避できる。実行環境で動作させるためには compilerOptions.lib で指定した機能に対応するポリフィル(polyfill)を実装内に組み込む必要がある。

ポリフィルという名称の考案者による記事

What is a 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 のサポート対応表が公開されているので参考になる。

node.green

ブラウザ

Internet Explorer のサポート終了から、フロントエンドで考慮するブラウザ機能のラインが数段階変わった。2022年初めの記事だが、OS・ブラウザのシェア率などからベースラインについて考察されている。

engineering.linecorp.com

  1. 標準仕様に関しては Safari はベースライン:自分たちが開発するサイトは少なくとも2年前のSafariで動作できないといけません。

ECMAScript の機能と各ブラウザの最新数バージョンでのサポート対応表も存在する。

kangax.github.io

自分たちが実装するサービスのターゲットと各ブラウザのシェアを見ながら、どこにラインを置くかを決めるとよさげ。