PRTypeScript と JavaScript の違い
この記事でわかること
Section titled “この記事でわかること”- TypeScriptとJavaScriptの違い
- 初心者はどちらから学ぶべきか
- TypeScriptを使うメリット
- JavaScriptだけで十分な場面
- React、Next.js、Node.jsでの選び方
- チーム開発でTypeScriptが使われる理由
初心者がWeb開発を学ぶなら、まずJavaScriptの基本を理解し、その後TypeScriptへ進むのが自然です。JavaScriptはブラウザで直接動くWebの基本言語で、TypeScriptはそのJavaScriptに型を加えて安全に書きやすくする言語です。
小さなWebページ、簡単なスクリプト、学習初期の実験ではJavaScriptだけでも十分です。一方で、ReactやNext.jsを使ったWebアプリ、チーム開発、API連携が多い画面、長く保守するコードではTypeScriptのメリットが大きくなります。
つまり、どちらか一方だけを選ぶというより、JavaScriptを土台にして、必要に応じてTypeScriptを使う、と考えるのが現実的です。
TypeScriptとJavaScriptの違い
Section titled “TypeScriptとJavaScriptの違い”| 比較項目 | JavaScript | TypeScript |
|---|---|---|
| 実行 | ブラウザやNode.jsで直接動く | JavaScriptへ変換して動かす |
| 型 | 動的に決まる | 事前に型を書ける |
| 始めやすさ | すぐ試せる | 環境設定が必要 |
| エラー発見 | 実行時に気づくことが多い | 実行前に気づけることが多い |
| 大規模開発 | ルールがないと崩れやすい | 型で構造を守りやすい |
| 学習コスト | 低め | 型と設定の理解が必要 |
JavaScriptはWebの基本です。TypeScriptはJavaScriptの上に乗る道具です。TypeScriptだけを学んでも、最終的に動くJavaScriptの挙動を理解していなければ、エラーの原因を追いにくくなります。
型があると何が変わるのか
Section titled “型があると何が変わるのか”TypeScriptの「型」は、変数や関数がどんな値を扱うのかを明確にする仕組みです。
たとえば、ユーザー情報を扱うときに、次のような形を決められます。
- idは数値
- nameは文字列
- emailは文字列
- isAdminは真偽値
これにより、存在しない項目を読んだり、文字列のつもりで数値を渡したりするミスに早く気づけます。API連携やフォーム処理では、この効果が大きくなります。
初心者はどちらから学ぶべきか
Section titled “初心者はどちらから学ぶべきか”完全初心者ならJavaScriptから始めるのがおすすめです。
理由は3つあります。
- ブラウザで直接動かして結果を見られる
- HTML/CSSとの関係を理解しやすい
- TypeScriptの型がなぜ必要か後で理解しやすい
JavaScriptで、変数、関数、配列、オブジェクト、DOM操作、イベント処理を学んでからTypeScriptへ進むと、型のありがたみが分かります。
ただし、すでにReactやNext.jsの教材を使う場合は、最初からTypeScriptテンプレートで学んでも構いません。その場合も、JavaScriptの基礎を同時に確認しながら進めてください。
JavaScriptだけで十分な場面
Section titled “JavaScriptだけで十分な場面”TypeScriptを必ず使う必要はありません。次のような場合はJavaScriptだけでも十分です。
- 1ページだけの簡単なWebサイト
- 少量のDOM操作
- 小さな個人ツール
- 学習初期の実験
- コードを長期保守しない一時的なスクリプト
TypeScriptは便利ですが、導入するとビルドや設定も増えます。小さなものを素早く作るなら、JavaScriptの軽さがメリットになります。
TypeScriptを使うべき場面
Section titled “TypeScriptを使うべき場面”TypeScriptが効果を発揮するのは、次のような場面です。
- ReactやNext.jsでWebアプリを作る
- APIから複雑なデータを受け取る
- 複数人で開発する
- 長く保守する管理画面を作る
- フォームや状態管理が多い
- リファクタリングが必要になる
特にAPIレスポンス、フォーム入力、コンポーネントprops、DB由来のデータを扱う場面では、型があることで修正時の事故を減らせます。
ReactやNext.jsではどちらを使うか
Section titled “ReactやNext.jsではどちらを使うか”ReactやNext.jsでは、TypeScriptがよく使われます。理由は、コンポーネントに渡すprops、state、APIデータ、イベントの型を明確にできるからです。
ただし、学習初期に型エラーばかりで手が止まるなら、JavaScriptでReactの基本を学んでからTypeScriptへ移るのもありです。重要なのは、画面の仕組みと型の仕組みを混ぜて混乱しないことです。
学習ロードマップ
Section titled “学習ロードマップ”- HTMLとCSS
- JavaScriptの基本
- DOM操作とイベント
- fetchと非同期処理
- npmとNode.jsの基本
- TypeScriptの基本型
- typeとinterface
- Reactのprops型
- APIデータの型定義
- Next.jsや実務的な構成
最初から完璧な型を書こうとする必要はありません。まずは、関数の引数と戻り値、オブジェクトの形、APIレスポンスの型から始めると実用的です。
- TypeScriptとは:
/languages/typescript/ - JavaScriptとは:
/languages/javascript/ - Web開発で使う言語:
/languages/use-cases/web-development/ - PythonとJavaScriptの違い:
/languages/compare/python-vs-javascript/
Q1. TypeScriptはJavaScriptの上位互換ですか？
Section titled “Q1. TypeScriptはJavaScriptの上位互換ですか？”JavaScriptに型を加えた言語と考えると分かりやすいですが、単純な上位互換というより、JavaScriptを安全に書くための仕組みです。最終的にはJavaScriptへ変換して実行します。
Q2. TypeScriptだけ学べばJavaScriptは不要ですか？
Section titled “Q2. TypeScriptだけ学べばJavaScriptは不要ですか？”不要ではありません。TypeScriptのコードもJavaScriptとして動くため、JavaScriptの実行時の挙動、DOM、非同期処理を理解する必要があります。
Q3. 個人開発でもTypeScriptを使うべきですか？
Section titled “Q3. 個人開発でもTypeScriptを使うべきですか？”規模によります。小さなスクリプトならJavaScriptで十分です。API連携や画面数が増えるWebアプリなら、個人開発でもTypeScriptのメリットがあります。
Q4. TypeScriptは難しいですか？
Section titled “Q4. TypeScriptは難しいですか？”最初は型エラーや設定で難しく感じることがあります。ただし、基本型、関数、オブジェクト、props型から段階的に学べば実用できます。
Q5. 仕事で使うならどちらが重要ですか？
Section titled “Q5. 仕事で使うならどちらが重要ですか？”どちらも重要です。JavaScriptの基礎を理解した上でTypeScriptを書けることが、現代のWeb開発では強みになります。
追加調査で押さえる実務ポイント
JavaScriptはbrowserやNode.jsで実行される標準言語で、TypeScriptはJavaScriptへ静的型検査と型構文を追加し、最終的にJavaScriptへ変換して実行する言語です。TypeScriptはJavaScriptのruntime挙動を変更せず、型errorを開発時に見つけやすくします。まずJavaScriptの基本を理解し、小規模scriptならJavaScript、複数人・長期保守・API連携ならTypeScriptを優先するのが実務的です。
最初の選択
| 条件 | 選択 |
|---|---|
| browserの基本学習 | JavaScript |
| 1fileの短いscript | JavaScript |
| React/Next.js新規 | TypeScript候補 |
| 複数人開発 | TypeScript |
| 公開library | TypeScript |
| 既存JS保守 | 段階的TypeScript |
| 型toolchainを増やせない | JavaScript |
根本的な違い
JavaScript:
function add(a, b) {
return a + b;
}
add("1", 2); // "12"TypeScript:
function add(a: number, b: number): number {
return a + b;
}
add("1", 2); // compile時に型error生成されるJavaScriptは通常のJavaScriptとして実行されます。
TypeScriptが追加するもの
- type annotation
- interface
- union
- generic
- narrowing
- mapped type
- declaration file
- compiler check
- editor補完
追加しないもの
TypeScriptの型はruntimeで消えます。入力validation、security、database constraint、API response保証は別途必要です。
const data = JSON.parse(input) as User;as Userだけではruntime validationになりません。
学習順
- JavaScript syntax。
- function・object・array。
- scope・closure。
- async/Promise。
- module。
- TypeScript basic type。
- union・narrowing。
- generic。
- tsconfig。
- framework。
JavaScriptだけで十分な場面
- bookmarklet
- small browser script
- learning prototype
- one-off Node script
- build stepを避けたい
- JSDocで十分
JavaScriptでも// @ts-checkとJSDocで型検査を段階導入できます。
TypeScriptを使うべき場面
- domain modelが複雑
- API schemaが多い
- refactorが多い
- team人数が多い
- package公開
- long-term maintenance
- IDE navigationが重要
React・Next.js
TypeScriptはframework必須ではありませんが、component props、API response、state、route parameterの型で利点があります。frameworkのcurrent templateを確認します。
移行
allowJs。checkJs。- declaration追加。
- file単位で
.ts。 - strictnessを段階強化。
- runtime validationを追加。
- CIで
tsc --noEmit。
よくある誤解
TypeScriptは上位互換か
ほぼすべてのJavaScript syntaxを受け入れますが、compiler設定と型errorによりそのままbuildできないcodeがあります。
JavaScriptは不要か
TypeScriptを正しく使うにはJavaScript runtime、prototype、async、moduleを理解する必要があります。
型があればbugが消えるか
型で表せる不整合を減らしますが、logic bug、runtime input、security bugは残ります。
次に進む
- 基礎から学ぶ: JavaScript
- 型付き開発: TypeScript
- Web全体: Web開発
- 比較一覧: 言語・DSL一覧
参考リンク
- www.typescriptlang.org - JavaScript利用者向け
- www.typescriptlang.org - runtimeとの関係
- www.typescriptlang.org - Handbook
- developer.mozilla.org - JavaScript