本記事では、無料を前提にTypeScriptを学習できるサイトを紹介します。
TypeScriptにおける手段別の学習方法
読者によっては、TypeScriptの学習において最適な手段を選択するべきです。
以下の手段から考えると、TypeScriptにおけるおすすめな学習教材の選択が変わります。
- テキスト型教材
- 動画視聴型教材
どちらにおいてもTypeScriptを学習できる内容ではありますが、より読者のタイプを考えると以下の入り方も合わせて取り入れましょう。
文法レベルから学ぶTypeScript
多くのテキスト型教材は、TypeScriptの文法レベルから学ぶことが大半です。
実際に、基礎を押さえられていない初学者は、意図を理解していないコード記述になりいわゆるコピペプログラマーになります。
そのため、基本的な文法やコード規約・オブジェクト指向といった基礎固めからじっくり始めたい人はテキスト型教材がおすすめです。
開発体験型から学ぶTypeScript
一方で、アプリケーション開発から取り組むのも最適な学習手段の一つです。
なぜなら、基礎学習で挫折してしまうと開発までたどり着けず、プログラミング学習を断念するケースが多いからです。
また、プログラミングは開発こそが楽しいわけで、基礎学習だけではモチベーション維持が困難です。
そのため、始めは教材の手順に沿って写経し、あとからコードの意図を調べる開発体験型学習もおすすめです。
TypeScriptを学習する前に何から始めるべきか
多くのプログラミング言語の中でTypeScriptを学習するために、言語特有の特徴や自身が現在持っている知識を理解することが必要です。
また、達成したい目的や目標もなく、ただ漫然とプログラミング学習を始めてもモチベーションは生まれません。
プログラミング学習に必要な知識や体制を整えることで取り組みやすさと集中力は段違いです。
- TypeScript初心者が知るべき基礎知識
- TypeScript初心者が学習前に必要な前提知識
学習する前に、TypeScriptは何かを知っておくこと、どんな前提で学習し利用すべきか把握しておきましょう。
TypeScript初心者が知るべき基礎知識
TypeScriptは、JavaScriptに対して型（type）を付与した静的型付けであるプログラミング言語です。
JavaScript（動的型付け言語）は、小規模から大規模にかけて多用されますがコードの管理が難しくなる傾向があります。
そのため、プロジェクトが抱える問題を解決するためにMicrosoftが開発しました。
端的に言えば、TypeScriptによってソースコードの保守性を高める特徴があります。
- JavaScriptに静的型付けを備える
- 実行時ではなくコンパイル時でエラー早期発見が可能
- コードの安全性/保守性を担保
Microsoft社による開発言語であるため、多くの開発者に支持されており学習リソースやサポートが充実しています。
TypeScriptの基礎知識を理解することで、TypeScript学習の第一歩を踏み出すことができるでしょう。
詳細なTypeScriptの特徴を知りたい人は「【TypeScript】特徴やメリット・デメリットを徹底解説！」を一読ください。
TypeScript初心者が学習前に必要な前提知識
上述した通り、TypeScriptはJavaScriptを扱います。
そのため、JavaScriptといった前提知識が必要になります。
JavaScriptがベースになることから、JavaScriptとTypeScriptがどのように違うか理解する必要もあります。
具体的なコードによるTypeScriptとJavaScriptの比較を知りたい人は「【TypeScript VS JavaScript】コードの比較による言語の違いを解説！」を一読ください。
TypeScript入門・練習サイトの特徴
| サイト・チャンネル名 | テキストベース | 動画ベース |
|---|---|---|
| 【公式】TypeScript ハンドブック（日本語翻訳版） | ||
| TypeScript Deep Dive （日本語版） | ||
| サバイバルTypeScript | ||
| TypeScript Tutorial | ||
| TypeScript Tutorial – W3Schools | ||
| TypeScript超入門 覚えることは9個だけ！ | ||
| 日本一わかりやすいTypeScript入門シリーズ | ||
| 超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！ | ||
| プログラミングチュートリアル | ||
| ムーザルちゃんねる |
【10日間】実務レベルのTypeScriptを学習したい人へ
本サイトもTypeScriptを中心に現役フリーランスエンジニアとして働く筆者が監修した学習プログラムを用意しています。
特に、以下の内容に特化してプログラムを作成しています。
- 10日間でTypeScriptの学習を完了させる
- コミュニティによるサポート体制整備
- 最新のエンジニア情報をメルマガ配信
より実務的にTypeScriptを学べるよう学習サポートを強化しています。
また、メルマガ登録頂いた方に、無料教材として「Webアプリ開発資料」を配布しています。
気になる方は、ぜひ一読ください。
【無料】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に入門できると考えれば見る価値ありです。
プログラミングチュートリアル
Udemyによる動画講座も評価が高く、TypeScriptやReactを中心に解説動画を配信するプログラミングチュートリアルといったチャンネルです。
プログラミング初心者の方へ丁寧に教材を作りこんでいるほか、TypeScriptによるReactベースのWebアプリ開発の動画もあります。
TypeScriptで利用されるNext.jsのベストプラクティスや掲示板アプリ・チャットアプリなど様々なWebアプリ開発動画も揃っています。
ムーザルちゃんねる
ある程度脱初心者の学習を進めたい人は、ワンランク上の学習としておすすめできるのがムーザルちゃんねるです。
TypeScriptに限らず、プログラミングで考えるべきエコシステムの仕様に関するベストプラクティスや、インフラ関連の豊富な経験談など、多くの経験からくる学習動画が投稿されています。
TypeScript学習に利用できる記事型サイト
プログラミング未経験や初心者に限らず、現役エンジニアも利用する有益なおすすめ記事型サイトをご紹介します。
TypeScriptだけでなく、関連エコシステムも含め多くの情報を検索する際に重宝されます。
- Qiita
- Zenn
特に、プログラミングを始めたばかりの人であれば、必ず利用することになるかと思います。
おすすめサイト｜Qiita
おそらく日本最大級のプログラミング知識・技術を共有するブログ形式のWebサービスです。
特に、エンジニアにとって再利用・汎用性の高い情報が記事として共有されており、初学者に限らず重宝されています。
- スキルセットに応じてタグ検索やキーワード検索が可能
- アカウントにフォロー・いいね機能搭載
- スキルセットに応じてコミュニティが存在
- 定期的なエンジニアのイベント開催
- キャリア転職用Qiita Jobs
エンジニアであればそれぞれの活用法を持つほど、Qiitaは一般的かなと思います。
また、特定のプログラミング言語で検索を絞れば、初級から上級の内容まで様々な情報が提供されています。
ただし、教える形というよりも備忘録として記述されているケースが圧倒的であるため、記事によって読みづらい点は否めません。
読みづらい点を差し引いても、特定技術を利用する背景や扱い方など、現役エンジニアの思考が詰まっているため参考になります。
おすすめサイト｜Zenn
こちらもQiitaと同じくエンジニア・プログラミング関連情報を共有するWebサービスになります。
Qiitaよりも後発であり、2020年9月にリリースされています。
- 記事に対する「投げ銭」が可能
- 電子書籍化が可能
Qiitaのように、検索機能やアカウント関連機能はほぼ同一で踏襲されています。
しかし、最大の違いは「収益化」が可能な点です。
そのため、記事・電子書籍の作成者もノウハウレベルが有料級でなければならないため、プログラミング技術の質や内容が濃いです。
また、ピンポイントで学習できる教材も豊富なため、濃密な学習ができるコンテンツ探しとして利用できます。
TypeScriptの学習難易度
TypeScriptは、静的型付け以外の部分はJavaScriptであるため、JavaScriptと比較すると学習難易度高めです。
つまり、JavaScriptの学習＋型定義を理解すれば文法レベルであれば問題ないです。
また、学習難易度は比較的高めですが、利用するべきメリットも存在します。
さらに詳しくTypeScriptの人気を知りたい人は、「【TypeScript】難しい理由と解決策を徹底解説！」を一読ください。
コメント