こんにちは、かつコーチです。
JavaScript基礎編、65記事お疲れさまでした。
とはから始まり、変数、条件分岐、DOM操作、非同期処理、そしてデバッグ手法まで、本当によく頑張ったと思います。
さて、今日からは新シリーズ「TypeScript編」がスタートします。
第1回のテーマは「TypeScriptとは何か」、そして「JavaScriptと何が違うのか」です。
すでにJavaScriptの基礎を学んできたあなたなら、驚くほどスムーズに理解できるはずなので、リラックスして読み進めてください。
TypeScriptとは？
JavaScriptに「型」を追加した言語
TypeScriptは、Microsoftが開発したプログラミング言語で、ひとことで言うと「JavaScriptに型（データの種類を表す仕組み）を追加した言語」です。
たとえば「この変数には数値しか入らない」「この関数は文字列を返す」といったルールを、コードを書いている段階で明示できます。
JavaScriptでは、変数にどんな種類の値でも自由に代入できました。
let age = 20;
age = "二十歳"; // JavaScriptではエラーにならない
一見便利に思えますが、この自由さが原因で「本当は数値が入っているはずなのに、いつの間にか文字列が入っていた」というバグを何度も踏んできた人は多いはずです。
私自身、JavaScript基礎編のundefinedとnullの回で触れたようなうっかりミスに、実務でも何度も泣かされてきました。
TypeScriptは、こうした「うっかり」をコードを書いている最中に検知できるようにするために生まれた言語です。
なぜTypeScriptが必要なのか
TypeScriptが生まれた背景には、Webアプリケーションの大規模化があります。
数十行のスクリプトなら、JavaScriptの自由さはそのままメリットになります。
しかし、数万行を超えるようなアプリを複数人で開発するようになると、話は変わってきます。
- 「この関数、何を渡せばいいんだっけ？」と毎回コードを読み返す
- 他の人が書いた関数に、想定外の型の値を渡してバグを生む
- リファクタリング（コードの整理）のときに、影響範囲が分からず怖くて触れない
こうした「大規模開発ならではの悩み」を解決するために、型という仕組みで開発時にミスを検知できるようにしたのがTypeScriptです。
TypeScriptとJavaScriptの関係
TypeScriptはJavaScriptの「上位互換」
TypeScriptを理解するうえで一番大事なポイントは、TypeScriptはJavaScriptに機能を追加したものであって、まったく別の言語ではないということです。
専門的には「スーパーセット（上位互換）」と呼ばれる関係です。
つまり、これまでJavaScript基礎編で学んできた変数・条件分岐・関数・DOM操作の知識は、そのままTypeScriptでも使えます。
新しく覚えるのは「型」という考え方が中心で、ゼロから別の言語を学び直すわけではないので安心してください。
コンパイルするとJavaScriptになる仕組み
もう一つ重要なのが、ブラウザはTypeScriptのコードを直接実行できないという点です。
ブラウザが理解できるのはJavaScriptだけなので、TypeScriptで書いたコードは、実行前に「コンパイル（変換処理）」という工程を経て、普通のJavaScriptに変換されます。
流れを図にすると、こんなイメージです。
TypeScriptファイル（.ts） → コンパイル（tscコマンド等） → JavaScriptファイル（.js） → ブラウザで実行
このコンパイルを行うのがtsc（TypeScript Compiler）というツールで、次回の環境構築の回で実際に使い方を解説します。
つまり、TypeScriptは「開発中は型でミスをチェックしてもらい、最終的には普通のJavaScriptとして動かす」ための言語だと考えると整理しやすいです。
型があるとどう変わるのか
エディタが間違いをその場で教えてくれる
TypeScriptの一番の恩恵は、コードを書いている最中にエディタ（VS Codeなど）がリアルタイムでミスを指摘してくれることです。
function greet(name: string): string {
return "こんにちは、" + name + "さん";
}
greet("かつコーチ"); // OK
greet(123); // エディタが赤い波線でエラーを表示してくれる
name: stringという部分が「nameには文字列しか渡せません」という型注釈で、数値の123を渡そうとした瞬間に、実行する前からエディタが間違いを教えてくれます。
JavaScriptだと、この間違いは実際にコードを実行してエラーが出るまで気づけないことも多いので、大きな違いです。
実行前にミスに気づける安心感
JavaScript基礎編のデバッグの回で、私は「エラーの再現条件を固定してから調査する」という話をしました。
TypeScriptを使うと、そもそも型に関するミスの多くは実行する前の段階で弾かれるため、デバッグに費やす時間そのものが減っていきます。
私が初めてTypeScriptを実務で使ったとき、正直「型を書くのが面倒くさそう」という第一印象がありました。
ですが、いざ使ってみると「この関数に何を渡せばいいか」がコードを見ただけで分かるようになり、他の人が書いたコードを読む速度が明らかに上がったのを覚えています。
まとめ
この記事のポイント
- TypeScriptは、JavaScriptに「型」という仕組みを追加した言語である
- JavaScriptの上位互換（スーパーセット）なので、これまでの知識はそのまま活かせる
- ブラウザで動かす前に、コンパイルという工程で普通のJavaScriptに変換される
- 型があることで、コードを書いている段階でミスに気づけるようになる
次に読むべき記事
次回は、実際に自分のパソコンでTypeScriptを動かせるようにするための環境構築を解説します。
tscコマンドとtsconfig.jsonという設定ファイルの基本を、手を動かしながら見ていきましょう。
→ 次の記事：TypeScriptの環境構築：tscコマンドとtsconfig.jsonの基本
