JavaScriptとECMAScriptとTypeScript

JavaScript、ECMAScript、そしてTypeScriptの違いや関係性を理解することは、Web開発において重要です。

JavaScript

JavaScriptは、1995年にNetscapeによって開発されたプログラミング言語で、もともとはWebブラウザで動作するスクリプト言語として設計されました。これにより、HTMLとCSSと組み合わせて、インタラクティブなウェブサイトを作成することができます。現在では、Node.jsなどの技術によりサーバーサイドでの使用も広がっています。

• 用途
  ウェブページの動的機能を実装するために使用される。
• 特徴
  イベント駆動、非同期処理、プロトタイプベースのオブジェクト指向など。

ECMAScript

ECMAScriptは、JavaScriptの標準化されたバージョンであり、JavaScriptをより安定して互換性のある言語とするためにECMA Internationalによって規格化されました。ECMAScriptはJavaScriptの「言語の核」と考えることができ、具体的な実装（ブラウザのJavaScriptエンジンなど）はこの規格に基づいて行われます。

• 標準化
  JavaScriptの実行を標準化し、異なる環境間でのコードの互換性を保証する。
• バージョン
  ECMAScript 2015（ES6）以降、多くの新機能が導入され、現代的な開発が容易になっています。

TypeScript

TypeScriptは、Microsoftによって開発されたJavaScriptのスーパーセットです。TypeScriptはJavaScriptに型システムと静的解析を導入することで、大規模なアプリケーションの開発を容易にし、エラーを早期に発見できるようにします。TypeScriptは最終的にJavaScriptにトランスパイルされ、任意のJavaScript環境で実行可能です。

• 型システム
  静的型付けを提供し、コンパイル時に型安全を保証。
• トランスパイル
  TypeScriptをJavaScriptに変換する過程で、互換性と最適化を図る。
• ツールサポート
  開発環境での自動補完、リファクタリング、インターフェイス定義などの機能を強化。

静的型付け言語

静的型付け（Static Typing）とは、プログラミング言語の特性の一つで、変数や関数の引数、戻り値などのデータ型がプログラムの実行前（コンパイル時）に決定され、型のチェックが行われるシステムです。

静的型付けを採用している言語では、開発者は変数を使用する前にその型を明示的に宣言する必要があります。

静的型付けの主な特徴

• 型安全性
  型の不一致による実行時エラーを防ぐことができるため、より安全なコードを書くことが可能です。
• パフォーマンスの向上
  型が事前に決定されているため、実行時に型を確認するオーバーヘッドがなく、実行効率が向上します。
• 自動補完とリファクタリング
  IDEやエディタが変数の型を知っているため、コードの自動補完や安全なリファクタリングが容易になります。
• 早期エラー発見
  コンパイル時に型エラーが発見されるため、実行前に多くの問題を解決できます。

静的型付けを使用する言語の例

• C
• C++
• Java
• Scala
• TypeScript

関連性と使用状況

• JavaScriptは、すべての基本となる言語であり、ブラウザだけでなくサーバーサイド（Node.js）やモバイルアプリ（React Native）、デスクトップアプリ（Electron）など、多岐にわたるプラットフォームで使用されています。
• ECMAScriptは、JavaScriptの実装が準拠すべき規格として機能し、JavaScriptの進化と共に更新され続けています。これにより、開発者は標準に基づいたコーディングが可能となります。
• TypeScriptは、JavaScriptに追加機能を提供し、特に大規模開発プロジェクトにおいてその価値を発揮します。TypeScriptを用いることで、開発プロセスがより管理しやすく、安全になります。

以上のように、JavaScript、ECMAScript、そしてTypeScriptはそれぞれ独自の役割と特性を持ちつつも、互いに補完し合う関係にあります。

JavaScriptとTypeScriptのコードの違い

では、コードを示しながら、JavaScriptとTypeScriptの違いについて、もう少し細かくまとめてみます。

型の宣言と型安全

JavaScript

let name = "Alice";
name = 25;  // JavaScriptではエラーにならない
console.log(name);  // 出力: 25

JavaScriptでは、変数 name に最初に文字列を割り当てていますが、後に数値を割り当てることが可能です。JavaScriptが動的型付け言語であるため、変数の型が実行時に変更されます。

TypeScript

let name: string = "Alice";
name = 25;  // エラー: Type 'number' is not assignable to type 'string'.
console.log(name);

TypeScriptでは、変数 name が文字列型と明示的に宣言されているため、数値を割り当てようとすると、コンパイル時に型エラーが発生します。これにより、開発段階でのバグの発見が容易になります。

関数のパラメータと戻り値の型

JavaScript

function add(x, y) {
  return x + y;
}

console.log(add(5, 3));  // 出力: 8
console.log(add("Hello", 5));  // 出力: Hello5

JavaScriptの add 関数は任意の型の引数を受け取り、加算を行います。文字列と数値の加算では、数値が文字列に変換され、結合されます。

TypeScript

function add(x: number, y: number): number {
  return x + y;
}

console.log(add(5, 3));  // 出力: 8
console.log(add("Hello", 5));  // エラー: Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScriptでは、関数 add のパラメータ x と y が数値であることが宣言されており、戻り値も数値であると宣言されています。文字列を引数として渡すと、コンパイル時に型エラーが発生します。

インターフェースとオブジェクト

JavaScript

function greet(person) {
  console.log("Hello, " + person.name);
}

const user = { name: "Jane", age: 22 };
greet(user);  // 出力: Hello, Jane

JavaScriptでは greet 関数はどんなオブジェクトでも受け入れますが、そのオブジェクトに name プロパティがない場合は実行時にエラーが発生します。

TypeScript

interface Person {
  name: string;
}

function greet(person: Person) {
  console.log("Hello, " + person.name);
}

const user = { name: "Jane", age: 22 };
greet(user);  // 出力: Hello, Jane

TypeScriptでは、Person インターフェースを定義して、greet 関数が Person 型のオブジェクトのみを受け入れるようにしています。これにより、不適切なオブジェクトが渡された場合にコンパイル時にエラーを検出できます。