スキルアップカレッジ TypeScript 入門
公開日：
コース概要
「JavaScript 入門」で身につけた文法の続きとして、コードに型という説明書を足していくコースです。プロパティ名の綴り違い、undefined の紛れ込み、引数の順番の取り違え——動的型付けの JavaScript では実行するまで気づけない事故を、TypeScript は書いている最中に教えてくれます。本コースでは、型注釈の基礎から型推論、インターフェース、クラスとモジュール、ジェネリクスまでをひと通り学び、最後に既存の JavaScript コードへ少しずつ型を足していく実践的な手順を身につけます。型は書き手を縛るものではなく、読み手に意図を伝えるための道具である——この考え方をコース全体の背骨として、各レッスンで繰り返し確認します。
学習の流れ
レッスン1〜2 で TypeScript の存在意義と型注釈の基本を押さえ、レッスン3で型推論とユニオン型という TypeScript らしい考え方を厚めに扱います。レッスン4〜5 で関数とデータ構造に型をつける方法を身につけたら、レッスン6ではコードをファイル単位で分けるクラスとモジュールを扱います。ここは JavaScript 入門コースが扱っていない領域なので、時間をかけて丁寧に進めます。レッスン7でジェネリクスと既存コードへの型の足し方を学び、レッスン8で型との長期的な付き合い方を確認して締めくくります。前半（レッスン1〜3）は「型とは何か」を、中盤（レッスン4〜6）は「型でコードを構造化する」を、後半（レッスン7〜8）は「型を現実のコードに適用する」を扱う流れです。
このコースで学べること
- ✓ 値・関数・オブジェクトに型注釈を付け、コードに意図を書き込めるようになる
- ✓ 型推論の仕組みを理解し、型を書く場所と書かなくてよい場所を判断できる
- ✓ ユニオン型・リテラル型・型の絞り込みを使って、null や undefined を安全に扱える
- ✓ インターフェースと型エイリアスを使い分け、構造的型付けの考え方を説明できる
- ✓ class と module を使って、大きくなったコードを意味のある単位に分割できる
- ✓ ジェネリクスの基礎を理解し、既存の JavaScript コードに少しずつ型を足していける
- ✓ any に頼らず、エラーメッセージを読んで自分で型の問題を解決できる
対象者
JavaScript の基礎を学んだ方、規模が大きくなったコードで「どこを直すと何が壊れるかわからない」状態に困っている方、チームで開発する場面が増えてきた方、求人や技術記事で TypeScript を見かけて何が違うのか知りたい方
講師紹介
森田 彩花（もりた あやか）
Webコーダー／プログラミングスクール講師
Web制作会社でコーダー・フロントエンドエンジニアとして 7 年間、200 サイト以上の制作・改修に携わる。2022 年からプログラミングスクールで初学者向けの講師を務め、HTML・CSSに加えJavaScriptの入門指導も担当。「最初の一歩でつまずかないこと」を最優先に、手を動かす時間を多く取るスタイルが評判。現場のコードが大きくなるにつれて「どこを直すと何が壊れるかわからない」という相談を受ける機会が増え、TypeScript を段階的に導入する支援も行うようになった。JavaScript 入門コースの続編として、型という新しい視点を無理なく積み上げられるよう本コースを設計している
受講される方へのメッセージ
「型注釈は、JavaScript を難しくするための仕組みではありません。むしろ逆で、コードに書いた意図を、後で読む人（数か月後の自分を含みます）に伝えるための説明書です。最初はやや窮屈に感じるかもしれませんが、書いた分だけコードが語ってくれるようになります。端から少しずつ、一緒に慣れていきましょう」
レッスン一覧
-
1
TypeScript とは何か——JavaScript に型を足す理由
プロパティ名の綴り違いや undefined の紛れ込みなど、動的型付けで実務に起きる事故を具体的に確認し、TypeScript がそれをどう防ぐかを見る。開発環境を整え、はじめてのコンパイルを体験し、コース全体で繰り返し戻ってくる中核メッセージを提示する
-
2
型注釈の基礎——値に名前と形を与える
文字列・数値・真偽値・配列・オブジェクトへの型注釈の書き方を学ぶ。any がなぜ危険なのか、型を書く場所と書かない場所の見極め方を身につける
-
3
型推論とユニオン型——書かなくても型はついている
型推論の仕組みと let・const で推論結果が変わる理由を理解する。ユニオン型・リテラル型で複数の可能性を型に表現し、null と undefined を安全に扱う型の絞り込みを学ぶ
-
4
関数に型をつける
引数と戻り値への型注釈、省略可能な引数とデフォルト値、戻り値を返さない関数の型、コールバック関数の型を学ぶ。既刊で書いた関数を型付きで書き直す
-
5
インターフェースと型エイリアス
interface と type の違いと使い分けを理解する。拡張・構造的型付け・読み取り専用プロパティを学び、ToDo アプリのようなデータ構造に型をつける
-
6
クラスとモジュール——大きくなったコードを分ける
class の基礎と型付け、アクセス修飾子を学ぶ。import・export によるモジュール分割と、ファイルをまたいだ型の共有方法を身につける
-
7
ジェネリクスと、既存コードの型付け
型を引数のように扱うジェネリクスの基礎と、よく使う組み込みの型を学ぶ。既存の JavaScript に少しずつ型を足していく手順、any を減らす順序、型チェックを自動実行につなぐ接続点を扱う
-
8
型と付き合っていく——次のステップ
エラーメッセージの読み方、型定義ファイルという存在、フレームワークでの型の使われ方を概観する。型を書きすぎないという判断を学び、修了後の学習方向を案内する
-
✓
総復習テスト
全レッスンの内容を振り返るテスト
このコースの用語集（71語）
- アクセス修飾子
- class のプロパティやメソッドに、外部からどこまで触れるようにするかを指定するキーワード。`public`・`private`・`protected` の 3 種類がある。
- undefined（アンディファインド）
- 値がまだ設定されていない状態を表す値。TypeScript では独立した型としても扱われ、オプショナルなプロパティなどで使われる。
- unknown
- 型が不明な値を表す型。`any` と異なり、中身を使う前に型を確認しないとコンパイルエラーになる、より安全な選択肢。
- インスタンス
- class という設計図をもとに `new` で作られた、実際のオブジェクト。同じクラスから複数のインスタンスを作れる。
- インターフェース（いんたーふぇーす）
- `interface` で定義する、オブジェクトや関数の形に付けた名前。同じ形を何度も書く手間を省ける。
- implements
- class が特定のインターフェースの形を満たすことを約束するキーワード。必要なプロパティやメソッドの実装漏れをコンパイルの段階で検出できる。