【動画で学習】UdemyのTypeScript 人気/おすすめ講座【セールでお得】

こちらでは、UdemyのTypeScript講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのTypeScript講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるTypeScriptの最新の人気講座ランキング(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

人気
Rank
学習コース評価
1
超TypeScript入門 完全パック(2021)
発売日 2020/01/29
受講者 6,295人
通常 19,200円
現在 2,330円
(4.4)
総評価数 1090件
2
最速で学ぶTypeScript
発売日 2020/06/29
受講者 2,670人
無料講座
(4.5)
総評価数 430件
3
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門...
発売日 2019/09/29
受講者 3,656人
通常 24,000円
現在 2,030円
(4.6)
総評価数 608件
4
最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
受講者 1,947人
無料講座
(4.4)
総評価数 231件
5
【世界で7万人が受講】Understanding TypeScript - 2020年最新版
発売日 2020/01/14
受講者 2,277人
通常 24,000円
現在 2,330円
(4.5)
総評価数 359件
6
Firebase + React Hooks(TypeScript)によるWebアプリ開発
発売日 2020/10/18
受講者 1,175人
通常 19,800円
現在 1,730円
(4.5)
総評価数 178件
7
(4.5)
総評価数 67件
8
[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA
発売日 2020/09/09
受講者 592人
通常 19,800円
現在 1,730円
(4.6)
総評価数 60件
9
(4.4)
総評価数 58件
 

UdemyのTypeScript 人気・おすすめの3講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

超TypeScript入門 完全パック(2021)

超TypeScript入門 完全パック(2021)
発売日 2020/01/29
(4.4)

14 total hours
TypeScriptの完全パックとなっていますので、本気でTypeScriptを熟知したいJavaScript、Vue、React、Angular、Node.jsエンジニアの方は、ぜひこの講座で学んでみてください。

エンジニアのみなさん!

このコースを修了する頃には、TypeScriptの多くを熟知し、TypeScriptを使ったモダンな開発をしているでしょう。


このコースがあなたの職業生活や私生活にどのように役立つか。

  • JavaScriptを使っている方は、モダンな開発手法が身につきますので、今すぐこの講座に投資してください。npmが行った33000人を対象にしたのアンケートによると、62%以上のnpmユーザーはTypeScriptを使用しています。The State of JavaScriptによる21,717人を対象にしたアンケートでは、80%以上の人がTypeSciptを使いたいと答えています。GithubのアンケートではTypeScriptはついにトップ7の言語となりました!この講座に投資することで得られるスキルは、きっとあなたの市場価値を大きく高めるでしょう

  • AngularやVue、Reactを使っている方にとってもこの講座に投資する価値があります。AngularはTypeScriptを使用していますし、Vue3はTypeScriptで書かれているため、TypeScriptとの相性は非常に良いです。ReactもTypeScriptのサポートが充実しています。JavaScriptフレームワークとの相性は非常に良いので、ぜひこのコースでTypeScriptを学んでみてください!

  • Node.jsを使っている方も、もちろんTypeScriptは役に立ちます。Node.jsでTypeScriptは使用できますし、NestJSというTypeScriptを使用したNode.jsのフレームワークを使用することで、より良いバックエンドの開発もできます。少しでもTypeScriptに興味がある場合は、この講座でTypeScriptの多くを学べますので、ぜひ、この機会をお見逃しなく!


登録前に抱くかもしれない質問

  • この講座で何が学べるのか?

    この講座は、TypeScriptの完全パックになっています。あなたは、TypeScriptで使用される基礎的な型と応用的な型、そしてコンパイラの設定方法、クラス、インターフェース、ジェネリクス、デコレーター、モジュール、Webpack、React、Node.jsやその他のJavaScriptライブラリーの使い方など応用的な内容を網羅的に学ぶことができます。また、オブジェクト指向プログラミングを用いた、健康管理アプリの作成も実践演習として、講座内に折り込んでいます。もし、不安な場合は、プレビューを見てみてください。各セクションの最初に、講座の内容を説明しています。

  • TypeScriptを使ったことがない場合、購入するべきではないのか?

    この講座の主なターゲットは、TypeScriptを使ったことのない方ですので、購入する躊躇はいりません。今すぐ一緒にTypeScriptを勉強しましょう。もちろん、TypeScriptを使ったことのある方も大歓迎です。ジェネリクスやデコレーターなど、TypeScriptの応用的な使い方を知らないという方にとってこの講座はぴったりですので、ぜひ購入してみてください。

  • 思っていた講座と違った場合、どうすれば良いのか?

    間違えて購入してしまった場合も問題ありません。Udemyでは30日間の全額返金保証を行なっております。講座の内容には自信がありますが、もし万が一講座に満足いただけなかったとしても心配ありませんので、ご安心ください。

このコースがどのような問題、ニーズ、希望に応えるか

  • TypeScriptのドキュメントを読んだが、あまりよくわからなかった

  • 本だと退屈で時間がかかるので短期間で動画で学びたい

  • 応用的な内容までまとまった動画教材がないので困っている。

このように感じているならば、この講座は以下のようにしてこれらの問題に応えているので、ぜひ購入を検討してみてください。

  • ドキュメントの内容を噛み砕いてわかりやすく解説

  • あなたが退屈と感じ、飽きないよう、そして、短期間で多くの情報が得られるよう、テンポの良い説明

  • ジェネリクスやデコレータなど応用的な内容を収録


この講座の内容リスト

  • TypeScriptの型はこう書く!

  • コンパイラを使う方法

  • TypeScriptではClassをこう使う!

  • これがInterfaceだ!

  • ジェネリクスの仕組み

  • デコレーターはこう使う!

  • 実践:健康管理アプリはTypeScriptでこう作る!

  • モジュール」と「Webpack

  • こうしてTypeScriptでJavaScriptライブラリーを使う!

  • React.jsをTypeScriptと一緒に使う方法

  • Node.jsExpressとTypeScriptを一緒に使う方法


↓全て表示↑少なく表示
 
Users Voice
Typescriptの内部的な見方にも触れられていて、Typescriptの周囲の知識(Webpack,nodemon,node,react etc...)にも触れられていて、網羅的にTypescriptの触り方や、位置的なものも身につけられたと思います。 また、歴史的な経緯の説明もあり、前まではXXだったが、こういう経緯でYYYとなった。だから今YYYを使用している等、非常に納得いく説明が多く、ネットの記事の判断(このコードはちゃんと新しい書き方だとか、これは以前の古い書き方だなど)することができるようになりました。Typescriptの利用にハードルを感じていましたが、それを払拭できたことにこの講座を受けて本当に良かったと思います。ありがとうございました。個人的には、オブジェクト指向でTypescriptのサンプルアプリを作成するところなどは知見がなかった為非常に新鮮でした。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • コースの紹介
    • これがTypeScriptだ!
    • TypeScriptをインストールする方法
    • TypeScriptをJavaScriptに変換する方法
    • ご紹介。私が使用している拡張機能と設定とキーボードショートカット
    • TypeScriptを使うべき3つの理由
    • TypeScriptのドキュメントとしての側面を理解する
    • TypeScriptのLinterとしての側面を理解する
    • TypeScriptのES5へのコンパイラとしての側面を理解する
    • このコースの流れ
    • 再生速度の変更とQ&Aを使って質問する方法
  2. TypeScriptの型はこう書く!
    • イントロダクション - セクション2
    • 「TypeScriptの型」と「JavaScriptの型」
    • boolean型とnumber型とstring型を使う方法
    • 「型注釈」と「型推論」
    • オブジェクトに型を付ける方法
    • 配列に型を付けるArray型はこう使う
    • Tuple型を使用して、決まった内容の配列を作る方法
    • Enumを使って、特定のまとまったグループのみを受け入れる列挙型を使う方法
    • どんな型にもなるany型について知る
    • Union型を使って複数の型 を使う方法
    • Literal型を使って特定の値のみを取り扱う方法
    • typeエイリアスを使って複雑な型を変数のように扱う
    • 関数に型を適応させる方法
    • 関数の戻り値にvoid型を使う方法
    • undefined型とnull型についての補足
    • 関数型を使って、特定の関数のみを代入できる変数を作る
    • callback関数の型はこう書く
    • unknown型を使って、柔軟でanyよりも厳しい型を定義する方法
    • never型を使って、起こり得ない値の型を使用する方法
    • まとめ - セクション2
  3. コンパイラを使う方法
    • イントロダクション - セクション3
    • watchモードを使って、保存時に自動的にTSからJSにコンパイルする方法
    • tsc —initでtsconfig.jsonを作り、全てのファイルを一気にコンパイルする方法
    • includeとexcludeとfilesを使ってコンパイルするファイルを選ぶ方法
    • targetを指定して、特定のバージョンのJavaScriptに変換する方法
    • libを指定して、TypeScriptが用意している型の定義を追加する
    • allowJs、checkJs、jsx、declaration、declarationMapの設定はこう使う
    • SourceMapを使用して、ブラウザでTypeScriptを操作する方法
    • outDirとrootDir、removeComments、noEmit、downlevelIterationの使い方
    • noEmitOnErrorオプションを使って、エラーが出た時にコンパイルしない方法
    • noImplicitAnyやstrictNullChecksなどのstrictの設定はこう使う
    • 綺麗なコードを書くための設定をする方法
    • まとめ - セクション3
  4. TypeScriptではClassをこう使う!
    • イントロダクション - セクション4
    • これがオブジェクト指向プログラミングだ
    • classを定義してオブジェクトを作成する方法
    • JSにコンパイルされたclassはこうなっている
    • クラスにメソッドを追加する方法
    • クラスを型として使う方法
    • public修飾子とprivate修飾子を使用して、アクセスを制限する方法
    • 初期化の処理を省略する方法
    • readonly修飾子を使って、書き換え出来ないようにする方法
    • extendsを使用して、他のクラスの機能を継承する方法
    • protected修飾子を使用して、継承先までアクセスできる範囲を広げる方法
    • ゲッターとセッターはこう作る
    • staticを使用して、インスタンスを作らずにクラスを使う方法
    • Abstractクラスを使用して、継承にのみ使えるクラスを作成する方法
    • privateをconstructorに付けて、シングルトンパターンを実装する方法
    • まとめ - セクション4
  5. これがInterfaceだ!
    • イントロダクション - セクション5
    • interfaceはこう使う!
    • メソッドをオブジェクトの型に指定する方法
    • implementsを使用して、クラスに対してinterfaceの条件を適応させる方法
    • これがTypeScriptの構造的部分型だ!
    • readonly修飾子をinterfaceに使って読むだけのプロパティを作る方法
    • extendsを使ってinterfaceを継承する方法
    • interfaceで関数の型を表現する方法
    • ?を使って、あってもなくても良いオプショナルプロパティとオプショナルパラメーターを使用する方法
    • まとめ - セクション5
  6. こうすればもっとTypeScriptがわかる応用的な使い方
    • イントロダクション - セクション6
    • AかつBのように、&を用いてインターセクション型を定義する方法
    • 条件文を使って型を絞り込む、3つのType guard
    • タグ付きUnionを使って型を絞り込む方法
    • 型アサーションを使って、手動で型を上書きする方法
    • !(Non-null assertion operator)を使って、nullじゃないと言い切る方法
    • インデックスシグネチャを使用して柔軟なオブジェクトを作る方法
    • 関数のオーバーロードを使って、戻り値の型を正しくTypeScriptに伝える方法
    • Optional Chainingはこう使う!
    • Nullish Coalescingはこう使う!
    • LookUp型を使ってオブジェクトのメンバーの型を取得する方法
    • 型の互換性の仕様書はこうなっている!
    • 「TypeScriptの型安全性」と「JavaScriptの柔軟性」
    • 関数型のオーバーロードはinterfaceで定義する必要がある
    • 関数型のインターセクションはオーバーロードになる
    • 関数型のユニオン型はパラメータがインターセクション型、戻り値はユニオン型になる
    • レストパラメーターに配列やタプルを指定する方法
    • 配列とタプルにreadonly修飾子をつける方法
    • constアサーションはこう使う
    • 型の中でtypeofを使うと、こんな便利なことができる
    • まとめ - セクション6
  7. ジェネリクスの仕組み
    • イントロダクション - セクション7
    • こうしてジェネリクスを使って、型を引数として受け取る
    • extendsを使って型パラメータに制約をつける方法
    • keyofを使ってオブジェクトのキーのユニオン型を作成する方法
    • Classに対してジェネリクスを使用する方法
    • Interfaceに対してジェネリクスを使用する方法
    • 内蔵されているジェネリック型であるUtility型の紹介
    • デフォルトの型パラメーターを指定する方法
    • 型のfor文であるMapped Typesはこう使う
    • 型のif文であるConditional Typesはこう使う
    • まとめ - セクション7
  8. デコレーターはこう使う!
    • イントロダクション - セクション8
    • デコレータを使ってClassに関数を適応する方法
    • デコレータファクトリを使用して、デコレータに引数を渡す方法
    • こうしてデコレータを使って簡易版のフレームワークを作成する
    • 複数のデコレータを同時に使う方法
    • 戻り値にクラスを指定して、新しいクラスを作り出す方法
    • 「プロパティーデコレータを使う方法」と「prototypeについて」
    • 「メソッドデコレータを使う方法」と「PropertyDescriptorについて」
    • アクセサーデコレータはこう使う
    • 戻り値を使って、実践的なメソッドデコレータを使う方法
    • パラメータデコレータはこう使う
    • まとめ - セクション8
  9. 実践:健康管理アプリはTypeScriptでこう作る!
    • イントロダクション - セクション9
    • こうしてオブジェクト指向プログラミングでアプリを作り始める
    • Foodsクラスで、全ての食べ物の要素を保持する方法.mp4
    • こうすれば、クラスを綺麗に分離できる。
    • Foodクラスにクリックイベントを加える方法
    • コールバック関数でthisを使用する場合はこうする
    • activeな食べ物の配列を取得できるようにする方法
    • activeな食べ物のスコアの配列を取得できるようにする方法
    • トータルスコアを取得する方法
    • 取得したトータルスコアを表示する方法
    • アプリでシングルトンパターンを使用する
    • Interfaceを使用して、わかりやすいコードを作成する方法
    • まとめ - セクション9
  10. 「モジュール」と「Webpack」
    • イントロダクション - セクション10
    • scriptタグを並べて、ファイルを分割する方法
    • ESモジュールを使って、ファイルを分割する方法
    • ローカルサーバーを用意して、ESモジュールをブラウザで利用する方法
    • 「4つのimportの書き方」と「2つのexportの書き方」
    • モジュールはこのタイミングで実行される
    • これがWebpackを使う理由だ!
    • Webpackをインストールしてセットアップする方法
    • webpack.config.jsのoutputはこう書く!
    • source mapをwebpackで作成する方法
    • ts-loaderを使って、TypeScriptを直接Webpackで扱う方法
    • webpack-dev-serverを使用して、bundleをローカルサーバーから提供する方法
    • webpackのバージョンの補足
    • 本番用の設定でwebpackを使う方法
    • まとめ - セクション10
  11. こうしてTypeScriptでJavaScriptライブラリーを使う!
    • イントロダクション - セクション11
    • これが型定義ファイル(.d.ts)だ!
    • DefinitelyTypedの@typesパッケージをインストールして、既存の型定義ファイルを使う方法
    • .d.tsファイルを作って、npmからインストールしたライブラリーを使う方法
    • .d.tsファイルを作って、CDNからインストールしたライブラリーを使う方法
    • namespaceはこう使う!
    • namespaceで型を定義する方法
    • axiosの型定義ファイルを理解し、declareの意味を知る
    • lodashの型定義ファイルはこうなっている
    • declare globalを使ってプロジェクト全体で使える値や型を定義する
    • 同じ名前の値と型とnamespaceはこうして一緒に使う!
    • 型定義ファイルを拡張する方法
    • .d.tsファイルは実は.tsファイルでも書くことができる
    • まとめ - セクション11
  12. React.jsをTypeScriptと一緒に使う方法
    • イントロダクション - セクション12
    • ゼロからReact.jsとTypeScriptを一緒に使う方法
    • create-react-appを使ってReact.jsとTypeScriptを一緒に使う方法
    • propsに型をつけるにはこうする!
    • React HooksやRedux、React Routerで型を使う時はこうする!
    • まとめ - セクション12
  13. Node.jsとExpressとTypeScriptを一緒に使う方法
    • イントロダクション - セクション13
    • TypeScriptとNode.jsを使って開発する方法
    • Node.jsのモジュールの復習
    • TypeScriptのモジュールとNode.jsのモジュールはこうして相互に繋がっていた
    • esModuleInteropを使って、Node.jsのモジュールにデフォルトimportを使用する方法
    • Expressを使ってルーティングの処理をする
    • VSCodeを使って、正しい型を見つける方法
    • 型を拡張してRequestのbodyに正しい型をつける方法
    • まとめ - セクション13
  14. このコースのまとめ
    • このコースのまとめ
    

ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門

ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門
発売日 2019/09/29
(4.6)

17 total hours
受講生の約6割が次に学びたいと高注目のTypeScript。Goに並ぶ人気、フロントエンド(React/Vue/Angular)やバックエンド(AWS CDKでPythonと並び採用)での存在感は、まさに非の打ち所無し!今すぐダイブしよう!

注釈)本コースでは、Node.jsのv12.14.1を使用し講義を進めます。


本コースはTypeScriptを学習するコースとなりますが、冒頭のセクションとなる「環境構築」ではスクラッチで環境を構築していきます。


そして、次のセクション以降は、コードを書きながらTypeScriptの言語仕様を学習します。


まずは、「基本的な型について学ぼう」というところで、文字通り、TypeScriptに存在する型の紹介とその適用方法についてしっかり学びます。


そして、「関数で「型」を使ってみよう」に入って関数に対して、型の概念を適用する方法を学びます。


その次に、「クラス」の話に入ります。TypeScriptでは、型の概念が取り入られるだけじゃなくてJavaScriptのクラスのオブジェクト指向性がより強化されます。通常のJavaScriptに不足していたオブジェクト指向の機能が導入されていますので、その内容についてしっかり学んでいきます。


最後に、「高度な型」について学びます。高度といっても、TypeScriptのコードを読み書きする上での必須の技術ばかりですので、是非、最後まで完走して頂けたらと思います。


いくつかのレクチャーをプレビュー設定にしていますので、レクチャーの雰囲気等がお分り頂けるかと思いますので、是非プレビューも含めてご検討頂けると嬉しいです。


↓全て表示↑少なく表示
 
Users Voice
はむさんの講座を始めて受講しましたが、説明が明快で的を射ており非常に学習しやすかったです。 初心者への配慮からか説明がやや冗長な印象ですが、その分確実に段階を踏んで理解を深められますし、倍速で手を動かしながら受講すれば問題ありませんでした。 gitによるソースコードの管理や環境構築についても、極力つまずきを減らす工夫がされていると感じました。 Reactの章でVirtualBox上のUbuntuでDockerを起動するのは二度手間かもと思ったのですが、Mac OSでも普通に動いて快適に受講できました(他の人も同様に動くことは保証できませんが)。 nodeのバージョンが12系から更新されていないのが少し気になりますが、講座の内容自体はバージョンに関わらず有用だと思います。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. 「イントロダクション」から「環境構築 - TypeScriptの実行環境を作ろう」まで
    • イントロダクション
    • 本コースの概要
    • 本コースのセクション1からセクション5までの内容のソースコードを収録したgitリポジトリについて
    • こんにちは!TypeScript!
    • Node.jsのインストールをしよう
    • GitHubでリポジトリを作成しよう
    • package.jsonを作ろう
    • typescriptをインストールしよう
    • ts-node をインストールしよう
    • ts-node-dev をインストールしよう
    • Visual Studio Code をインストールしよう
  2. 基本的な型について学ぼう
    • boolean型
    • ts-node-dev 不具合対応 ※重要なレクチャーになるため必ず確認してください
    • number型、string型
    • array型
    • tuple型
    • any型
    • void型
    • null型とundefined型
    • never型
    • object型
    • 型エイリアス(Type Aliases)
    • interface
    • 型安全とは
    • unknown型
    • 交差型(intersection型)
    • 共用体型(union型)
    • Literal型
    • 列挙型(enum型)
  3. 関数で「型」を使ってみよう
    • functionキーワードによる関数定義
    • 無名関数による関数定義
    • アロー関数(ラムダ式)による関数定義
    • オプショナルなパラメータを定義しよう
    • デフォルトパラメータを設定しよう
    • Restパラメータを設定しよう
    • オーバーロードをやってみよう
  4. クラスで「型」を使ってみよう
    • クラスを作ってみよう
    • アクセス修飾子を使ってみよう
    • constructorを使い倒す
    • getter と setter
    • readonly 修飾子
    • 静的メンバを定義しよう
    • namespaceによる名前空間
    • 継承
    • 抽象クラスと抽象メソッド
    • インターフェース・リターンズ
  5. 高度な型について学ぼう
    • 型の互換性
    • ジェネリクス
    • 型アサーション
    • constアサーション
    • Nullable Types
    • インデックスシグネチャ
  6. Utility TypesとConditional Typesについて学ぼう
    • Utility TypesとConditional Typesをなぜ学ぶのか
    • PartialとRequired
    • Mapped Types
    • Readonly
    • Record
    • Exclude と Exract と NunNullableについて
    • Conditional Types と Distributive Conditional Types についてマスターしよう
    • Pick と Omit
    • ReturnType
    • Conditional Typesで使用されるinferキーワードについて
    • Parameters
    • ConstructorParameters
  7. React アプリケーションとTypeScript
    • Reactの紹介、なぜReactを学ぶのか
    • GitHubでリポジトリを作成しよう
    • Function Components 入門編
    • Function Components 初級編
    • useStateと型制約
    • useRefとuseEffectを使ってみよう
    • useRefのより実践的な使い方とOptional ChainingとNon-Null Assertion Operatorの紹介
    • useReducerとオーバーロードを用いたその型定義について
    • useReducerの利用例
  8. さいごに
    • さいごのご挨拶
    

【世界で7万人が受講】Understanding TypeScript - 2020年最新版

【世界で7万人が受講】Understanding TypeScript - 2020年最新版
発売日 2020/01/14
(4.5)

15.5 total hours
JavaScriptのより優れたバージョンであるTypeScriptを基本から応用まで学べます。Webpack, React, Express + Node.js との組合せも含め、実PJで役立つ実践的な知識を身につけることができます。

このコースは、7万人以上が受講し、非常に評判の高いコースであるMaximilian Schwarzmüller氏のUnderstanding TypeScript - 2020 Editionの日本語版です。

○ なぜ日本の開発者がTypeScriptを学ぶ必要があるのか

世界の最先端の現場では、新しくJavaScriptのプロジェクトを作成する場合、TypeScriptを採用することが当たり前になりつつあります。日本では、まだ普及の途上ですが、今後も様々な現場で利用が広がっていくことは確実です。なぜなら、TypeScriptはJavaScriptの上位互換だからです。

このコースでは、TypeScriptとは何か、なぜJavaScriptの上位互換であると言えるのか、ということを学べます。そしてTypeScriptの機能と、それらを利用する方法を学ぶことができます。

このコースでは、非常に基本的な内容や、最も重要な機能である型の説明から始まります。そして、最後まで学ぶことによって、最終的にどんなプロジェクトでも活かせる知識を身につけることができます。ReactExpressのプロジェクトを作るレクチャーも含まれています。

TypeScriptはMicrosoftによって開発されましたが、Angular 2+に利用されたことによって広まり、Googleの標準言語にもなっています。

最先端のプロジェクトで、TypeScriptが利用されており、日本でも今後もさらに普及していくことが予想されます。TypeScriptを基礎からしっかりと理解すれば、様々なプロジェクトで活躍することができるでしょう

○ TypeScriptは未来を先取りしています

TypeScriptのコードはES5にコンパイルできるので、たくさんの次世代バージョンのJavaScript機能を、今日の時点で利用できます。たとえば、ES6の機能である、分割代入の構文や、アロー関数、デコレータ、ジェネリクス、インターフェース、モジュールなど、TypeScriptでは、これらをすべて利用できます

このコースで学べることは、基本だけではありません。より高度な機能や、TypeScriptプロジェクトのワークフローを作成する方法も学ぶことができます。これは、TypeScriptだけのワークフローだけではなく、Webpackのワークフローも含んでいます。

また、単なるJavaScript / TypeScriptのプロジェクトだけに留まらず、TypeScriptを使って、Reactのアプリケーションを作る1つのセクションも含んでいます。

○ 学んだことを実践してください

動画を見ることは非常に良い学習方法であり、多くの学習者にとって、ベストな方法です。もし、手を動かして練習したい場合には、そのためのセクションがたくさん含まれています。

○ たくさんの内容がつまっています

このコースは、基本的なことだけを説明して、受講者が具体的にどうすればよいか分からないまま終わるようなコースではありません。このコースでは、これらのことを学ぶことができます。

  • 型、型の使い方

  • TypeScriptのコンパイラがどのように動作するか

  • TypeScriptで利用できるES6の機能

  • TypeScriptにおけるクラス

  • 名前空間とモジュール

  • インターフェース

  • ジェネリクス

  • デコレータ

  • サードパーティのJavaScriptライブラリをTypeScriptプロジェクトで利用する方法

  • Webpackを使ってTypeScriptのプロジェクトをセットアップする方法

  • または、TypeScriptだけを使ったワークフローをセットアップする方法

  • ReactアプリケーションでTypeScriptを使う方法

  • Node/ ExpressアプリケーションでTypeScriptを使う方法

  • TypeScriptが利用されているプロジェクトとユースケース



↓全て表示↑少なく表示
 
レクチャー内容
  1. TypeScript入門
    • コースへようこそ
    • TypeScript 概要 & 使う理由
    • TypeScriptのインストール & 利用方法
    • TypeScriptのメリット
    • コースの概要
    • このコースを最大限に活用する方法
    • 開発環境(IDE)の設定
    • コースで利用するプロジェクトの作成
  2. TypeScriptの基本と型
    • イントロダクション
    • 型の利用
    • JavaScriptの型 vs TypeScriptの型
    • 重要:型の大文字・小文字
    • number, string, boolean型の使い方
    • 型の指定 & 型推論
    • Object 型
    • ネストしたObject 型
    • Array 型
    • Tuple 型
    • Enum 型
    • any 型
    • Union 型
    • Literal 型
    • 型エイリアス / カスタム型
    • 型エイリアス と Object 型
    • function 型 と void 型
    • function 型
    • function 型とコールバック
    • unknown 型
    • never 型
    • まとめ
    • 役に立つ資料 & リンク
  3. TypeScript の設定とコンパイラ
    • イントロダクション
    • Watch モードの使い方
    • プロジェクト全体のコンパイル方法
    • ファイルの Include & Exclude の設定
    • コンパイルターゲットの設定
    • Lib 設定の理解(ビルトイン API の設定)
    • その他の設定、コンパイラオプション
    • Source Map の利用
    • rootDir と outDir の設定(ソースフォルダと出力先フォルダの設定)
    • コンパイルエラー時にJavaScriptの出力をしない設定
    • 厳格な型チェックのオプション(Strict Type-Checking Options)
    • コード品質に寄与するオプション
    • Visual Studio Code を利用してデバッグする方法
    • まとめ
    • 役に立つ資料 & リンク
  4. 新しい世代のJavaScriptとTypeScript
    • イントロダクション
    • "let" & "const"
    • アロー関数
    • デフォルト関数パラメータ
    • スプレッドオペレータ(...)
    • レストパラメータ(残余引数)
    • 配列とオブジェクトの分割代入
    • コンパイルターゲット&まとめ
    • 役に立つ資料 & リンク
  5. クラス & インターフェース
    • イントロダクション
    • クラスとは?
    • 最初のクラス
    • JavaScriptへのコンパイル
    • コンストラクタ関数 & "this" キーワード
    • "private" & "public" 修飾子
    • プロパティ初期化のショートカット構文
    • "readonly" プロパティ
    • 継承
    • プロパティのオーバーライド & "protected" 修飾子
    • Getter & Setter
    • static メソッド & プロパティ
    • abstract クラス(抽象クラス)
    • シングルトン & private コンストラクタ
    • クラスのまとめ
    • 最初のインターフェース
    • クラスでのインタフェースの実装
    • インターフェースを利用する理由
    • 読み取り専用のインターフェースプロパティ
    • インターフェースの拡張
    • 関数型としてのインターフェース
    • 任意のパラメータ & プロパティ
    • インターフェースの JavaScript へのコンパイル
    • まとめ
    • 役に立つ資料 & リンク
  6. 高度な型
    • イントロダクション
    • 交差型
    • 型ガード
    • 判別可能な Union 型
    • 型キャスト
    • インデックス型
    • 関数オーバーロード
    • オプショナルチェイン
    • NULL合体演算子
    • まとめ
    • 役に立つ資料 & リンク
  7. Generics(ジェネリクス)
    • イントロダクション
    • 組み込みの Generic 型 & Generics とは
    • Generic 関数の作成
    • Generics に制約を追加する
    • もうひとつの Generic 関数
    • "keyof" の制約
    • Generic クラス
    • まとめ
    • Generic型のユーティリティ
    • Generic 型 vs Union 型
    • 役に立つ資料 & リンク
  8. デコレータ
    • イントロダクション
    • 最初のクラスデコレータ
    • デコレータファクトリ
    • 便利なデコレータ
    • 複数のデコレータの追加
    • プロパティデコレータの詳細
    • アクセサとパラメータのデコレータ
    • デコレータの実行タイミング
    • クラスデコレータによるクラスの変更
    • その他のデコレータの返却値
    • 例:"Autobind" デコレータの作成
    • デコレータによるバリデーション - 最初のステップ
    • デコレータによるバリデーション - 完成
    • バリデーションモジュールのバグ修正
    • まとめ
    • 役に立つ資料 & リンク
  9. 実践!ドラッグ & ドロップ可能なプロジェクト管理ツールの作成
    • イントロダクション
    • プロジェクト作成
    • DOM要素の取得 & オブジェクト指向
    • DOM要素の操作
    • "Autobind" デコレータの作成 & 利用
    • ユーザ入力の取得
    • 再利用可能なバリデーション機能の作成
    • プロジェクト一覧の表示
    • シングルトン & アプリケーションの状態管理
    • 追加のクラス & カスタム型
    • Enum によるプロジェクトのフィルタリング
    • 継承の追加 & ジェネリクス
    • プロジェクト項目の表示
    • Getter の利用
    • ドラッグ & ドロップ実装におけるインターフェースの活用
    • ドラッグイベント & 状態をUIに反映する
    • ドロップ可能な場所
    • ドラッグ & ドロップ機能の完成
    • まとめ
    • 役に立つ資料 & リンク
  10. モジュールと名前空間 (namespace)
    • イントロダクション
    • モジュール分割の選択肢
    • 名前空間の利用
    • ファイルとフォルダの整理
    • 名前空間の問題点
    • 注意:Chrome または Firefox を使ってください
    • ESモジュールの利用
    • インポート & エクスポート構文のバリエーション
    • モジュールのコードが実行されるタイミング
    • まとめ
    • 役に立つ資料 & リンク
  11. Webpack と TypeScript
    • イントロダクション
    • Webpack とは何か & なぜ必要なのか
    • Webpack のインストール & 重要な依存パッケージ
    • エントリポイントと出力設定
    • ts-loaderの利用(TypeScriptサポートの追加)
    • 【注意】開発用サーバの起動設定について
    • セットアップの完了 & webpack-dev-server の追加
    • 【注意】本番用のワークフロー設定について
    • 本番用のワークフロー設定
    • まとめ
    • 役に立つ資料 & リンク
  12. サードパーティライブラリ & TypeScript
    • イントロダクション
    • JavaScriptライブラリの利用
    • 最後の手段としての "declare" の利用
    • class-transformerの例
    • class-validatorの例
    • まとめ
    • 役に立つ資料 & リンク
  13. 住所検索アプリの作成(Google Maps)
    • イントロダクション
    • プロジェクトの設定
    • ユーザ入力の取得
    • Google API キーの設定
    • Axios & 住所の座標取得
    • Google Map による地図の表示
    • クレジットカード無しで地図を表示したい場合
    • 役に立つ資料 & リンク
  14. React & TypeScript
    • イントロダクション
    • React + TypeScript のプロジェクト作成
    • React と TypeScript を一緒に使うには?
 
Preview Video
   

Udemyで無料で学べるTypeScript講座一覧

以下の講座は無料で学習が可能。

無料コースでは、質問ができない、学習した証の修了証書が発行されない、といった違いがありますが、動画コンテンツはすべて利用可能。

有料講座ほどの内容の幅はないですが、動画学習の取っ掛かりとしてまずこちらを試してみるのもおすすめです。

最速で学ぶTypeScript

最速で学ぶTypeScript
発売日 2020/06/29
(4.5)

1.5 total hours
これからのフロントエンドエンジニアのMUSTスキル、TypeScriptを一から学べます!React HooksにTypeScriptを適用するときのポイントも解説します!

TypeScriptを使うことにより、より型安全で高品質なソフトウェアを開発することが出来ます。JavaScriptに対して上位互換性があるのでJavaScriptで培ったスキルはそのまま使えますし、Visual Studio Codeの強力な補完機能によって開発者には負担を掛けることなくTypeScriptを導入してく事が出来ます。


これからのフロントエンジニアのMUSTスキル、TypeScriptを本コースでマスターしましょう!




↓全て表示↑少なく表示
 
Users Voice
TypeScriptの基礎から丁寧に教えていただき非常に良かったです。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. TypeScriptの必要性
    • TypeScriptの必要性
    • 2021年版 React学習ロードマップ
  2. TypeScript徹底理解
    • [訂正] create-react-app
    • レッスンに必要な環境構築
    • VS Code : Prettier設定
    • TypeScriptのデータ型
    • Intersection Types
    • UnionTypes
    • Literal Types
    • typeof
    • keyof
    • enum (列挙型)
    • 型の互換性
    • Generics(ジェネリックス)
    • JSON型推論
    • React Hooks Props型
    • React Hooks useState
    • Event handler : データ型
  3. 更に勉強したい人向け
    • [ボーナスレクチャー] 関連コースのご案内(クーポン付き)
 
Preview Video
   

最速で学ぶFirebase + React Hooks (TypeScript)

最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
(4.4)

1.5 total hours
FirebaseのCloud Firestore,Authentication,Hosting機能とReact Hooks/TypeScriptを使ってToDoアプリのハンズオン

本コースでは、はじめてWebアプリケーションを勉強される方向けに、簡単にバックエンドの機能を利用できるFirebaseを使っていきます。Firebaseによるバックエンド、Reactによるフロントエンドとの連携、ディプロイの流れを通じて小さなWebアプリを公開していきます。


*本コースでは、TypeScriptを使用するので無料コースの"最速で学ぶTypeScript"を事前に受講しておいてください。

*React Hooksを徹底理解したい方は、"[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発"コースがおすすめです。


Firebaseのデータベース(Cloud Firestore)、認証機能を使って簡単なToDoアプリをハンズオンで作成します。

フロントエンドは、React Hooks/TypeScript/Material UIを使っていきます。


Firebaseは、Nativeアプリ(iOS, Android)開発のバックエンドとして採用されることが多く、近年のクロスプラットフォームフレームワーク(Flutterなど)とも非常に相性が良いです。NativeアプリとWebアプリ(React)でデータベースを共有したい場合やFirebaseのリッチな認証機能をReactに取り入れたいケースにFirebaseとReactを連携させるスキルが必要になります。本コースでは、ToDoアプリを通じて基礎的な連携方法について学んでいきます。



↓全て表示↑少なく表示
 
Users Voice
私はVue.jsの知識がありますが、Reactの知識ゼロの状態で受講しました。 Material-UIやReactの公式サイトを行き来しながらコースの通りに手を動かすことで、Reactの基礎的な動きを理解することができました。 ここで自信がついたことで次のステップに進めます。ありがとうございました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • TypeScript無料コース
    • コースに必要なツールのインストール
    • 本コースのSource code
    • 2021年版 React学習ロードマップ
  2. ToDo アプリのハンズオン (Firebase + React Hooks/TypeScript)
    • Reactプロジェクト作成
    • vs-icons 設定
    • Firebaseのアカウント
    • databaseURL
    • [注意点] firebase import文
    • FirebaseとReactの連携
    • Firebaseデータベース
    • FirebaseのデータをReactでレンダリング
    • タスク作成機能
    • TaskItemコンポーネント
    • CRUD
    • CSS
    • React-Router-DOM
    • Firebase認証機能(Login)
    • Firebase認証機能(Log out)
    • Deploy
  3. 更に学びたい人向け
    • ボーナスレクチャー
 
Preview Video
   

最短・最速で学ぶTypeScript 実践入門 - 最新モダン開発には欠かせないTypeScript をマスターしよう!

最短・最速で学ぶTypeScript 実践入門 - 最新モダン開発には欠かせないTypeScript をマスターしよう!
発売日 2020/01/20
(4.4)

1 total hour
このコースは忙しく学習時間が取れないエンジニアの皆様に最短、最速でTypescriptの基礎を学べるようにデザインされたコースです。2020年 TypeScriptをマスターし、最新のモダン開発手法を一緒に身につけていきましょう!



はじめに、このコースは忙しく学習時間が取れないエンジニアの皆様に
最短、最速でTypescriptの基礎を学べるようにデザインされたコースです。
2020年 TypeScriptをマスターし、最新のモダン開発手法を一緒に身につけていきましょう!

TypeScript は Microsoftによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語です。
特徴としては TypeScriptは、変数やサブルーチンを安全に扱える静的型付き言語であることやクラスを使用できることなどがあげられます。
また、TypeScriptはクライアントサイド・サーバーサイド両方の開発で利用することが可能なこともあり多くの現場で取り入れられています。

本講義では、このようにJavaScriptのスーパーセットでJavaScript開発でのデファクタスタンダードになりつつあるTypeScriptについて基礎から学んでいきます。

※Typescriptチートシート配布



↓全て表示↑少なく表示
 
Users Voice
わかりやすい。 ただ初めて学ぶにしては話すのが早いので手を動かしながらや、理解しながらやるのに自分は0.75倍速で聞いた (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめまして
    • 第1回 はじめに
  2. TypeScriptとは?
    • 第2回 TypeScriptを利用するメリットは?
  3. 開発環境の準備
    • 第3回 VScodeのインストール
  4. 基本の型
    • 第4回 TypeScriptでの型定義について (Boolean型, Number型, String型)
    • 第5回 Array型 & Tuple型について
    • 第6回 Object型について
  5. 高等な型
    • 第7回 Union型 & Any型について
    • 第8回 Enum型について
    • 第9回 Literal型について
  6. 型のエイリアス
    • 第10回 型のエイリアスについて
  7. TypeScriptでの関数の扱い
    • 第11回 Function型について
  8. TypeScriptでのクラスの扱い
    • 第12回 JavaScriptにおけるClassについて
    • 第13回 TypeScriptにおけるClassについて
  9. Interfaceについて
    • 第14回 Interfaceの基礎
    • 第15回 Interface - Function編
    • 第16回 Interface - Class編
  10. Genericsについて
    • 第17回 Genericsについて
  11. 終わりに
    • 終わりに
        

関連:TypeScriptを本でも学ぼう

UdemyのTypeScript講座は上述したとおり、基礎文法からReactやVueを使った実用まで、詳しく・幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

TypeScriptの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました