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

生徒

「TypeScriptとJavaScriptって似ているって聞いたんですけど、変数の宣言に違いがあるんですか？」

先生

「はい、両方ともletやconstを使って変数を宣言できます。しかし、TypeScriptには型注釈という機能があり、これが大きな違いなんです。」

生徒

「型注釈って何ですか？難しそう…」

先生

「大丈夫です。型注釈とは、その変数がどんな種類の値を扱うのか前もって決める仕組みのことです。例え話を使って説明していきますね。」

1. TypeScriptとJavaScriptの基本的な違い

TypeScript（たいぷすくりぷと）とJavaScript（じゃばすくりぷと）は、どちらもWeb開発で広く使われている人気のプログラミング言語です。しかし、TypeScriptは静的型付けという特徴を持っています。静的型付けとは、変数の種類（数値、文字列など）をあらかじめ決めておく仕組みのことで、プログラムを書いている段階で誤りを発見できるという大きな利点があります。

一方、JavaScriptは動的型付けであり、変数の型を宣言せずに自由に使えます。これは簡単に書けるというメリットがある一方で、意図しない型の値を扱ってしまい、エラーに気づくのが実行時になるという問題もあります。

2. JavaScriptの変数宣言（型注釈なし）

まずはJavaScriptでの変数宣言の例を見てみましょう。JavaScriptでは、型について何も書かずに変数を宣言します。値を好きなように変えることもできます。


let value = 10;
value = "文字列に変更";  // JavaScriptでは自由に代入できる
console.log(value);


文字列に変更

最初は数値（すうち）だった変数に文字列（もじれつ）を代入しても、JavaScriptではエラーになりません。しかし、大きなプログラムでは、この自由さが原因で重大なバグにつながってしまうことがあります。

3. TypeScriptの変数宣言（型注釈を使う）

TypeScriptでは、変数の型を明確に宣言します。型注釈を使うことで、プログラムを実行する前に誤りを見つけることができます。


let age: number = 18;
age = 20;      // OK
age = "二十歳"; // エラーになる

数値型を意味するnumberという型注釈を指定しています。そのため、文字列を代入しようとすると、TypeScriptは「型が違います」と教えてくれます。

これは、学校でノートと教科書を区別して整理しておくのと似ています。ノートの棚に教科書を入れようとすると違和感がありますよね。それと同じで、TypeScriptは間違ったものを入れようとすると教えてくれるのです。

4. 型注釈が役立つ場面の例

例えば、ユーザーの年齢を扱う場面を考えてみましょう。年齢は数値であり文字列ではありません。正しい型を強制することで、プログラムの品質と信頼性が大きく向上します。


function showAge(age: number) {
    console.log(`あなたの年齢は${age}歳です`);
}

showAge(25);     // OK
showAge("三十"); // エラー


エラー: string型はnumber型に代入できません

このように、TypeScriptの型注釈はプログラムの安全性を守る重要な役割を持っています。

5. 型注釈は必ず必要？

TypeScriptでは、すべての変数に型注釈を付ける必要はありません。代入する値から自動的に型を推論（すいろん）する、型推論という仕組みがあります。


let score = 80; // 自動的にnumber型と判断される
score = 90;     // OK
score = "高得点"; // エラー

ただし、チーム開発や規模が大きい開発では、より安全性を高めるために型注釈を明示することが推奨されています。

6. TypeScriptとJavaScriptの違いまとめ表

変数宣言の違いをわかりやすく比較してみましょう。

項目	TypeScript	JavaScript
型注釈	あり（指定可能）	なし
型チェック	コンパイル時にチェック	実行時に問題が発生
安全性	高い	低め
学習のしやすさ	少し難しいが安全	簡単で自由