やあ、TypeScriptの世界へようこそ。フロントエンドの迷宮を歩く君へ、今日は少しだけ立ち止まって「`tsconfig.json`の心臓部」の話をしようか。
TypeScriptを始めると、最初にぶつかるのがこの`target`という設定だ。「ES5？ ES2015？ 何が違うの？ どれを選べばいいの？」と頭を抱える気持ち、痛いほどわかるよ。でも大丈夫。これはTypeScriptという「魔法」を、現代の「ブラウザという現実」にどう翻訳させるか、というだけの話なんだ。
—
1. `target`って結局なに？：翻訳家の腕前を決める設定
想像してみてほしい。君は最高にクールな最新の英語の詩（TypeScript）を書いた。でも、それを読む相手（ブラウザ）は、古い時代の言葉しか理解できない頑固な人かもしれないし、最新の流行語が大好きな若者かもしれない。
`target`設定は、「君の書いたコードを、どの時代の言葉に翻訳して出力するか」を決めるスイッチだ。
- `ES3` / `ES5`: 昔のガラケーや、歴史の教科書に載るような古いブラウザ向け。言葉のボキャブラリーが少ないから、最新の便利な書き方を「回りくどい昔の言い回し」に一生懸命変換してくれる。
- `ES2015` (ES6): 現代の標準的なブラウザが理解できる言葉。「クラス」とか「アロー関数」といった、今のプログラミングの基礎となる言葉をそのまま使える。
- `ESNext`: 「最新の流行語も全部使っちゃえ！」という設定。翻訳をサボる（＝変換を最小限にする）のでコードは短くなるけれど、古いブラウザで開くと「えっ、何それ？」とエラーで動かなくなるリスクがある。
—
2. なぜこれが大事なの？
もし君が「最新の便利な書き方」でコードを書いて、`target`を古く設定すると、TypeScriptは涙ぐましい努力をして変換を行う。
例えば、こんなシンプルな「アロー関数」を書いたとする。
// TSで書いたモダンな書き方
const greet = (name: string) => `Hello, ${name}!`;
これを`target: “ES5″`に設定すると、TypeScriptはこう翻訳するんだ。
// TSが頑張ってES5（古い形式）に翻訳した姿
var greet = function(name) {
return “Hello, ” + name + “!”;
};
……どうだい？ 変換後の姿は少し古臭くて、冗長だろう？
逆に`target: “ES2015″`なら、そのままの姿で出力される。変換の手間が減れば、プログラムの動作も軽くなり、何よりデバッグ（間違い探し）が格段に楽になるんだ。
—
3. 結局、どう設定すればいいの？
結論から言おう。今のWeb開発の現場なら、まずは `ES2015` か `ES2020` あたりを選んでおくのが一番の安定だ。
理由はシンプル。今のPCやスマホのブラウザは、もうずいぶんと賢くなったからだ。無理に古代の言語まで遡って翻訳する必要は、ほとんどない。
`tsconfig.json` はこんな感じに書いておけば、まずは安心してスタートできるよ。
{
“compilerOptions”: {
// 現代のブラウザならこれくらいでOK
“target”: “ES2015”,
// モジュールシステムも現代風に
“module”: “commonjs”,
// TypeScriptが正しく動いているか厳しくチェックしてもらう（おすすめ！）
“strict”: true
}
}
—
4. 最後に：迷ったら「今」を見よう
「将来、もし古いブラウザでも動かしたくなったらどうしよう？」と不安になるかもしれないね。でも、大丈夫。そんな時は「Babel」や「SWC」という別の専門家（トランスパイラ）に任せればいいんだ。
TypeScriptの役割は「型を守ること」と「開発を効率化すること」。`target`の設定は、あまり難しく考えすぎないでほしい。
「今はこれくらいの時代のブラウザをターゲットにするぞ」という君の意思表示。それだけで十分なんだ。
最初から完璧を目指して設定をこねくり回す必要はない。まずは動かして、ブラウザと仲良くなること。その一歩を踏み出した君なら、きっと素晴らしいアプリケーションが作れるはずさ。
また何かわからないことがあったら、いつでも聞いてくれ。現場の最前線から、いつでも応援しているよ。
コメント