TypeScriptを学ぶ - コーディング講座
TypeScriptを学ぶ - コーディング講座 — ポケットに型チェッカーを入れてTypeScriptを学ぼう
TypeScriptを学ぶ - コーディング講座は、コードを書きながらTypeScriptを学べる無料のiOS・Androidアプリです。コンパイラーがデバイス上で動作するため、入力中に型エラーが下線で表示されます。101コースで、最初の型注釈からユニオン、ジェネリクス、条件型を経て、React、Node.js、tRPCまで学べます。AI Mentorは、コンパイラーの指摘をわかりやすい言葉で説明します。
- 価格
- 無料、Proアップグレード
- 対応プラットフォーム
- iOS、Android
- 言語
- 22
- 年齢レーティング
- 4+
- 必要環境
- iOS 15.1以降
- App Store
- 3.0 ★ (1)


赤い下線が表示されるのを見ながら学ぶと、型を最も早く身につけられます。
TypeScriptの核心は、フィードバックの循環にあります。間違ったコードを書き、どこがなぜ間違っているのかを正確に確認し、修正するのです。エディターは入力中に型をチェックし、Type Explorerはコンパイラーが値をどのような型だと判断しているかを表示します。そのため、概念を、それが説明するエラーと結びつけて学べます。
概要
TypeScriptを学ぶ - コーディング講座は、実際のコンパイラーをスマートフォン上で動かしながらTypeScriptを学べる、無料のiOS・Androidアプリです。A1からC2までレベル分けされた101コース・352レッスンで、基本型、インターフェース、ユニオン、ナローイング、ジェネリクス、条件型とMapped Type、inferキーワード、strictモード、tsconfig、さらにReact、Node.js、Zod、Jest、tRPCを使った実践的なプロジェクトまで扱います。入力中にはエディターが型エラーに下線を表示し、パズル、ガイド付きプロジェクト、コーディングミッション、面接シミュレーター、AI Mentorが実践をサポートします。
アプリの内容
画面イメージ





