これからTypeScript学習を始めるにあたって、開発環境/基礎文法/チュートリアルアプリ開発まで一気通貫で体系的な学習をおすすめします。
- TypeScriptのロードマップによる具体的な学習手順を知りたい人
- 押さえておきたいTypeScriptの基礎文法を学びたい人
- TypeScript×Reactのチュートリアルアプリを開発したい人
上記の悩みを解決しながら、TypeScriptを一気通貫で体系的に学べるよう解説しています。
TypeScript学習ロードマップの具体的な学習手順
ライブラリ/FW学習やWebアプリ開発に至るためには「TypeScriptの基礎学習」が最も重要になります。
TypeScriptを利用する上で、全ての土台になる知識/基礎コードになるためです。
TypeScriptの効率的な学習を支援する無料教材情報を知りたい人は「【無料配布】10日間で学べるTypeScript学習資料」を一読ください。
TypeScriptの始め方
結論から言えば、「とりあえず学習を始める」のは早計です。
理由は以下になります。
- 学習範囲の全体像を把握/理解
- 学習期間中の時間配分などに有効
学習範囲も分からず時間も決めなければ、盲目な学習になり無駄な勉強が増え続けてしまいます。
そのため、学習においてもどこまで学ぶか一通りロードマップ化するのがよいです。
まずTypeScript学習で把握すべき全体像ですが、以下の概要になります。
- TypeScriptの実行環境構築
- TypeScriptの基礎学習
- TypeScriptのライブラリ/フレームワーク学習
- TypeScirptによるアプリケーション開発
特に、基礎学習を終えてから学習ゴール設定によって範囲の増減や学習項目の量が変化します。
逆に言えば、TypeScriptの基礎学習範囲のみは必ず初学者共通になります。
TypeScriptの始め方｜実行環境構築
TypeScriptを始めるには、以下の開発環境を整える必要があります。
- Node.jsのインストール
- TypeScriptのインストール
- VSCodeのインストール
Node.jsは、JavaScriptを動かす実行環境になります。
Node.jsをインストールすることで、JavaScriptを実行するnodeコマンド、パッケージをインストールするnpmコマンド（Node Package Manager）が使えるようになります。
TypeScriptをインストールするためには、npmコマンドを使います。
また、TypeScriptをインストールするとTypeScriptをコンパイルするtscコマンドが使えるようになります。
コードエディタであるVSCode（Visual Studio Code）は、コマンドを実行できるターミナルが付属しているため、編集したソースコードのコンパイル/実行をVSCode上で実施できます。
TypeScriptの画像付きインストール方法や開発環境構築を実施したい人は「【TypeScript】インストール方法や開発環境構築を徹底解説！」を一読ください。
実行環境構築における注意点
以下はフロントエンド開発の各エコシステムの一例になります。
上記だけ見てしまうと、いきなりこれだけのエコシステム（TypeScriptに関連する連携システム）をインストールあるいは利用しなければと焦ってしまいます。
しかし、最低限の環境構築から始めるのがおすすめです。
実際にアプリケーション開発から各システムを入れるタイミングが自然と訪れるため、焦らず基礎学習から進めましょう。
TypeScriptの始め方｜基礎学習
最終的なWebアプリ開発に至るためには「TypeScriptの基礎学習」が最も重要になります。
改めてTypeScriptを利用する上で、全ての土台になる知識/基礎コードになるためです。
- 変数と定数
- 型定義
- 演算子
- 配列
- オブジェクト
- 関数
- 条件分岐
- ループ
- クラス
各項目においても詳細な内容が存在しますが、概要の大枠として上記の学習項目を把握しておきましょう。
ここから網目状に学習範囲が拡大していくイメージを持つとよいです。
TypeScript基礎学習はネットで完結できる
ここでは、オンライン形式でTypeScript特化のチュートリアルサイトを目的別で比較表作成しています。
以下の目的ごとにサイトを選別しています。
- 一部無料の学習サイト
- 完全無料の学習サイト
- TypeScriptにおける基礎学習範囲
- 海外サイトか日本語サイト
- 追加学習も可能か（フレームワークなど）
また、それぞれのサイトによる学習範囲も記載しています。
海外サイトの場合、どうしても英語を翻訳することになり若干専門用語のニュアンスや解説部分が異なってしまいます。
そのため、プログラミング経験がまだ浅い場合は日本語サイトから取り組むことをおすすめします。
| サイト名 | 一部無料/完全無料 | 基礎学習範囲 | 英語/日本語 | 追加学習 |
|---|---|---|---|---|
| サバイバルTypeScript | 完全無料 | 日本語 | ||
| TypeScript（Microsoft） | 完全無料 | 英語 | ||
| TypeScript 完全チュートリアル | 完全無料 | 日本語 | ||
| 【公式】TypeScript ハンドブック（日本語翻訳版） | 完全無料 | 日本語（翻訳版） | ||
| TypeScript Tutorial | 完全無料 | 英語 | ||
| TypeScript Tutorial – W3Schools | 完全無料 | 英語 |
やはり海外サイトの英語を日本語に翻訳すると、かなり専門用語の表現が微妙であるため改めて日本語サイトから選ぶことをおすすめします。
各サイトの詳細情報も確認しながら学習に取り組みたい人は「【TypeScript】無料で基礎文法から学べる教材とフレームワーク学習｜比較表あり」を一読ください。
TypeScriptの始め方｜ライブラリ/フレームワーク学習
結論は、TypeScript学習とセットでおすすめするフレームワークとしてReactを考慮するとよいです。
TypeScript × React
Reactは、ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。
コンポーネントという単位で画面を分割し、効率的で再利用可能なUI設計が可能なのが特徴です。
また、仮想DOMによる高速な描画更新により、動的でレスポンスの良いWebアプリを簡潔に開発できます。
- ビジネス市場で最も見かけるライブラリの一つ
- Reactベースで開発されたNext.jsがトレンド
- ビジネス市場で活用されることは将来的にも選ばれる
様々な理由が挙げられますが、やはり現場単位で利用されていることが一番の理由になります。
さらに、Reactへの参加者が多い開発現場であるため、技術共有やコミュニティの面でもメリットが享受できます。
ライブラリ/フレームワーク学習に迷わないために
特に、TypeScript系フレームワークは代表的なものからマイナーなものまで幅広く存在します。
理由としては、フロントエンド・バックエンド含め開発領域がWeb全般であるためです。
そのため、開発領域に対して最適なフレームワーク学習を考えたい人は「【TypeScript】おすすめのフレームワークや環境構築・インストール方法を解説」を一読ください。
TypeScriptの始め方｜アプリケーション開発
TypeScriptを学習したのち最終的にはアプリケーション開発に着手します。
また、代表的なTypeScriptの開発領域は以下になります。
上記のように、逆算してどの開発領域でアプリケーション開発をするかゴール設定しておかなければスムーズな着手に移行できません。
ただし、いきなり開発領域を見せられて何をするべきか迷っても仕方ありません。
そのため、自身でサンプルアプリあるいはチュートリアルアプリとして選ぶなら以下の開発領域一択かなと考えます。
TypeScript × フロントエンド開発
まずは簡易的なアプリとしてToDoアプリ開発などがおすすめです。
ToDoアプリ開発からの着手をおすすめする理由は以下になります。
| おすすめ内容 | 理由 |
|---|---|
| 機能がシンプルで学習のハードルが低い | 「追加・表示・編集・削除」といった基本的な操作に絞られている。 TypeScriptやReact/Vueなどフロント技術の学習対象をシンプルに体験できる。 |
| 状態管理を自然に学べる | タスクの「追加」「完了済みへの変更」「削除」などは状態管理の典型例である。 フロント開発で必須となる状態管理の概念（useState/useReducer/Zustand/Reduxなど）を実際の動作を通して学べる。 |
| 型定義の重要性を実感できる | ToDoデータは「id」「タイトル」「完了フラグ」などのプロパティを持つ。 型を定義すると関数間のデータ受け渡しが明確になり、ミスが防げることを体感できる。 |
| UIコンポーネント分割の練習になる | 小さなアプリの中で「コンポーネント設計」の基本が練習できる点はフロント開発の学習に最適である。 |
| イベント処理と双方向データバインディングを学べる | 入力欄に文字を打つ、ボタンをクリックする、チェックボックスを切り替えるなどのユーザーイベントを扱う練習ができる。 フロント開発の本質的な要素であり、ToDoアプリで繰り返し登場するため学習効果が高い。 |
| ローカルストレージやAPI接続など拡張しやすい | 初期段階では「ブラウザ上だけのToDoアプリ」を作り、その後「ローカルストレージに保存」「バックエンドAPIと連携」などに拡張可能。 |
| 完成のイメージがつきやすく達成感がある | 完成形を想像しやすいのでモチベーションを保ちやすい。 短期間で「動くもの」を作れるため、学習の初期段階での達成感を得やすい。 |
まとめると、ToDoアプリは「小規模だがフロント開発の本質（状態管理/型定義/イベント処理/UI設計）を自然に学べる教材」だからこそ、TypeScript学習の第一歩に最適と考えます。
実際にTypeScript×ReactによるToDoアプリ開発を体験したい人は「【TypeScript】フロントエンド開発におけるReactを利用したToDoアプリ開発」を一読ください。
TypeScriptの基礎学習を効率的に学習したい人へ
とはいえ、TypeScriptの基礎学習もどこまでの範囲まで学べばいいか判断が付かないこともあります。
実際に、基礎学習で触れるであろう様々な概念は全て理解し扱うのが難しく、必要な学習項目だけまず取り組みたいのが常です。
そのため、最小限の内容から学習実感を体験しつつ始めたい人は「【無料配布】10日間で学べるTypeScript学習資料」を一読ください。
