こんにちは。フロントエンドの現場で「TypeScript、便利だけど設定が難しくて……」と悩んでいるあなたへ。
大丈夫です、安心してください。TypeScriptの`tsconfig.json`にある`target`という設定、最初は誰だって「結局どれを選べばいいの？」と迷うものです。今日は、この設定の意味を、あなたの身の回りの「翻訳」に例えて、直感的に解き明かしていきましょう。
—
1. `target`は「どの時代の人に届けるか」を決める翻訳機
`target`プロパティは、一言で言えば「TypeScriptという最新の言語で書いたコードを、どの時代のJavaScriptに変換（翻訳）するか」を決める設定です。
想像してみてください。あなたは今、最新の流行語を盛り込んだお手紙を書いています。でも、その手紙を届ける相手が「10年前の言葉しか知らない人」だったらどうでしょう？
- 「最近の若者言葉（最新のJS構文）」をそのまま伝えても、相手は「はて、それは何のこと？」と困ってしまいますよね。
- そこで、相手が理解できる「昔ながらの言葉（古いJS構文）」に翻訳してあげる必要があります。
この「翻訳のレベル」を決めるのが`target`です。
翻訳レベルの設定例
`tsconfig.json`の中身を覗いてみると、こんなふうに書かれています。
{
“compilerOptions”: {
// ここで翻訳のターゲットを設定します
// “ES5″ はかなり古めの言葉、”ES2022” は最新の言葉というイメージです
“target”: “ES2018”
}
}
- `ES5`: 非常に古い基準。ガラケーでも動くくらい慎重な設定ですが、翻訳の手間がかかるのでコードが少し太っちょになります。
- `ES2020`以降: モダンなブラウザ向け。最近のブラウザは賢いので、そのままの言葉を伝えてもスイスイ理解してくれます。
—
2. なぜ「ポリフィル」が必要になるの？
ここで一つの壁にぶつかります。「翻訳機が言葉を変換するだけじゃ、どうしても解決できないこと」があるんです。
例えば、最新のJavaScriptには「美味しいコーヒーを自動で淹れる機能（便利な関数）」があるとします。でも、古いブラウザにはそもそも「コーヒーメーカー」という道具自体が存在しません。
翻訳機（TypeScript）がどんなに頑張って言葉を変換しても、「そもそもその道具（機能）を持っていないブラウザ」に対しては、動かしようがないのです。
そこで登場するのが「ポリフィル（Polyfill）」です。
- ポリフィルとは：本来は存在しないはずの機能を、後付けでブラウザに「擬似的な道具」として持たせてあげること。
「コーヒーメーカーがないなら、手動でドリップする道具をブラウザに貸してあげよう！」というのがポリフィルの役割です。
—
3. 実践！どう選ぶのが正解？
現場のリアルな感覚でお伝えすると、今のWeb制作において`target`の設定は「プロジェクトのターゲット層」で決まります。
A. 最新のブラウザだけで動けばいい場合（モダンWebアプリなど）
ChromeやEdgeの最新版だけをターゲットにするなら、`target`は`ES2020`や`ES2022`でOKです。この場合、ポリフィルはほとんど不要です。
B. 古いブラウザもサポートする必要がある場合
会社の業務システムなど、まだ古いブラウザを使っているユーザーがいる場合は、`target`を`ES5`や`ES2015`にします。ここで初めて、ポリフィルの出番です。
翻訳のイメージ（コード例）
// 最新の記法：アロー関数とconst
const sayHello = () => {
console.log(“こんにちは！”);
};
/
- もし target を “ES5” に設定すると、
- TypeScriptは以下のように変換します。
/
// 昔ながらの記法：varとfunction
var sayHello = function() {
console.log(“こんにちは！”);
};
見ての通り、古い環境でも動くように「古風な書き方」に書き換えてくれるのがTypeScriptの愛なのです。
—
最後に：迷ったらこうする！
もし、あなたが今初めて設定を書いているのなら、まずはこうしてみてください。
1. 基本は `ES2020` くらいで始める：今の時代、これくらいが一番バランスが良いです。
2. 困ったら `ES5` に下げる：もし「古いブラウザで動かない！」と報告が来たら、その時に下げれば大丈夫です。
3. ポリフィルは「core-js」などのライブラリを検討する：最近はツールが賢いので、足りない機能だけを自動で補完してくれる仕組みもあります。
プログラミングは、最初から完璧を目指さなくていいんです。まずは動くものを作って、ブラウザという「相手」に合わせて翻訳機の設定を調整していく。その繰り返しが、あなたを一流のフロントエンドエンジニアに育ててくれます。
大丈夫、一つずつ積み上げていきましょう。応援しています！
コメント