コース
TypeScriptコースで学べる内容
アプリ独自のコース一覧には、A1からC2までのレベルに分かれた101コースがあります。ここでは、実際のコース名を使った主な学習分野を紹介します。
まずは型と変数
「Introduction to TypeScript」、「TypeScript vs JavaScript: Why Types Matter」、「Basic Types (string, number, boolean, any, unknown)」、「Types and Variables Essentials」です。
関数、オブジェクト、日常的に使う型
「Functions and Type Annotations」、「Arrays, Tuples and Enums」、「Interfaces and Type Aliases」、「Union and Intersection Types」、「Literal Types and const Assertions」、「Optional Chaining and Nullish Coalescing」です。
型の絞り込み、クラス、ジェネリクス
「Type Narrowing and Type Guards」、「Classes and Access Modifiers」、「Generics Basics」、「Index Signatures」、「typeof and keyof operators」です。
ユーティリティ型と安全なコード
「Utility Types (Partial, Required, Pick, Omit, Record)」、「Error Handling Patterns」、「Strict Mode and tsconfig Best Practices」、「Runtime Validation with Zod」です。
高度な型
「Advanced Generics with Constraints and Conditional Types」、「Mapped Types and Template Literal Types」、「Discriminated Unions and Exhaustiveness」、「satisfies Operator」です。
実際のプロジェクトで使うTypeScript
「TypeScript with React: Props and Hooks」、「TypeScript with Node.js and Express」、「Testing TypeScript with Jest」、「Type-Safe API Clients」、「tRPC」、「GraphQL」、「Next.js」です。
移行とツール
「Migration: JavaScript to TypeScript」、「Build and Bundlers」、「Monorepo Setup with TypeScript」、「Authoring Declaration Files」です。
型レベルプログラミング
「The infer Keyword and Complex Conditional Types」、「Writing Custom Utility Types」、「Recursive and Self-Referential Types」、「the TypeScript Compiler API」です。
使い方
TypeScriptのレッスンの進み方
レッスンは短く、どのレッスンにもコンパイラーが組み込まれています。
短い解説を読む
各レッスンは5〜10分で、わかりやすい説明と、インターフェースと型エイリアスの違いなどを示す小さな例を組み合わせています。
コードを書き、型を確認する
エディターに入力すると、エラーがリアルタイムで下線表示されます。Type Explorerはカーソル位置の型を表示し、ユニオンのメンバーも確認できます。また、プログラムを実行して出力を確認することもできます。
練習して、わからなければ質問する
各トピックの最後には質問と小さなコーディング課題があります。Type Gymではパズルに挑戦でき、Debug Arenaでは壊れたコードを修正します。ジェネリック制約やコンパイラーのメッセージがわかりにくいときは、AI Mentorが説明します。
内容
アプリで利用できるもの
101
最初の型からC2までのコース
A1からC2までレベル分けされた352レッスンで、型が重要な理由や基本型から、TypeScriptコンパイラーAPI、型安全なパーサーの構築まで学べます。
リアルタイム
エディター内の型チェック
入力中に型エラーが下線で表示され、Type Explorerはカーソル下の型を表示します。さらに、AI Toolsでプログラムをレビューし、適用できる修正案を提案してもらえます。
24
Type Gymのパズル
24個の型パズルに加えて、毎日のパズルにも挑戦できます。Debug Arenaでは、時間切れになる前に壊れたコードを修正します。
20
ガイド付きプロジェクトと60個のミッション
小さなプログラムを一つずつ手順に沿って作り、実行時に各ステップをチェックします。さらに、Hello Worldからアルゴリズムまで、3つのレベルに分かれた60個のコーディングミッションに挑戦できます。
30
面接シミュレーター
採点レポート付きの時間制限あり30問セットに加え、回答付きの面接問題50問も収録しています。Weaknessレーダーでは、まだ間違えているトピックを確認できます。
AI
AI Mentor
コンパイラーエラーやジェネリック制約について質問すると、わかりやすい言葉で説明してくれます。
背景
JavaScriptをすでに知っているのに、なぜTypeScriptを学ぶのでしょうか?
TypeScriptは、静的型システムを上に追加したJavaScriptです。データの形を記述すると、コンパイラーがコードの実行前にその使い方をすべてチェックし、通常のJavaScriptへコンパイルする際に型は消去されます。React、Angular、NodeのコードベースでTypeScriptが頻繁に使われるのはそのためです。同じ言語でありながら、コードを理解したエディターの自動補完が使え、undefined-is-not-a-functionのようなバグも、ビルド時にひとまとまりの問題として検出できます。JavaScriptを読めるなら、始めるために必要なことのほとんどはすでに身についています。
型注釈と型推論ここから始めましょう
変数や関数のパラメーターに型を注釈として付けられるほか、代入した値からTypeScriptが多くの型を自動的に推論してくれます。型を書くべきときと、型推論に任せるべきときを学ぶことが、最初の実践的なスキルです。
ユニオンとナローイング日常的に使う基本機能
ユニオン型は、値が複数の型のうちの1つになり得ることを示します。typeofチェック、等価性チェック、カスタム型ガードを使ったナローイングにより、分岐の中でどの型なのかをコンパイラーに伝えられます。また、判別可能なユニオンによって、そのチェックを漏れなく行えます。
ジェネリクス柔軟でありながら安全
ジェネリクスを使うと、anyに頼らず、関数や型をさまざまな型で扱えます。さらにextendsキーワードを使った制約によって、型パラメーターが実行できなければならないことを指定できます。
Utility型、mapped型、conditional型型システムの表現力が広がる領域
Partial、Pick、Omit、Recordは、Mapped TypeとConditional Typeから作られています。inferキーワードとともにこれらを理解すれば、既存のUtility Typeをコピーするのではなく、自分で作れるようになります。
tsconfigとstrictモードコンパイラーの厳格さを決める設定
コンパイラーのオプションによって、TypeScriptがどの程度エラーを指摘するかが決まります。strictモードを有効にすることで型の信頼性が高まり、既存のJavaScriptプロジェクトをファイル単位で少しずつ移行できるようにもなります。
適しています
向いている方・向いていない方
次のような方におすすめです
- JavaScriptを書いていて、求人情報やコードベースでTypeScriptを見かけることが増えた方
- ReactやNodeを使っていて、最初から最後まで型付きコードで書きたい方
- 初心者で、最初から型付きの標準を学びたい方
- 読むだけでなく、コンパイラーのフィードバックや小さなパズルを通して学ぶのが得意な方
- JavaScriptプロジェクトがあり、ファイル単位で移行したい方
次のような方には適していません
- コードを書いた経験がなく、レッスンがコードを読めることを前提としているため、最初の言語をゼロから学びたい方
- フルIDEで大規模なプロジェクトを構築する必要がある方。ただし、その場合はノートパソコンが必要です。
- 最初のコースが無料だからすべて無料だと思っている方。Proでは残りのコンテンツが解放されます。
- アプリは独立しているため、Microsoft公式のコースを求めている方
ご質問
よくある質問
スマートフォンでTypeScriptを学ぶ最適な方法は何ですか?
読むだけの教材ではなく、実際に型をチェックしてくれるものを使いましょう。TypeScriptを学ぶ - コーディング講座はデバイス上でコンパイラーを実行し、入力中に型エラーへ下線を表示します。さらに、101コースに加えて、型パズル、ガイド付きプロジェクト、AI Mentorも利用できます。iOSとAndroidで、22言語に対応しており、無料で始められます。
JavaScriptを知らなくてもTypeScriptを学べますか?
学べますが、TypeScriptは型を加えたJavaScriptなので、まず少しJavaScriptを読めるようにしておくと役立ちます。TypeScriptを学ぶ - コーディング講座では、型が重要な理由と基本的な型から始め、初期のコースでTypeScriptとJavaScriptを比較します。初日から型付き言語を学びたい初心者も、このアプリが対象としている利用者です。
TypeScriptとJavaScriptの違いは何ですか?
TypeScriptはJavaScriptに静的型システムを追加したものです。コンパイラーは、宣言した型や推論された型に照らしてコードをチェックし、その後に型を取り除くため、実行されるのは通常のJavaScriptです。早い段階でエラーを検出でき、エディターの自動補完も向上する一方、ビルド工程と、追加で学ぶ必要がある構文が増えます。
アプリは実際のコンパイラーでTypeScriptをチェックしますか?
はい。TypeScriptコンパイラーがデバイス上で実行されるため、入力中にエディターで型エラーに下線が表示され、Type Explorerにはカーソル位置の型が表示されます。コードを実行して出力を確認することもできます。なお、アプリには、TypeScriptはMicrosoft Corporationの商標であり、Microsoftとは提携していないことが記載されています。
TypeScriptのジェネリクスとは何ですか?アプリではどのように教えますか?
ジェネリクスを使うと、anyに頼ることなく、型安全性を保ちながら関数や型をさまざまな型で利用できます。アプリでは、まずジェネリック関数とジェネリック型から始め、次に制約、条件付き型、Mapped Types、Template Literal Types、inferキーワードへと段階的に学びます。Type Gymのパズルで練習することもできます。
TypeScriptとReact、Node.jsについても学べますか?
はい。実際のプロジェクトを扱うコースには、Reactのpropsとhooks、Node.jsとExpressでのTypeScript、型安全なAPIクライアント、Zodによるランタイム検証、Jestによるテスト、GraphQL、tRPC、Next.jsが含まれています。移行コースでは、既存のJavaScriptプロジェクトにTypeScriptを段階的に導入する方法を学べます。
TypeScriptを学ぶ - コーディング講座は無料ですか?
無料でダウンロードできます。無料版には、最初のコース、最初のガイド付きプロジェクトとプロジェクトトラック、2つのコーディングミッション、毎日のLab練習、毎日のAI Mentor利用枠が含まれ、広告が表示されます。Proでは、すべてのコース、プロジェクト、トラック、ミッション、無制限のAI MentorとLab練習、エディターのエラー一覧全体、修了証試験が利用可能になり、広告も表示されなくなります。
このアプリはTypeScriptの面接対策に役立ちますか?
はい。面接シミュレーターでは、30問を時間制限付きで解き、最後に採点レポートを確認できます。また、解答付きの面接問題が50問あります。Weaknessレーダーでは、まだ間違えているトピックを確認できるため、該当するコースに戻って学習できます。
TypeScriptを学ぶにはどのくらい時間がかかりますか?
すでにJavaScriptを知っている場合、型、インターフェース、ユニオンの基礎は、毎日短時間のレッスンを数週間続ければ学べます。ジェネリクスや高度な型システムの習得には、さらに時間がかかります。アプリでは、ストリーク、XP、進捗管理、選択した時間に届く毎日のリマインダーによって、無理なく継続的に学習できます。
証明書は取得できますか?
はい。Proには証明書試験が含まれており、合格すると共有できる修了証明書を取得できます。受講したコースの学習内容が記録されますが、Microsoftの資格ではありません。
CoddyKitのその他のアプリ
iOS および Androidで利用できます。