本記事では、無料を前提にTypeScriptを学習できるサイトを紹介します。
TypeScriptにおける手段別の学習方法
読者によっては、TypeScriptの学習において最適な手段を選択するべきです。
以下の手段から考えると、TypeScriptにおけるおすすめな学習教材の選択が変わります。
- テキスト型教材
- 動画視聴型教材
どちらにおいてもTypeScriptを学習できる内容ではありますが、より読者のタイプを考えると以下の入り方も合わせて取り入れましょう。
文法レベルから学ぶTypeScript
多くのテキスト型教材は、TypeScriptの文法レベルから学ぶことが大半です。
実際に、基礎を押さえられていない初学者は、意図を理解していないコード記述になりいわゆるコピペプログラマーになります。
そのため、基本的な文法やコード規約・オブジェクト指向といった基礎固めからじっくり始めたい人はテキスト型教材がおすすめです。
開発体験型から学ぶTypeScript
一方で、アプリケーション開発から取り組むのも最適な学習手段の一つです。
なぜなら、基礎学習で挫折してしまうと開発までたどり着けず、プログラミング学習を断念するケースが多いからです。
また、プログラミングは開発こそが楽しいわけで、基礎学習だけではモチベーション維持が困難です。
そのため、始めは教材の手順に沿って写経し、あとからコードの意図を調べる開発体験型学習もおすすめです。
TypeScript入門・練習サイトの特徴
| サイト名 | テキストベース | 動画ベース |
|---|---|---|
| 【公式】TypeScript ハンドブック（日本語翻訳版） | ||
| TypeScript Deep Dive （日本語版） | ||
| サバイバルTypeScript | ||
| TypeScript Tutorial | ||
| TypeScript Tutorial – W3Schools | ||
| TypeScript超入門 覚えることは9個だけ！ | ||
| 日本一わかりやすいTypeScript入門シリーズ | ||
| 超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！ |
【無料】TypeScript入門・練習できるサイト
ここでは、無料でTypeScriptを学習できるサイトをまとめました。
以下のサイトがお勧めになります。
- 【公式】TypeScript ハンドブック（日本語翻訳版）
- TypeScript Deep Dive （日本語版）
- サバイバルTypeScript
- TypeScript Tutorial
- TypeScript Tutorial – W3Schools
- TypeScript超入門 覚えることは9個だけ！
- 日本一わかりやすいTypeScript入門シリーズ
- 超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！
それぞれの学習サイトについて端的に解説します。
【公式】TypeScript ハンドブック（日本語翻訳版）
TypeScriptの公式ドキュメントを日本語翻訳されているサイトになります。
サイト内容は、以下の流れになります。
- 基本の型
- 変数の宣言
- インターフェース
- クラス
- 関数
- ジェネリクス
- Enum
- 型推論
- 型の互換性
- 高等な型
- シンボル
- イテレーターとジェネレーター
- モジュール
- 名前空間(namespace)
- 名前空間(namespace)とモジュール
- モジュール解決
- JSX
- デコレータ
- Mixins
- トリプルスラッシュ・ディレクティブ
基本的な文法から、詳細な機能一覧も追加されているため、TypeScript初心者であれば辞書として利用できます。
また、代表的なフレームワークとしてReact.jsによるチュートリアルも内包しています。
TypeScript Deep Dive （日本語版）
TypeScript Deep Diveという海外で有名なTypeScriptのチュートリアルドキュメントの日本語版になります。
こちらは公式と違い、なぜTypeScriptをり利用するのかといった説明が背景や目的に合わせ、記載されている教材です。
チュートリアルに沿って進んでいくこともあり、体験型学習になっています。
サバイバルTypeScript
サバイバルTypeScriptは、名前の通り実践に近い形でドキュメント化されたサイトです。
TypeScriptを学ぶ上で欠かせないJavaScriptやフレームワークの技術が記載されており、実務で経験できるスキルが網羅されています。
TypeScript Tutorial
こちらは英語のサイトになりますが、TypeScriptをチュートリアルで学べる教材です。
実際にプレイグランド環境が提供されており、ブラウザ上でTypeScriptを試すことが可能です。
開発環境の構築でもたつきたくないかたは一度こちらを試してみても良いかもしれません。
TypeScript Tutorial – W3Schools
W3Schoolsという海外サイトが運営しているTypeScriptのチュートリアルページです。
こちらのサイトの特徴は、各セクションごとに演習問題を用意してくれています。
知識の再確認をしながら学習を進めることができるのでおすすめです。
解説自体そこまで丁寧に書かれているわけでなく、「こう書いたら、こう動く！」といった内容にとどめられているので、自身の実力を試すために見てみるのが良いかと思います。
TypeScript超入門 覚えることは9個だけ！
この動画見ると、「あれ？TypeScriptってそんなに難しくないじゃん！」ってなります。
超入門だけあって、覚えることを9つに絞ってくれている点もありがたいです。
最初の参入障壁を思いっきり下げてくれるのでおすすめです。
日本一わかりやすいTypeScript入門シリーズ
動画の中で、TypeScriptのチュートリアルを丁寧に説明しています。
説明の内容も、「どうしてこのような動きになるのか？」といった一見非常に難しい内容も図解でわかりやすく示しており、理解しやすい構成になっています。
超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！
約３時間あるため、時間はかかりますが実践的な内容を丁寧で網羅的に解説しています。
内容が実践的であるため、入門教材をやってからこちらの動画を見ることをお勧めします。
３時間でTypeScriptに入門できると考えれば見る価値ありです。
TypeScriptの学習難易度
TypeScriptは、静的型付け以外の部分はJavaScriptであるため、JavaScriptと比較すると学習難易度高めです。
つまり、JavaScriptの学習＋型定義を理解すれば文法レベルであれば問題ないです。
また、学習難易度は比較的高めですが、利用するべきメリットも存在します。
さらに詳しくTypeScriptの人気を知りたい人は、「【TypeScript】難しい理由と解決策を徹底解説！」を一読ください。
コメント