TypeScript ガイド
このガイドについて
TypeScript を 言語仕様から実践まで体系的に学ぶ 全 21 章のガイドです。入門から最終プロジェクトまで、8 つのテーマに沿ってステップを踏んで進められます。
このガイドの特徴
- 段階的: なぜ TypeScript を使うのかから始め、文法 → 型システム → ジェネリクス → 実践まで連続した流れで学べる
- コード例重視: 各章で豊富な Bad / Good 比較やコード片で「使う場面」を示す
- 演習問題付き: 章末に「ヒント」「回答と解説」セクションを用意 (折りたたみ式)
- 既知の発見: 公式リファレンスでは見えづらい運用上の Tips を随所に
ガイドの構造
学習テーマの概要
ガイドは 8 つのテーマで構成され、各テーマは複数の章にまたがります。
| テーマ | 扱う内容 | 章数 | 概要 |
|---|---|---|---|
| 入門 | TypeScript とは | 2 | TypeScript の基本概念と環境構築。なぜ TypeScript を使うのか |
| 基本の型 | プリミティブから Union まで | 4 | プリミティブ / 配列 / オブジェクト / Union / リテラル / Enum |
| 関数 | 関数の型設計 | 2 | 関数の型注釈、オーバーロード、より高度な関数型 |
| クラスと OOP | オブジェクト指向 | 2 | クラス、継承、アクセス修飾子、抽象クラス |
| 高度な型システム | 型の絞り込みと変換 | 2 | 型ガード、タグ付き Union、keyof・satisfies などの型操作 |
| ジェネリクス | 汎用型パラメータ | 4 | ジェネリクスの仕組み、制約、Mapped/Conditional Types、ユーティリティ型 |
| 開発環境 | ツールチェーン | 2 | モジュール、tsconfig、開発ツール |
| 実践 | 実際のプロジェクト | 3 | React / Express / 最終プロジェクト |
推奨される読み方
- 初学者: 入門 から順番に読み、章末の演習を解いてから次へ進む
- 既習者: 高度な型システムや実践のテーマから拾い読みでも OK
- 特定トピックを深掘りしたい: 上の表から該当する章を直接開く
4 つの学習ガイドの棲み分け
本ガイドは TypeScript 言語仕様の体系学習 に focus しています。同サイトには 4 つの体系学習ガイドがあり、補完関係にあります。
| 軸 | TypeScript ガイド (本ガイド) | React 入門 | Tailwind CSS ガイド | Clean Code |
|---|---|---|---|---|
| Focus | 言語仕様 | フレームワーク | CSS スタイリング | 設計規範 |
| 段階 | 入門〜中級 | 入門〜中級 | 入門〜中級 | 中級以上 |
| 前提 | JS 基礎 | TS + JS | HTML/CSS 基礎 | 言語不問 |
| 例 | 「Mapped Type の使い方」 | 「useEffect の依存配列」 | 「@theme で色を追加」 | 「any を unknown + 型ガードに」 |
4 ガイドは 補完関係 にあります。言語仕様を本ガイドで身につけ、UI を React 入門 で組み立てます。その上でスタイリングを Tailwind CSS ガイドで磨き、コード品質を Clean Code で底上げする、というルートが想定動線です。
それでは 入門 から始めましょう。