JavaScriptとTypeScriptの歴史の整理：バージョンとモジュールシステムの変遷
エンジニアとしてモダンなWeb開発（Next.jsやAstroなど）を行う上で避けて通れない、JavaScript（JS）とTypeScript（TS）の関係性や歴史的背景を整理します。
1. JavaScriptとTypeScriptの関係
Section titled “1. JavaScriptとTypeScriptの関係”TypeScriptは、JavaScriptをベースに「型」の機能を追加した言語であり、 JavaScriptのスーパーセット（超集合） です。
- JavaScript (JS): ブラウザやNode.jsで直接実行できる標準的な言語。
- TypeScript (TS): JSの全機能を含みつつ、静的型付けなどの拡張機能を加えたもの。
- 互換性: 有効なJSコードは、そのまま有効なTSコードとして扱えます。
2. JavaScript (ECMAScript) の歴史と名称の変遷
Section titled “2. JavaScript (ECMAScript) の歴史と名称の変遷”JavaScriptの規格は ECMAScript (ES) と呼ばれます。その名称とバージョンの付け方には大きな歴史的転換点がありました。
ES2015 (ES6) 以前：黎明期から停滞期
Section titled “ES2015 (ES6) 以前：黎明期から停滞期”- 1995年: Netscape社で誕生。わずか10日間で開発されました。
- ES3 (1999年): 長らく標準として使われたバージョン。
- ES5 (2009年): 約10年の沈黙を破って登場。
forEachやJSONサポートなど、現代的なJSの基礎が作られました。
大転換期：ES2015 (ES6) と名称の変更
Section titled “大転換期：ES2015 (ES6) と名称の変更”2015年、JS史上最大のアップデートが行われ、class 構文や import/export など、大規模開発に耐えうる機能が多数導入されました。
- 名称の変更: 従来は「ES6」のようにバージョン番号で呼ばれていましたが、この年から 「毎年アップデートを行う」という方針に切り替わり、名称も「ES2015」のように年号を冠する形式 になりました。
- 現在: 以降はES2016、ES2017……と毎年小規模なアップデートが繰り返され、現在はES2024まで進化しています。
3. TypeScriptの誕生と進化
Section titled “3. TypeScriptの誕生と進化”- 2012年: Microsoftが誕生させる。JSが大規模開発に使われる際のエラーを防ぐことが目的でした。
- TS 2.0 (2016年):
strictNullChecksが導入され、型安全性が飛躍的に向上しました。 - TS 5.0 (2023年〜): 現在の主流バージョン。コンパイルの高速化などが進んでいます。
4. CommonJS (CJS) と ES Modules (ESM) の詳細
Section titled “4. CommonJS (CJS) と ES Modules (ESM) の詳細”モジュールシステム（ファイルを分割して読み書きする仕組み）には、歴史的な経緯から2つの主要な形式があります。現在、これらは混在した状況にあり、違いを正しく理解することが重要です。
| 項目 | CommonJS (CJS) | ES Modules (ESM) |
|---|---|---|
| キーワード | require(), module.exports | import, export |
| 標準の場 | Node.js（歴史的・サーバーサイド） | ブラウザ・JS標準規格（モダン） |
| 読み込みタイミング | 実行時 (Runtime) | 静的解析時 (Static) |
| トップレベル await | 不可 | 可能 |
| 拡張子 | .js (デフォルト) / .cjs | .js (デフォルト) / .mjs |
技術的な大きな違い
Section titled “技術的な大きな違い”- 静的解析 vs 動的実行:
- ESMはプログラムの実行前にインポートの依存関係を解決します。これにより、使われていないコードを削ぎ落とす Tree-shaking が可能になり、ビルド後のファイルサイズを軽量化できます。
- CJSはコードの実行中に
require()を通じて動的に読み込むため、条件分岐（if文）の中でインポートするような書き方が可能です。
- 互換性の問題:
- 現在のNode.js環境では両方の形式をサポートしていますが、ESMからCJSを呼ぶのは比較的容易な一方、CJSからESMを呼ぶ場合には制約（非同期的な扱いや
import()関数の利用など）が生じることがあります。
- 現在のNode.js環境では両方の形式をサポートしていますが、ESMからCJSを呼ぶのは比較的容易な一方、CJSからESMを呼ぶ場合には制約（非同期的な扱いや
- モダン環境での立ち位置:
- Next.js 16系 など、現代的なフロントエンドフレームワークでは ESMが標準 です。