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

生徒

「TypeScriptってよく聞くんですけど、ES6っていうのとも関係あるんですか？」

先生

「あります。TypeScriptは、ES6を含む新しいJavaScriptの機能を、より安全に使うための仕組みです。」

生徒

「じゃあ、ES6を覚えればTypeScriptはいらないんですか？」

先生

「役割が少し違います。違いと対応状況を順番に見ていきましょう。」

1. ES6とは何かを超かんたんに説明

ES6とは、JavaScriptの新しい書き方や便利な機能をまとめたルールの改訂版です。正式にはECMAScript 2015と呼ばれています。難しそうに聞こえますが、実際は「JavaScriptが成長して、より書きやすくなった」と考えて問題ありません。

たとえば、変数を表すletやconst、クラス、アロー関数などは、すべてES6で追加された機能です。ES6以前のJavaScriptは、少し古くて不便な書き方が多く、ミスもしやすい状態でした。

つまりES6は、JavaScriptそのものの進化です。特別な道具を入れなくても、対応しているブラウザや実行環境なら、そのまま使えます。

2. TypeScriptとは何をするものなのか

TypeScriptは、JavaScriptに型という考え方を追加した言語です。型とは、「この箱には数字だけ」「この中身は文字だけ」といったルールのことです。現実世界で言うと、郵便ポストに手紙以外を入れないようにする決まりに近いです。

TypeScriptは、ES6を含むJavaScriptの書き方をそのまま使えます。その上で、「ここには何が入るのか」を事前にチェックしてくれます。プログラムを実行する前に間違いを見つけてくれるので、初心者でも安心して書けるのが特徴です。

重要な点として、TypeScriptは最終的にJavaScriptに変換されてから動くという仕組みになっています。つまり、TypeScriptはJavaScriptを助ける存在です。

TypeScriptとES6の違いを一言で言うと、目的の違いです。ES6は「書き方の進化」、TypeScriptは「安全に書くための仕組み」です。

ES6はJavaScriptそのものなので、文法が増えたり、便利になったりします。一方TypeScriptは、JavaScriptにチェック機能を追加し、ミスを減らすことを目的にしています。

たとえば、数字を入れるはずの場所に文字を入れてしまった場合、ES6のJavaScriptでは実行するまで気づけません。しかしTypeScriptでは、書いている途中で「それは違います」と教えてくれます。

結論から言うと、TypeScriptはES6の機能をすべて使えます。さらにES6以降のESNextと呼ばれる新しい書き方にも対応しています。

TypeScriptは、JavaScriptの上に作られているため、ES6の構文をそのまま理解できます。変数宣言、クラス、モジュールなど、ES6で追加された要素は、TypeScriptでも普通に使えます。

そのため、「ES6を知らないとTypeScriptが書けない」ということはありませんが、結果的にES6の知識も自然と身についていきます。

ここでは、ES6の代表的な機能と、TypeScriptでの扱いをやさしく説明します。


const message: string = "こんにちは";
let count: number = 1;

この例では、constやletというES6の書き方を使っています。さらにTypeScriptでは、stringやnumberといった型を指定しています。

ES6だけの場合、型は書きません。TypeScriptでは、ES6の書き方に補足説明を足しているイメージです。

ESNextとは、これから追加される予定のJavaScriptの新機能をまとめた呼び方です。まだ正式ではない新しい書き方も含まれます。

TypeScriptは、このESNextの機能にもいち早く対応することが多いです。そのため、最新の書き方を試しつつ、型による安全性も確保できます。

初心者の段階では、ESNextを意識しすぎる必要はありませんが、「TypeScriptは未来のJavaScriptにも強い」という点を覚えておくと安心です。

TypeScriptの記事や解説でES6がよく登場する理由は、使う書き方が共通しているからです。TypeScriptを書いていると、自然にES6の文法に触れることになります。

また、現代の開発ではES6が前提になっていることが多く、TypeScriptはその環境で力を発揮します。ES6とTypeScriptは、対立するものではなく、協力関係にあると考えると理解しやすいです。

パソコンを初めて触る人にとっては、「ES6」「ESNext」「TypeScript」と言われるだけで混乱しがちです。大切なのは、TypeScriptはJavaScriptを助ける先生役だという点です。

ES6は新しい日本語の文法、TypeScriptは先生が赤ペンで間違いを直してくれる存在、と考えるとイメージしやすくなります。どちらも一緒に使うことで、安心してプログラムを書けるようになります。