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
- 特定トピックを深掘りしたい: 上の表から該当する章を直接開く
学習ガイドの棲み分け
本ガイドは TypeScript 言語仕様の体系学習 に focus しています。同サイトの体系学習ガイドとは補完関係にあります。
| 連載 | Focus | 段階 | 前提 | 例 |
|---|---|---|---|---|
| JavaScript ガイド | 言語仕様 (JS) | 入門 | なし | 「アロー関数と this の挙動」 |
| TypeScript ガイド (本ガイド) | 言語仕様 | 入門〜中級 | JS 基礎 | 「Mapped Types の使い方」 |
| React ガイド | フレームワーク | 入門〜中級 | HTML/CSS + JS 基礎 | 「useEffect の依存配列」 |
| Tailwind CSS ガイド | CSS スタイリング | 入門〜中級 | HTML/CSS 基礎 | 「@theme で色を追加」 |
| クリーンコードガイド | 設計規範 | 中級以上 | TS 基礎 | 「any を unknown + 型ガードに」 |
| TypeScript デザインパターン | 設計カタログ | 中級以上 | TS + OOP 基礎 | 「Strategy は関数で足りるか」 |
各ガイドは 補完関係 にあります。言語の土台を JavaScript ガイドで固め、言語仕様を TypeScript ガイドで身につけます。その上で UI を React ガイドで組み立て、スタイリングを Tailwind CSS ガイドで磨きます。コード品質をクリーンコードガイドで底上げし、設計の選択肢を TypeScript デザインパターンで広げる、という流れが想定動線です。
それでは 入門 から始めましょう。