「とりあえずESNext」で思考停止してないか？ `tsconfig.json` の `target` が現場にもたらす残酷な真実
現場のコードベースを見ていると、`tsconfig.json` の `compilerOptions.target` が「なんとなく最新だから」という理由で `ESNext` に設定されているプロジェクトによく出くわす。
おいおい、ちょっと待て。その設定、本当に君たちのプロジェクトのターゲットブラウザを正しく理解した上での選択か？
今回は、この「地味だが非常に重い」設定値である `target` について、フロントエンドの現場で生き抜くためのリアルな知見を叩き込む。ここを理解していないと、モダンなブラウザでは動くのに、特定の環境（レガシーな管理画面や特定の社内環境など）で「なぜか動かない」という、深夜のデバッグ地獄に直面することになる。
—
1. `target` とは結局何なのか？
一言で言えば、「TypeScriptがトランスパイル後のJavaScriptを、どの時代の文法で出力するか」を決めるスイッチだ。
`target` を `ES5` にすれば、`const` や `let` は `var` に書き換えられ、アロー関数は `function` に変換される。逆に `ESNext` にすれば、TypeScriptは「最新のブラウザなら動くだろう」という前提で、極力コードを変換せずにそのまま出力する。
ここで注意してほしいのは、「変換する範囲」だ。
- 構文の変換 (Syntax transformation): アロー関数やクラス構文などを古いJSに書き換えること。これは `target` が担う。
- ポリフィルの注入 (Polyfilling): `Promise` や `Array.prototype.includes` などの「新しい標準関数」を、古いブラウザで動くように補完すること。これは `target` ではなく、`core-js` などのライブラリが担う（ここは混同されがちなので注意が必要だ）。
2. なぜ「とりあえずESNext」が危険なのか
今のフロントエンド開発は、ViteやNext.jsのようなビルドツールが裏側でやってくれることが多い。しかし、ライブラリ開発や、独自にwebpackを組んでいるような環境では、`target` の設定一つで成果物のサイズとパフォーマンスが劇的に変わる。
もし `target: “ESNext”` に設定して、最新のシンタックス（例えば Nullish coalescing `??` や Optional chaining `?.`）をバリバリに使ったとしよう。それをそのままIE11はおろか、少し古いChromeで動かそうとしたら、ブラウザは「SyntaxError: Unexpected token」を吐いて沈黙する。
現場の教訓：
「最新機能を使いたい」という欲求と、「ユーザーのブラウザ環境」のバランスを取るのがアーキテクトの仕事だ。無理に最新を追わず、「サポートすべき最も古いブラウザ」に合わせて `target` を下げる勇気を持て。
—
3. 実務で使い分ける `tsconfig.json` 設定例
現場で推奨される設定パターンをいくつか紹介する。自分のプロジェクトの「守備範囲」に合わせて選んでくれ。
パターンA：現代の標準（モダンブラウザのみ）
最新のChrome, Edge, Firefox, Safariをターゲットにする場合。コード量も減り、ブラウザの実行速度も速い。
{
“compilerOptions”: {
// 最新の構文を活かしつつ、型定義は維持する
“target”: “ES2022”,
“lib”: [“DOM”, “DOM.Iterable”, “ESNext”],
“module”: “ESNext”
}
}
パターンB：互換性重視（レガシー環境含む）
どうしても古いブラウザを切り捨てられない現場での設定。`ES5` に落とすとファイルサイズが肥大化しがちなので注意が必要だ。
{
“compilerOptions”: {
// 互換性を最優先する。ただし、ポリフィルは別途 core-js 等で補完すること
“target”: “ES5”,
“lib”: [“DOM”, “ES5”, “ScriptHost”],
// クラスやアロー関数も全てES5に変換される
“downlevelIteration”: true
}
}
—
4. シニアからのアドバイス：`target` よりも `browserslist` を信じろ
正直に言うと、現代のフロントエンド開発において、`tsconfig.json` の `target` だけでブラウザ対応を管理するのは限界がある。
現場のベストプラクティスは、`browserslist` を活用することだ。ViteやBabel、PostCSSなどは、`package.json` に書かれた `browserslist` を見て、自動的に最適な変換（トランスパイル）とポリフィルを行ってくれる。
`package.json` に以下のように記述するだけでいい：
{
“browserslist”: [
“> 0.5%”,
“last 2 versions”,
“not dead”
]
}
`tsconfig.json` の `target` を `ESNext` にしておき、実際の変換は `browserslist` に基づいてビルドツールに任せる。これが現在の「最も賢いやり方」だ。
まとめ：結局どうすべきか
1. 基本は `ES2020` または `ES2022` を目指す: 現代的な開発なら、ここがスイートスポットだ。
2. `target` を変える前に `browserslist` を確認せよ: ビルドツールが賢いなら、設定はツールに任せたほうがバグは減る。
3. 最後に必ず実機テスト: どんなに理論が正しくても、動く環境で動かなければ意味がない。
設定ファイルは単なるテキストデータではない。君たちがサポートする「ユーザーへの約束」だ。適当なコピペで済ませず、その設定が自分のプロジェクトに何をもたらすのか、一度立ち止まって考えてみてほしい。
もし何か行き詰まったら、いつでも聞け。また次の現場で会おう。
コメント