これからTypeScript学習を始めるにあたって、無料で基礎文法から学べる教材があると便利です。
- どんなTypeScript無料学習サイトがあるか知りたい人
- TypeScript無料学習サイトの学習範囲も知りたい人
- 比較表から自身に適切なチュートリアルサイトを見つけたい人
- 各サイトにて追加学習（フレームワークなど）ができるか知りたい人
上記の悩みを解決しながら、TypeScript教材となるサイトを紹介します。
また、基本的に無料サイトをまとめ、基礎学習に最適なTypeScript教材も紹介します。
TypeScript学習ロードマップの具体的な学習手順
ライブラリ/FW学習やWebアプリ開発に至るためには「TypeScriptの基礎学習」が最も重要になります。
TypeScriptを利用する上で、全ての土台になる知識/基礎コードになるためです。
TypeScriptの効率的な学習を支援する無料教材情報を知りたい人は「【無料配布】10日間で学べるTypeScript学習資料」を一読ください。
TypeScript特化のチュートリアルサイト｜比較表
ここでは、オンライン形式でTypeScript特化のチュートリアルサイトを目的別で比較表作成しています。
以下の目的ごとにサイトを選別しています。
- 一部無料の学習サイト
- 完全無料の学習サイト
- TypeScriptにおける基礎学習範囲
- 海外サイトか日本語サイト
- 追加学習も可能か（フレームワークなど）
また、それぞれのサイトによる学習範囲も記載しています。
海外サイトの場合、どうしても英語を翻訳することになり若干専門用語のニュアンスや解説部分が異なってしまいます。
そのため、プログラミング経験がまだ浅い場合は日本語サイトから取り組むことをおすすめします。
| サイト名 | 一部無料/完全無料 | 基礎学習範囲 | 英語/日本語 | 追加学習 |
|---|---|---|---|---|
| サバイバルTypeScript | 完全無料 | 日本語 | ||
| TypeScript（Microsoft） | 完全無料 | 英語 | ||
| TypeScript 完全チュートリアル | 完全無料 | 日本語 | ||
| 【公式】TypeScript ハンドブック（日本語翻訳版） | 完全無料 | 日本語（翻訳版） | ||
| TypeScript Tutorial | 完全無料 | 英語 | ||
| TypeScript Tutorial – W3Schools | 完全無料 | 英語 |
やはり海外サイトの英語を日本語に翻訳すると、かなり専門用語の表現が微妙であるため改めて日本語サイトから選ぶことをおすすめします。
【無料教材配布】TypeScript基礎学習一括ダウンロード｜Programming-Life
本サイトもTypeScriptを中心に現役フリーランスエンジニアとして働く筆者が監修した学習プログラムを用意しています。
特に、以下の内容に特化してプログラムを作成しています。
- 10日間でTypeScriptの学習を完了させる
- コミュニティによるサポート体制整備
- 最新のエンジニア情報をメルマガ配信
より実務的にTypeScriptを学べるよう学習サポートを強化しています。
また、メルマガ登録頂いた方に、無料教材として「TypeScript無料学習資料」を配布しています。
サバイバルTypeScript
- 検査の仕組み
- 基本的な型
- 型エイリアス
- 構造的部分型
- 配列
- タプル型
- オブジェクト
- Map
- Set
- 列挙型 (Enum)
- ユニオン型
- インターセクション型
- 分割代入
- 条件分岐
- 関数
- クラス
- 例外処理
- 非同期処理
- ジェネリクス
- モジュール
- 型レベルプログラミング
サバイバルTypeScriptは、名前の通り実践に近い形でドキュメント化されたサイトです。
TypeScriptを学ぶ上で欠かせないJavaScriptやフレームワークの技術が記載されており、実務で経験できるスキルが網羅されています。
サバイバルTypeScript｜追加学習
サバイバルTypeScriptでは、基礎文法の他に「作って学ぶTypeScript」といった章が設けられています。
以下は、サバイバルTypeScirptにおける追加学習用概要になります。
- Reactでいいねボタンを作ろう
- Next.jsで猫画像ジェネレーターを作ろう
- Vercelにデプロイしてみよう
- Jestでテストを書こう
- Reactコンポーネントのテストを書こう
- Prettierでコード整形を自動化しよう
- ESLintでコーディング規約を自動化しよう
- 🚧huskyでコミット前チェックを自動化しよう
特にフレームワーク学習において、フロントエンドではReact、バックエンドではNext.jsが学べます。
TypeScript（Microsoft）
Microsoft社が提供するTypeScriptチュートリアルサイトです。
基本的なTypeScript学習は可能ではありますが、翻訳をかけても日本語が分かりづらいため学習しにくいのが正直なところです。
TypeScript 完全チュートリアル
- TypeScriptの基礎 – 環境構築と基本的な型
- 関数とインターフェース
- クラスとオブジェクト指向プログラミング
- ジェネリクスと高度な型
- モジュールと名前空間
- 非同期処理とPromise/async-await
- 実践的なTypeScriptプロジェクト
このチュートリアルは、プログラミング経験が浅い方でもTypeScriptを基礎から学べるように設計されています。
各章には豊富なサンプルコードと練習問題が含まれており、実践的なスキルを身につけることができます。
TypeScript 完全チュートリアル｜追加学習
TypeScriptにおけるフレームワーク学習用項目はないですが、以下の実践的な学習項目が追加されています。
- プロジェクトの適切なディレクトリ構造
- tsconfig.jsonの詳細な設定方法
- ESLintとPrettierによるコード品質の維持
- 完全なTODOアプリケーションの実装
- Jestを使用したユニットテストと統合テスト
- Webpackによるビルド設定
- TypeScriptのベストプラクティス
- エラーハンドリングのパターン
- パフォーマンス最適化の手法
- 型安全性を高める高度なテクニック
TypeScriptを使用した実践的なアプリケーション開発に必要な知識を身につけることができます。
【公式】TypeScript ハンドブック（日本語翻訳版）
TypeScriptの公式ドキュメントを日本語翻訳されているサイトになります。
サイト内容は、以下の流れになります。
- 基本の型
- 変数の宣言
- インターフェース
- クラス
- 関数
- ジェネリクス
- Enum
- 型推論
- 型の互換性
- 高等な型
- シンボル
- イテレーターとジェネレーター
- モジュール
- 名前空間(namespace)
- 名前空間(namespace)とモジュール
- モジュール解決
- JSX
- デコレータ
- Mixins
- トリプルスラッシュ・ディレクティブ
基本的な文法から、詳細な機能一覧も追加されているため、TypeScript初心者であれば辞書として利用できます。
また、代表的なフレームワークとしてReact.jsによるチュートリアルも内包しています。
【公式】TypeScript ハンドブック（日本語翻訳版）｜追加学習
TypeScript ハンドブックでは、TypeScriptをReactとWebpackで繋ぐ方法を追加学習できます。
npmで既にNode.jsを使用していることを前提としています。
- プロジェクトの構築
- プロジェクトの初期化
- 依存関係のあるライブラリをインストール
- TypeScriptの設定ファイルを追加
- コードを書く
- webpackの設定ファイルを作成
- まとめ
TypeScript Deep Dive （日本語版）
- TypeScript入門&環境構築
- JavaScript
- モダンなJavaScriptの機能
- プロジェクトの環境設定
- Node.js&TypeScriptのプロジェクト作成
- React&TypeScriptのプロジェクト作成
- TypeScriptの型システム
- JSX
- オプション
- TypeScriptのエラー
- NPM
- テスト
- ツール
- その他のヒント
- スタイルガイド（コーディング規約）
- TypeScriptコンパイラの内側
TypeScript Deep Diveという海外で有名なTypeScriptのチュートリアルドキュメントの日本語版になります。
こちらは公式と違い、なぜTypeScriptをり利用するのかといった説明が背景や目的に合わせ、記載されている教材です。
チュートリアルに沿って進んでいくこともあり、体験型学習になっています。
TypeScript Deep Dive（日本語版）｜追加学習
TypeScript Deep Diveでは、Reactの追加学習が可能です。
ただし、あくまで環境のセットアップやcreate react appによるプロジェクトビルドのみに留まります。
さらにTypeScriptを利用して詳細なフレームワーク学習をするなら別サイトを利用しましょう。
TypeScript Tutorial
- はじめに
- 基本型
- 制御フロー文
- 関数
- クラス
- インターフェース
- 高度なタイプ
- ジェネリックス
- モジュール
- TypeScriptツールの設定
こちらは英語のサイトになりますが、TypeScriptをチュートリアルで学べる教材です。
実際にプレイグランド環境が提供されており、ブラウザ上でTypeScriptを試すことが可能です。
開発環境の構築でもたつきたくないかたは一度こちらを試してみても良いかもしれません。
TypeScript Tutorial｜追加学習
TypeScript Tutorialでは、主に以下の追加学習が可能です。
- Viteによる開発環境構築
- Expressアプリケーションのセットアップ
Viteは、より高速で無駄のない開発体験を提供するフロントエンドビルドツールです。
また、ExpressはWebアプリケーションを構築するためのフレームワークです。
TypeScript Tutorial – W3Schools
W3Schoolsという海外サイトが運営しているTypeScriptのチュートリアルページです。
こちらのサイトの特徴は、各セクションごとに演習問題を用意してくれています。
知識の再確認をしながら学習を進めることができるのでおすすめです。
解説自体そこまで丁寧に書かれているわけでなく、「こう書いたら、こう動く！」といった内容にとどめられているので、自身の実力を試すために見てみるのが良いかと思います。
TypeScript初心者は、日本語翻訳がかなり微妙なので別サイトをおすすめします。
TypeScript Tutorial – W3Schools｜追加学習
TypeScript Tutorial – W3Schoolsは、Reactにおける重点的な追加学習が可能です。
- コンポーネントの型付け
- 型安全なイベント
- useStateで状態を型付けする
- DOM要素でのuseRef
- React.ReactNodeのタイピング
- ジェネリックによるフェッチヘルパー
- 最小限のコンテキストとカスタムフック
TypeScript特化のチュートリアル動画（YouTube）｜比較表
ここでは、動画形式でTypeScript特化のチュートリアルを目的別で比較表作成しています。
また、それぞれの動画による学習範囲も記載しています。
さらに、各YouTubeチャンネルにて追加学習（フレームワークなど）があるか確認しています。
| 動画名 | 動画サイト | 基礎学習範囲 | 追加学習 |
|---|---|---|---|
| TypeScript超入門 覚えることは9個だけ！ | YouTube | ||
| 日本一わかりやすいTypeScript入門シリーズ | YouTube | ||
| 超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！ | YouTube | ||
| 世界一わかりやすいTypeScript講座！プログラミング初心者もOK | YouTube | ||
| 【1本で完結】TypeScript基礎完全解説【JSと比較しながら解説】 | YouTube |
TypeScript初学者を対象するため、ストレスなく学習できるよう日本人配信者でまとめています。
TypeScript超入門 覚えることは9個だけ！
この動画見ると、「あれ？TypeScriptってそんなに難しくないじゃん！」ってなります。
超入門だけあって、覚えることを9つに絞ってくれている点もありがたいです。
最初の参入障壁を思いっきり下げてくれるのでおすすめです。
プラスウイングTV｜追加学習
プラスウイングTVチャンネルは、上記の動画以外にも以下の追加学習用動画が存在します。
- Visual Studio Code拡張機能
- Docker入門
- React + TypeScript入門
エコシステムからReactまで学習できるのは初学者にとってありがたいです。
日本一わかりやすいTypeScript入門シリーズ
動画の中で、TypeScriptのチュートリアルを丁寧に説明しています。
説明の内容も、「どうしてこのような動きになるのか？」といった一見非常に難しい内容も図解でわかりやすく示しており、理解しやすい構成になっています。
【トラハック】Webエンジニアリングを学ぶなら「とらゼミ」｜追加学習
こちらのYouTubeチャンネルでは、以下の追加学習が用意されています。
- React学習シリーズ【とらゼミ】
- 日本一わかりやすいReact入門【実践編】
- 分かりすぎて怖いJavaScript入門
- 日本一わかりやすいReact-Redux入門
- 新・日本一わかりやすいReact入門【基礎編】
特にReactに関する学習動画にて、基礎編と実践編が用意されておりじっくり動画で学びたい人におすすめです。
超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！
- 0:00 これがTypeScriptだ
- 6:14 TypeScriptをインストールする方法
- 7:41 TypeScriptをJavaScriptに変換する方法
- 12:15 TypeScriptを使うべき３つの理由
- 12:59 TypeScriptのドキュメントとしての側面を理解する
- 24:34 TypeScriptのLinterとしての側面を理解する
- 33:32 TypeScriptのES5へのコンパイラとしての側面を理解する
- 41:38 このコースの流れ
- 43:38 TypeScriptの型はこう書く！
- 46:17「TypeScriptの型」と「JavaScriptの型」
- 52:00 boolean型とnumber型とstring型を使う方法
- 58:47「型注釈」と「型推論」
- 1:02:34 オブジェクトに型を付ける方法
- 1:08:35 配列に型を付けるArray型はこう使う
- 1:12:58 Tuple型を使用して、決まった内容の配列を作る方法
- 1:18:56 Enumを使って、特定のまとまったグループのみを受け入れる列挙型を使う方法
- 1:28:14 どんな型にもなるany型について知る
- 1:31:25 Union型を使って複数の型 を使う方法
- 1:34:08 Literal型を使って特定の値のみを取り扱う方法
- 1:41:12 typeエイリアスを使って複雑な型を変数のように扱う
- 1:43:39 関数に型を適応させる方法
- 1:47:56 関数の戻り値にvoid型を使う方法
- 1:53:10 undefined型とnull型についての補足
- 1:54:00 関数型を使って、特定の関数のみを代入できる変数を作る
- 2:00:08 callback関数の型はこう書く
- 2:06:05 unknown型を使って、柔軟でanyよりも厳しい型を定義する方法
- 2:09:04 never型を使って、起こり得ない値の型を使用する方法
- 2:12:49 TypeScriptの型はこう書く！のまとめ
- 2:13:05 コンパイラを使う方法
- 2:15:24 watchモードを使って、保存時に自動的にTSからJSにコンパイルする方法
- 2:17:11 tsc ―initでtsconfig.jsonを作り、全てのファイルを一気にコンパイルする方法.mp4
- 2:21:54 includeとexcludeとfilesを使ってコンパイルするファイルを選ぶ方法
- 2:30:31 targetを指定して、特定のバージョンのJavaScriptに変換する方法
- 2:32:25 libを指定して、TypeScriptが用意している型の定義を追加する
- 2:39:11 allowJs、checkJs、jsx、declaration、declarationMapの設定はこう使う
- 2:45:37 SourceMapを使用して、ブラウザでTypeScriptを操作する方法
- 2:49:38 outDirとrootDir、removeComments、noEmit、downlevelIterationの使い方
- 2:57:20 noEmitOnErrorオプションを使って、エラーが出た時にコンパイルしない方法
- 2:59:09 noImplicitAnyやstrictNullChecksなどのstrictの設定はこう使う
- 3:10:41 綺麗なコードを書くための設定をする方法
- 3:16:12 コンパイラを使う方法のまとめ
約３時間あるため、時間はかかりますが実践的な内容を丁寧で網羅的に解説しています。
内容が実践的であるため、入門教材をやってからこちらの動画を見ることをお勧めします。
３時間でTypeScriptに入門できると考えれば見る価値ありです。
よしぴーのYouTubeプログラミングスクール｜追加学習
こちらのYouTubeチャンネルでは、以下の追加学習用動画があります。
- 超JavaScript入門
- Vue.js完全ガイド
- NestJS入門
こちらのチャンネルでは、Vue.jsとNestJSが学べます。
世界一わかりやすいTypeScript講座！プログラミング初心者もOK
- 00:00 はじめに
- 05:26 0.TypeScriptとは
- 15:40 1.セットアップ
- 20:33 2.基本のデータ型
- 25:40 3.TSで関数を書いてみよう
- 32:14 4.interface / type
- 40:17 5.TSでクラスを書いてみよう
- 49:14 6.ジェネリクス
- 52:08 7.Null 合体演算子
- 55:01 8.オプショナルチェーン
- 57:54 9.TSの学習テクニック
- 01:02:54 10.さいごに
TypeScriptの基礎学習だけでなく、終盤にあるTypeScriptの記述に関するテクニック（ChatGPT含む）もあり、分かりやすく手を付けやすい動画講座になっています。
セイト先生のWeb・ITエンジニア転職ラボ｜追加学習
こちらのYouTubeチャンネルでは、エンジニア経験を活かした有益な動画が豊富です。
- 初心者向け・JavaScript講座
- HTML/CSS入門講座
- 中級者向け・JavaScript/TypeScript講座
- Docker講座
初学者に対して丁寧な作りになっているため、入門から中級者向けまで確認するとよいです。
また、その他にもエンジニア経験から得られるIT/Web情報も確認できるので目に留まった動画は視聴することをおすすめします。
【1本で完結】TypeScript基礎完全解説【JSと比較しながら解説】
- 0:00:00 – 今回のテーマ
- 0:03:17 – 0 .開発環境の準備
- 0:20:12 – 0.1 VSCodeの拡張機能
- 0:22:19 – 1. TypeScriptとは
- 0:26:32 – 2. 型注釈と型推論
- 0:35:19 – 3. 変数と定数の型指定
- 0:39:31 – 4. 関数の型注釈
- 0:45:39 – 5. オブジェクト型の定義
- 0:52:31 – 6. 配列の型指定
- 1:02:39 – 7. タプル型の利用
- 1:07:37 – 8. インターフェースの定義
- 1:17:41 – 9. 型エイリアスの活用
- 1:24:07 – 10. ユニオン型とインターセクション型
- 1:33:37 – 11. リテラル型と定数型
- 1:40:46 – 12. 関数のオプション引数とデフォルト引数
- 1:55:28 – 13. ジェネリック型
- 2:03:07 – 14. ユーティリティ型
- 2:11:01 – 15. Mapped Types（マップ型）
- 2:22:21 – 16. 型ガードの使用
- 2:30:22 – 17. 条件型
- 2:37:49 – 18. TypeScriptの非同期処理
- 2:48:22 – 19. 構造的部分型
- 2:56:29 – 20. any型とunknown型
- 3:05:35 – 21. never型
- 3:12:20 – 22. クラスの利用
- 3:21:19 – 23. モジュールと名前空間
- 3:43:20 – 24. 型変換
- 3:52:29 – 25. エラーハンドリング
- 3:59:11 – 26. JSDoc による型注釈
- 4:05:31- 27. 外部ライブラリの型定義
- 4:17:30 – 28. 簡単なアプリ作成
こちらも例に漏れずTypeScriptの基礎学習が充実しています。
さらに、エラーハンドリング・外部ライブラリに関する型定義・チュートリアルアプリの開発まで解説しているため、地続きでアプリ開発の触りまで学ぶことができます。
もんしょー | ITエンジニア個別指導【ITラボ】｜追加学習
こちらのYouTubeチャンネルでは、エコシステムから複数言語/ツールの組み合わせによる学習動画が豊富です。
- 【シンプル解説】DockerでTypeScript,React,Go言語の環境構築
- 【シンプル解説】DockerでTypeScript,React,Go言語のCURD掲示板を作成
- 【ゼロから始める】入門者向けDockerの使い方講座
- 【入門】JavaScript基礎マスター解説講座【初心者もゼロから学習,ES6以降】
- 【入門コース】React基礎マスター講座 with JavaScript
- 【この1本で完結】LaravelとReact入門基礎マスター講座【Docker,Inertia,JavaScript】
- 【これ1本でわかる】Webサービス・アプリの仕組みを完全解説【未経験/駆け出し/非エンジニア】
バックエンド言語としてGoやPHPも関わっている動画がありますが、TypeScriptはフロントエンド言語として採用しているようです。
