Web開発を学び始めると、JavaScriptの次に登場する技術として TypeScript をよく目にするようになります。
特に近年のフロントエンド開発では
- React
- Vue
- Angular
などのフレームワークと組み合わせて TypeScriptを使用するケースが非常に増えています。
この記事では次の内容を初心者向けに解説します。
- TypeScriptとは何か
- JavaScriptとの違い
- なぜTypeScriptが必要なのか
- TypeScriptを使うメリット
JavaScriptを学び始めたばかりの人でも理解できるように説明していきます。
TypeScriptとは
TypeScriptは Microsoftが開発したプログラミング言語です。
ただし、完全に新しい言語というよりは
JavaScriptを拡張した言語
です。
最大の特徴は
型（Type）を使えること
です。
JavaScriptでは変数にどんな値でも代入できます。
例えば次のコードです。
let value = 10
value = "hello"このコードはJavaScriptでは問題なく実行されます。
しかし大規模なアプリケーションでは、このような柔軟さが原因でバグが発生することがあります。
TypeScriptでは次のように型を指定できます。
let value: number = 10この状態で文字列を代入するとエラーになります。
つまり
「意図しない値が入ることを防げる」
というメリットがあります。
JavaScriptの問題点
JavaScriptは非常に人気のある言語ですが、いくつかの弱点があります。
特に問題になるのが 型の問題です。
次のコードを見てください。
function add(a, b) {
return a + b
}
add("1", 2)この結果は
"12"になります。
これはJavaScriptでは
文字列 + 数値の演算が文字列結合になるためです。
多くの場合、開発者は
3という結果を期待します。
このようなバグは 実行するまで気づかない ことが多いです。
TypeScriptの解決方法
TypeScriptでは次のように書きます。
function add(a: number, b: number): number {
return a + b
}このコードでは
- aは数値
- bは数値
- 戻り値も数値
と定義しています。
もし次のように書くと
add("1", 2)TypeScriptはエラーを出します。
つまり
実行前にバグを発見できる
という大きなメリットがあります。
TypeScriptはJavaScriptの上位互換
TypeScriptは JavaScriptの上位互換です。
つまり
JavaScriptのコードはそのままTypeScriptで使えます。
例えば次のコード
console.log("Hello")これはJavaScriptと同じです。
TypeScriptのコードは最終的に JavaScriptに変換（コンパイル）されます。
TypeScript
↓
JavaScript
↓
ブラウザブラウザはTypeScriptを理解できないため、この変換が必要です。
TypeScriptが普及した理由
TypeScriptが急速に普及した理由は
Webアプリケーションの大規模化
です。
昔のJavaScriptは
- 数百行
- 小さなスクリプト
のような用途が多くありました。
しかし現在は
- SPA（Single Page Application）
- Reactアプリ
- 管理画面
- SaaS
など、JavaScriptだけで数万行のコードを書くことも珍しくありません。
この規模になると
- 型がない
- データ構造が不明
- バグが見つかりにくい
という問題が発生します。
TypeScriptはこれらの問題を解決するために使われています。
TypeScriptのメリット
TypeScriptを使うメリットは主に4つあります。
1 バグを早期発見できる
TypeScriptはコンパイル時に型チェックを行います。
つまり
プログラムを実行する前にエラーを発見できます。
2 コードが読みやすい
型を見るだけでデータ構造が分かります。
例えば
type User = {
name: string
age: number
}この定義を見るだけで
- nameは文字列
- ageは数値
ということが分かります。
3 IDE補完が強力
VSCodeなどのエディタでは
- 自動補完
- 型チェック
- エラー表示
などが強化されます。
4 大規模開発に強い
TypeScriptは
- React
- Angular
- Vue
などのフレームワークと相性が良いです。
そのため企業の開発でもよく使われています。
TypeScriptは難しいのか？
初心者が気にするのは
TypeScriptは難しいのか
という点です。
結論としては
最初は少し難しいが、慣れると楽になる
です。
理由は
- 型を書く必要がある
- Genericsなどの概念がある
ためです。
しかし一度理解すると
JavaScriptより安全に開発できる
ようになります。
まとめ
この記事ではTypeScriptの基本を解説しました。
ポイントを整理します。
- TypeScriptはJavaScriptの拡張言語
- 型を使ってバグを防ぐ
- JavaScriptの上位互換
- ReactやVueと相性が良い
現在のフロントエンド開発ではTypeScriptは非常に重要な技術です。
JavaScriptを学んだ後は、ぜひTypeScriptにも挑戦してみてください。
次の記事
次回は
TypeScriptの環境構築
について解説します。
- Node.js
- TypeScriptコンパイラ
- tsconfig
など、実際にTypeScriptを使うための準備を解説します。
コメント