Frontend Academy · レッスン

TypeScript を学ぶ理由：コンパイル時に型でバグを検出

TypeScript の価値を理解します。静的解析、IDE のオートコンプリート、そしてデプロイ前に実行時エラーの一群を排除できる仕組みを学びます。

「TypeScript を学ぶ理由：コンパイル時に型でバグを検出」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

JavaScript の動的型付けの問題

JavaScript は型をチェックしません。誤った型の引数で関数を呼び出したり、存在しないプロパティにアクセスしたり、オブジェクトが必要な場所に null を渡したりできます。そしてエラーが実行時、場合によっては本番環境で初めて発生します。

// JS: no error until runtime
function greet(user) {
  return `Hello, ${user.name.toUpperCase()}`;
}
greet(null); // TypeError: Cannot read properties of null

TypeScript：開発時の型チェック

TypeScript は JavaScript に静的型システムを追加します。TypeScript コンパイラー（tsc）はコードの実行前にコードを解析し、入力中に型エラーを報告します。ユーザーの環境でクラッシュするはずだった同じバグを、エディター上で検出できます。

// TS: error caught immediately
function greet(user: { name: string }) {
  return `Hello, ${user.name.toUpperCase()}`;
}
greet(null); // Error: Argument of type 'null' is not assignable to parameter

TypeScript は JavaScript にコンパイルされる

TypeScript は JavaScript のスーパーセットです。つまり、有効な JS はすべて有効な TS です。コンパイラーは型注釈を削除し、どのブラウザーや Node.js 環境でも実行できる通常の JavaScript を生成します。型が存在するのは開発時だけです。

// TypeScript source:
function add(a: number, b: number): number {
  return a + b;
}

// Compiled JavaScript:
function add(a, b) {
  return a + b;
}

IDE の自動補完と IntelliSense

TypeScript は VSCode の IntelliSense を支えています。型付けされたオブジェクトのプロパティにアクセスすると、エディターは存在するプロパティを正確に把握し、それらを候補として提示します。プロパティ名の入力ミスはすぐに指摘されるため、コードを実行する必要はありません。

安心してリファクタリングする

JavaScript で関数名を変更したりシグネチャを変更したりするには、慎重に手動検索する必要があります。TypeScript では、更新が必要なすべての呼び出し箇所をコンパイラーが知らせてくれるため、リファクタリングを安全かつ機械的に行えます。

自己文書化コード

型注釈は、データに期待される形を記述します。processOrder(order: Order): Promise<Invoice>のような関数シグネチャなら、何を受け取り何を返すのかが読者に正確に伝わるため、実装を読む必要はありません。

TypeScript導入の進め方

すべてを一度に変換する必要はありません。TypeScriptは段階的に導入できます。新しいファイルに型を追加し、重要なコードには.ts拡張子を使用し、レガシーコードには.jsファイルを残します。tsconfigのallowJs: trueを設定すると、両方を共存させられます。

型のみのインポート — 実行時コストなし

TypeScriptの型とインターフェースは、コンパイル時に消去されます。そのため、本番バンドルのサイズを1バイトも増やしません。型は純粋に開発者向けのツールであり、実行時のコストなしで生産性を高められます。

TypeScriptエコシステム

DefinitelyTyped（@types/*）は、数千ものJavaScriptライブラリ（React、Lodash、Node.jsの組み込みモジュール）向けに型定義を提供します。ライブラリと一緒にインストールしてください: npm install -D @types/node。

JavaScriptのスーパーセット — 移行コストが低い

すべてのJavaScriptは有効なTypeScriptでもあるため、.jsファイルの拡張子を.tsに変更すれば、すぐにコンパイラを実行できます。注釈を追加していくと、型エラーが段階的に検出されます。

TypeScriptの型推論

TypeScriptは代入内容から型を推論するため、すべての変数に注釈を付ける必要はありません。const n = 42はnumber型として推論されます。let greeting = 'Hello'はstring型です。明示的な注釈が必要なのは、推論だけでは不十分な場合や、ドキュメントとして型を示したい場合だけです。

const count = 0;        // inferred: number
const name = 'Alice';   // inferred: string
const active = true;    // inferred: boolean
// vs explicit:
const id: number = 42;

確認問題

TypeScriptが型エラーを報告するのはいつですか。

振り返り: TypeScriptを使う理由

TypeScriptは、実行時ではなくコンパイル時に型エラーを検出します。開発者専用のツールとして型を追加するため、実行時のコストはゼロです。IDEのIntelliSense、安全なリファクタリング、自己文書化されたAPIが主なメリットです。JavaScriptのスーパーセットであり、段階的に導入できます。

よくある質問

「TypeScript を学ぶ理由：コンパイル時に型でバグを検出」レッスンは無料ですか？

はい。「TypeScript を学ぶ理由：コンパイル時に型でバグを検出」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「TypeScript を学ぶ理由：コンパイル時に型でバグを検出」で何を学びますか？

TypeScript の価値を理解します。静的解析、IDE のオートコンプリート、そしてデプロイ前に実行時エラーの一群を排除できる仕組みを学びます。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「TypeScript を学ぶ理由：コンパイル時に型でバグを検出」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る