この記事では、以下の3点が理解できるようになります。
- JavaScriptとTypeScriptの違い（特に「型」の扱い方）
- TypeScriptがなぜ生まれ、どんな問題を解決するのか
- 今、TypeScriptを学ぶべき理由（開発現場での必然性）
JavaScriptの強みと限界
JavaScriptは、ほぼすべてのWebサイトで使われているプログラミング言語です。
書いてすぐ動く手軽さがあり、学びやすく、柔軟です。
ただし、その「柔軟さ」が裏目に出る場面もあります。
たとえば、次のようなコードをご覧ください。
function add(a, b) {
return a + b;
}
add(1, 2); // → 3（数値として足し算）
add("1", 2); // → "12"（文字列として結合）
add({}, true); // → "[object Object]true"
同じ関数でも、渡す値によってまったく違う動作になります。
これは、JavaScriptが「型（データの種類）」を実行時までチェックしない性質を持っているためです。
このようなしくみは「動的型付け（どうてきかたづけ）」と呼ばれます。
つまり、プログラムが動いて初めて型の間違いに気づくことになります。
TypeScriptは「間違いを事前に止める」ための言語
JavaScriptのような動的型付けでは、エラーが起きるまで間違いに気づけません。
TypeScriptはこの問題を解決するために作られました。
同じ関数をTypeScriptで書くと、次のようになります。
function add(a: number, b: number): number {
return a + b;
}
add(1, 2); // OK
add("1", 2); // エラー：「"1" は文字列（string）なので使えません」
TypeScriptは、関数にどんな型の値を渡すか、そして何が返ってくるのかをあらかじめ明記できます。
そのため、書いた時点で「その使い方は間違っている」と教えてくれます。
このような性質を「静的型付け（せいてきかたづけ）」といいます。
型だけではない、TypeScriptの機能
TypeScriptは、ただ型をつけるだけではありません。
ソフトウェアの設計を明確にし、安心してコードを書ける環境をつくるための言語です。
たとえば、interface（インターフェース）という機能を使えば、データの形を明示できます。
interface User {
id: number;
name: string;
isAdmin?: boolean;
}
function greet(user: User) {
console.log("こんにちは、" + user.name + "さん");
}
このように、どんなデータを受け取るかを明確に書けるため、他の開発者が見てもすぐに理解できます。
設計図をコードの中に書いているようなものです。
TypeScriptは現代の開発環境の標準
現在、多くのモダンな開発フレームワークやライブラリがTypeScriptを前提に設計されています。
| ツール・フレームワーク | TypeScript対応状況 |
|---|---|
| React（Next.js） | TypeScriptがデフォルト構成に含まれる |
| Vue 3 | Composition APIが型重視の設計 |
| Angular | 完全にTypeScriptで書かれている |
| Deno / Bun | TypeScriptをそのまま実行できる |
| Prisma / Viteなどの開発ツール | ほぼTypeScript前提で開発されている |
つまり、JavaScriptだけで開発することは、今や「少数派」になりつつあります。
- 実行前に間違いを発見できる（静的型チェック）
- 変数や関数の意図がコードに明示される（設計しやすい）
- コード補完やエラー表示が強化される（開発効率）
- 他人のコードも読みやすく、チーム開発に強い（保守性）
- モダンな開発環境に対応しやすい（将来性）
レガシー対応できる
TypeScriptを使えば「モダンな記法」で書きつつ、最終的にES5互換コードにトランスパイルすることが可能です。
わかりやすく言えばモダンなJavaScriptをIEモード(InternetExplor)で動かせるのです。
いわゆるレガシー(時代遅れ)システムにも対応しやすいです。
具体的にできること
| TypeScriptで書くコード例（モダン） | 出力されるJS（ES5互換） |
|---|---|
let, const | var に変換される |
class Foo {} | プロトタイプベースに変換 |
() => {}（アロー関数） | 通常の function に変換 |
import / export | CommonJSやIIFEに変換可能 |
async/await | Promise + .then() に変換（ポリフィルが必要な場合あり） |
コンパイル設定で調整できる
tsconfig.json の設定でターゲットやモジュール形式を細かく制御できます。
{
"compilerOptions": {
"target": "es5", // 出力コードの互換性をES5に
"module": "commonjs", // モジュール形式（他にesnext, amdなど）
"lib": ["es6", "dom"], // 必要な機能に応じて調整
"downlevelIteration": true,// for-of などの構文をES5互換で出力
"outDir": "./dist", // 出力先ディレクトリ
"strict": true // 型の厳格モード（推奨）
}
}
注意点（ES5に落とす際の限界）
- 一部の機能はポリフィルが必要
Promise,Map,Set,Array.prototype.includesなど- →
core-jsやes6-promiseを導入する必要あり
- コードサイズは増える
- 特に
classやasync/awaitを多用すると、出力JSが膨らむ
- 特に
- パフォーマンスはES6より劣る
- モダンブラウザ上でネイティブES6を使う方が高速・省メモリ
TypeScriptは「壊れにくく、共有しやすいコード」を書くための言語
JavaScriptは自由で便利ですが、規模が大きくなると壊れやすいという弱点があります。
TypeScriptは、その自由さを保ちつつ、安全に制御する仕組みを提供します。
今後、長く使えるスキルとして学ぶ価値があるのは、TypeScriptの方です。
次回は、TypeScriptのインストール方法について解説します。
Comment