🐕
TypeScriptとJavaScriptとECMAScriptの違いがわからない人のための記事
※これはChatGPTで生成したものを加筆・修正したものです。
JavaScriptを書いているとよく出てくる「TypeScript」「ECMAScript」「ES6」などの用語。最初はこれらの違いが曖昧で混乱するかもしれません。
この記事ではそれぞれの違いを整理し、TypeScriptがどんな特徴を持つのかをわかりやすく解説します。
🌐 JavaScript / TypeScript / ECMAScript の関係
| 用語 | ざっくり言うと |
|---|---|
| JavaScript | 実際に動くスクリプト言語 |
| ECMAScript | JavaScriptの"仕様書"の名前 |
| TypeScript | JavaScriptを型安全にしたスーパーセット |
- ECMAScript（略称：ES）は、JavaScriptの標準仕様のこと。
- JavaScriptは、ECMAScript仕様に基づいた実装。
- TypeScriptはJavaScriptを拡張した言語で、最終的にJavaScriptに変換して動かします。
🔧 TypeScriptの主な特徴
✅ 型がある（静的型付け）
let age: number = 28;
→ JavaScriptにはない「型」の仕組みがある。
✅ 実行前にエラーがわかる
function greet(name: string) {
return 'Hello ' + name;
}
greet(123); // ❌ エラーになる
→ JavaScriptでは実行するまで気づかないバグを、TypeScriptではコンパイル時に検出できます。
✅ ECMAScriptの最新構文が使える
クラス、async/await、スプレッド構文など、最新JS機能を使いやすく整備。
❌ そのままブラウザで動かない
TypeScriptはブラウザで直接動かないので、JavaScriptに変換（コンパイル）する必要があります。
npx tsc index.ts
# => index.js が生成される
🧪 JavaScriptとTypeScriptの比較
JavaScript
function add(x, y) {
return x + y;
}
add('1', 2); // => '12' 文字列結合されてしまう
TypeScript
function add(x: number, y: number): number {
return x + y;
}
add('1', 2); // ❌ エラー
🧭 ECMAScript（ES）って何？
JavaScriptの進化の歴史はECMAScriptで管理されています。
| バージョン | 名称 | 主な特徴 |
|---|---|---|
| ES5 | 2009年 | 厳格モード、Array.prototype.map など |
| ES6（ES2015） | 2015年 | let/const, class, アロー関数 |
| ESNext | 最新提案中の仕様 | optional chaining など |
TypeScriptはこれらの仕様を先取りして使いやすくする役割もあります。
📦 よく出るツールと用語
| 用語 | 役割 |
|---|---|
| Babel | 最新JSを古いブラウザ向けに変換する |
| tsc | TypeScriptの公式コンパイラ |
| 型定義ファイル (.d.ts) | ライブラリなどの型情報を提供するファイル |
✍️ まとめ
- ECMAScript = JavaScriptの仕様の名前
- JavaScript = 実際に動くスクリプト言語
- TypeScript = JavaScriptに型などを加えた拡張言語
TypeScriptを使うと、バグを事前に防いだり、コード補完が強力になったり、保守性が上がるというメリットがあります。
「型ってめんどくさそう」と思うかもしれませんが、慣れてくると手放せなくなります。最初は既存のJSプロジェクトに ts-check を加えるところからでもOKです！
Discussion