JavaScriptは書けるのに、TypeScriptの型まわりで手が止まる——そんな開発者に向けた学習リソースが、freeCodeCampとScrimbaの共同制作で公開されています。

この記事では、22パート構成の講座の内容、対象者、学習形式、他の教材との違いを整理します。

この記事でわかること

  • 22レッスンで何を学べるか
  • 誰向けの講座か、どんな形式で進むか
  • freeCodeCampが提供する他のTypeScript教材との違い

freeCodeCampとScrimbaが手がけた入門講座

https://scrimba.com/g/gintrototypescript

2018年7月、freeCodeCampはMedium上で、Scrimba上の無料TypeScript講座を紹介しました（参考）。講師はDylan C. Israel氏で、YouTubeチャンネル「Coding Tutorials 360」を運営するエンジニアです。Scrimbaの講師プロフィールによると、同氏はClickUpでエンジニアリングマネージャーに就任しており、Scrimbaの複数コースを手がけてきました。

講座は全22レッスン、所要時間は約54分です。Scrimbaのページでは4,000人以上が受講しており、中級レベル（Intermediate）に分類されています。前提知識として、JavaScriptの基礎が必要です。

なぜ今TypeScriptを学ぶのか

TypeScriptは、JavaScriptに型システムを加えた言語です。有効なJavaScriptコードはそのままTypeScriptでも動きますが、コンパイル時の型チェックでバグを先に見つけられます。freeCodeCampの紹介記事では、TypeScriptコードはエラーが少なく、読みやすく、保守しやすいと説明されています。

現場の求人でもTypeScriptの記載は増え続けています。JavaScriptだけで書いてきた開発者が、型の考え方を短時間で身につける入口として、この22パート講座は位置づけられています。

22レッスンのカリキュラム

講座は基礎から実践セットアップまで、段階的に進みます。各レッスンの概要は次のとおりです。

型の基本（Part 1〜7）

  • 導入：TypeScriptを学ぶ理由とコース構成
  • 変数の型（string、number、boolean）
  • any型による複数型の代入
  • nullとundefinedのサブ型
  • 暗黙的型付けと明示的型付け
  • instanceofによる型チェック
  • 型アサーション（asキーワード）

データ構造（Part 8〜11）

  • 型付き配列（number[]など）
  • タプル（複数の型を1つのコレクションに格納）
  • 列挙型（enum）
  • オブジェクト型の宣言

関数と型定義（Part 12〜15）

  • 関数パラメータへの型指定
  • 戻り値の型指定
  • typeキーワードによるカスタム型
  • interfaceによる型の命名と構造定義

応用パターン（Part 16〜20）

  • バレル（複数モジュールのエクスポートを1ファイルにまとめる手法）
  • モデルクラス（インターフェースにデフォルト値やメソッドを持たせる）
  • 交差型・ユニオン型（|と&の使い分け）
  • ジェネリクス（複数のデータ型に対応する再利用可能なコンポーネント）
  • アクセス修飾子（publicとprivate）

実践と仕上げ（Part 21〜22）

  • ローカル環境へのNode.jsとTypeScriptの導入、.tsファイルのコンパイル手順
  • TSLintの紹介と、さらなる学習のヒント

最終レッスンではTSLintに触れます。TSLintはコードのベストプラクティスをチェックするツールで、当時の本番コード品質向上に使われていました。現在はESLintへの移行が進んでいますが、リントの考え方自体は今も有効です。

Scrimbaのインタラクティブ形式

この講座の特徴は、動画を見ながら同じ画面でコードを書けるScrimba形式です。講師のスクリーンキャストが再生される画面にエディタが重なっており、一時停止して自分の手でコードを試せます。受講者は4,000人以上に達しており、動画視聴と実践を切り替えずに進められる点が評価されています。

Scrimbaのページでは現在「Tier Pro」と表示されています。2018年の発表時は無料で提供されていました。受講を検討する際は、Scrimbaの料金プランを確認してください。

freeCodeCampの他のTypeScript教材

freeCodeCampはこの22パート講座以外にも、TypeScript教材を複数公開しています。

  • 5時間フルコース（Hitesh Choudhary氏）：型エイリアス、クラス、抽象クラス、判別ユニオンなど、より広い範囲をカバー
  • 2時間インタラクティブコース（Bob Ziroll氏）：Scrimba上で各レッスンのコードが利用可能。リテラル型、ユーティリティ型、型ナローイングなどを扱う

22パート講座は約54分と最も短く、JavaScript経験者がTypeScriptの全体像を素早く掴む用途に向いています。じっくり深掘りしたい場合は、5時間コースの方が適しています。

受講前に押さえておきたいこと

対象者は「JavaScriptは書けるが、TypeScriptは初めて」という開発者です。変数、関数、オブジェクトの基本がわからない状態では、先にfreeCodeCampのJavaScript入門コースを終えた方がスムーズです。

講座内のカスタム型（typeキーワード）は、現在のTypeScriptではinterfaceやclassを優先する流れがあります。ただし、既存コードを読む場面では遭遇するため、学習内容として押さえておく価値はあります。

最後に、TypeScriptの型システムは2018年以降も進化しています。satisfies演算子やテンプレートリテラル型など、新機能は公式ドキュメントで補完するのがおすすめです。22レッスンで土台を固めたあと、TypeScript公式ハンドブックに進むと、現場で使える知識に届きやすくなります。