TypeScriptとES6/ESNextの連携ガイド！最新機能を有効にするtarget設定

TypeScriptでES6+機能を有効にするコンパイル設定（target）

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptを使えば、最新のJavaScript（ES6やESNext）の便利な機能が使えると聞いたのですが、設定が必要なんですか？」

先生

「はい、TypeScriptでは『target（ターゲット）』という設定を変えることで、どの時代のJavaScriptとして出力するかを自由に変更できるんですよ。」

生徒

「その設定をしないと、せっかく書いた最新の機能が動かないこともあるんですか？」

先生

「その通りです。プログラムを動かす環境に合わせて最適な設定をする必要があります。今回はその仕組みを詳しく解説しますね！」

1. ES6やESNextとは何か？

プログラミングの世界では、言語のルールが時代とともに進化していきます。JavaScriptという言語にも「版（バージョン）」のようなものがあり、それをECMAScript（エクマスクリプト）と呼びます。

ES6（イーエスシックス）は2015年に登場した非常に大きなアップデートで、これ以降のJavaScriptは劇的に使いやすくなりました。そしてESNext（イーエスネクスト）とは、現在開発が進んでいる「次世代の最新機能」を指す言葉です。

TypeScriptを使う最大のメリットの一つは、これら最新の便利な書き方を使いつつ、古いブラウザでも動く形式に変換できる点にあります。この「変換」のことを、専門用語でコンパイルと言います。

2. target設定の役割と重要性

TypeScriptの設定ファイルであるtsconfig.jsonには、targetという項目があります。これは「TypeScriptで書いたコードを、どのバージョンのJavaScriptに翻訳するか」を決めるための指示書です。

例えば、あなたが最新の日本語（最新のプログラミング構文）で手紙を書いたとします。それを、江戸時代の人（古いブラウザ）に読ませるためには、当時の言葉遣いに翻訳する必要がありますよね。逆に、現代の人に読ませるなら、そのままの言葉で届けたほうが効率が良いです。この「どの時代の言葉に翻訳するか」を指定するのがtargetの役割です。

もし、この設定を古いままにしておくと、最新の機能（アロー関数やクラスなど）を使っても、裏側ではわざわざ古い、読みづらい形式に変換されてしまいます。逆に新しすぎると、古いスマートフォンや古いパソコンのブラウザではプログラムが動かなくなってしまいます。

3. tsconfig.jsonでtargetを設定する方法

実際に設定を変えてみましょう。プロジェクトのルート（一番上の階層）にあるtsconfig.jsonというファイルを開きます。パソコンを触ったことがない方でも、メモ帳のようなテキストエディタで中身を見ることができます。


{
  "compilerOptions": {
    "target": "ES6", // ここをES5, ES6, ESNEXTなどに書き換えます
    "module": "commonjs",
    "strict": true
  }
}

ここで指定できる主な値には以下のようなものがあります。

ES5: 2009年頃の非常に古い形式です。ほとんどの古いブラウザで動きます。
ES6 (ES2015): 現代の標準的な形式です。アロー関数やクラスがそのまま使えます。
ES2020 / ES2022: より新しい機能が含まれます。
ESNext: 常に最新の機能を追いかける設定です。

4. ES6の代表的な機能とコンパイルの結果

では、最新の書き方がどのように変換されるか見てみましょう。例えば「アロー関数」という、関数を短く書く方法があります。これはES6から登場した機能です。

TypeScriptでの記述（ES6以降の書き方）:


const sayHello = (name: string) => {
    return `こんにちは、${name}さん`;
};

もしtargetをES5に設定してコンパイルすると、以下のような古い書き方に変換されます。


var sayHello = function (name) {
    return "\u3053\u3093\u306B\u3061\u306F\u3001" + name + "\u3055\u3093";
};

「var」や「function」といった古い形式になり、文字列の合体も昔ながらのプラス記号を使った形になっています。一方、targetをES6以上にすれば、TypeScriptで書いたスタイリッシュな見た目に近い状態で出力されます。

5. 初心者が選ぶべき最適なtargetは？

「結局どれを選べばいいの？」と迷ってしまいますよね。現在のWeb開発において、パソコン初心者が学習を始める際におすすめなのはES2015 (ES6)、あるいはES2020あたりです。

インターネット閲覧ソフト（ブラウザ）の代表であるGoogle ChromeやMicrosoft Edge、Safariなどは、すでに数年前からES6の機能を完璧に理解できるようになっています。そのため、極端に古い環境（例えばWindows 7時代の古いInternet Explorerなど）を対象にしない限り、ES5まで戻す必要はありません。

最新の機能を使いつつ、効率の良いプログラムを作るためには、自分の作っているものが「誰の、どんな環境で動くのか」を想像することが大切です。これを環境構築（かんきょうこうちく）の一歩と言います。パソコンを初めて触る方にとっては難しく感じるかもしれませんが、「翻訳のレベルを調整しているんだな」というイメージだけ持っておけば大丈夫です。

6. targetを変更した際の影響と注意点

設定を新しくすると、プログラムの動作が軽くなったり、ファイルサイズが小さくなったりするメリットがあります。しかし、注意点もあります。それは「古い端末での動作不良」です。

例えば、最新のiPhoneでしか動かないアプリを古いAndroidで動かそうとしてもエラーが出ますよね。それと同じことがプログラムでも起こります。targetを「ESNext」に設定して、まだ誰も知らないような最新機能を使ってしまうと、一部のユーザーの画面が真っ白になってしまう可能性があります。

安全に進めるなら、まずはES6を設定し、慣れてきたら徐々に新しくしていくのがプログラミング学習のコツです。TypeScriptは、あなたが書いた高度なコードを、利用者の環境に合わせて適切に届けてくれる「頼れる翻訳者」なのです。

7. まとめとしての補足：連携を支える仕組み

TypeScriptとES6/ESNextの連携は、ただ書き方が変わるだけではありません。TypeScriptは常にJavaScriptの進化を先取りしています。まだJavaScriptに正式に採用されていない機能でも、TypeScriptなら先取りして練習することができるのです。

このように、将来のJavaScriptの姿を先取りして体験できるのも、TypeScriptを学ぶ大きな魅力の一つです。設定一つで過去にも未来にも行けるこの感覚を、ぜひ実際のコードを書いて体感してみてください。最初は難しく見えるtsconfig.jsonの設定も、一度理解してしまえば、自分好みにプログラムをカスタマイズする楽しさに変わっていくはずです。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。