【動画で学習】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
発売日 2020/06/29
受講者 3,348人
無料講座
(4.5)
総評価数 544件
2
超TypeScript入門 完全パック(2021)
発売日 2020/01/29
受講者 6,970人
通常 19,200円
現在 15,360円
(4.3)
総評価数 1201件
3
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門...
発売日 2019/09/29
受講者 4,133人
通常 24,000円
現在 19,200円
(4.5)
総評価数 680件
4
JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門
発売日 2020/04/02
受講者 3,701人
通常 24,000円
現在 19,200円
(4.4)
総評価数 621件
5
最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
受講者 2,426人
無料講座
(4.6)
総評価数 286件
6
Firebase + React Hooks(TypeScript)によるWebアプリ開発
発売日 2020/10/18
受講者 1,519人
通常 19,800円
現在 15,840円
(4.2)
総評価数 233件
7
(4.4)
総評価数 120件
8
【世界で7万人が受講】Understanding TypeScript 日本語版
発売日 2020/01/14
受講者 2,513人
通常 24,000円
現在 19,200円
(4.5)
総評価数 400件
9
[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA
発売日 2020/09/09
受講者 720人
通常 19,800円
現在 15,840円
(4.6)
総評価数 73件
10
(4.2)
総評価数 70件
11
(4.4)
総評価数 5件
 

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

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

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

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

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

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

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
少し早口すぎるかと思います。それゆえに、必要でないところで接続語が使われていたりしますので、もう少し落ち着いてもらえると良いと思います。 (参考:Udemy)

↓全て表示 ↑少なく表示
非常にわかりやすい (参考: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.5)

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
雰囲気で TypeScript を使っていたので、基礎的な部分の説明から入り、React を使いながらライブラリで使うものにどんな型が定義されているのかの調べ方とその読み解き方が丁寧に説明されており大変理解が進みました!ありがとうございます (参考:Udemy)

↓全て表示 ↑少なく表示
わかりやすい反面、説明が冗長な部分がある。早送りで見ることを勧める。 (参考: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. さいごに
    • さいごのご挨拶
  9. はむさんの落穂拾い
    • macOS でログインシェルを zsh から bash に切り替える方法
  10. ボーナスセクション
    • ボーナストラック:講師からの最後のご挨拶です
    

JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門

JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門
発売日 2020/04/02
(4.4)

8 total hours
フロントエンド開発に欠かせない JavaScriptをキホンから。TypeScriptや Vue.jsもこれ一本で学習して頂けます。

JavaScriptは、ウェブ制作に欠かせないプログラミング言語です。簡単な演出から、近年ではSPA(Single Page Application)の開発などに幅広く活用されています。

JavaScriptの進化は非常に早く、新しい言語仕様やライブラリー・フレームワークが次々に登場していて体系的な学習が難しくなってきています。

この講座では、そんな JavaScriptの新しい仕様(ES6以降)の知識と、近年非常に人気のある「TypeScript」、そして「Vue.js」を一気に学ぶことができるフロントエンド技術の入門講座となっています。

最初は、JavaScriptのキホンのキホンからスタートして、最終的には本格的なフレームワークである「Vue CLI」を用いたアプリケーション開発まで体験していきます。是非ゆっくりと自分のペースで学んでいって頂ければ幸いです。


↓全て表示↑少なく表示
 
Users Voice
セクション5について評価します。(セクション1~4については★5つ満点で良いでしょう。) VueCLIでのコーディングになり、.vueファイルなど作成します。おまじないが増えていき、何度か動画やコーディングを見直さないと動きを掴むのは難しいです。 プロジェクト作成時(vue create)のVueバージョンは2で問題なく動作しました。 babelなど、自学が必要になります。 あと、メモ削除機能が実装できていません、さらっとセクション5の初めにメモ削除もしているので、できればコンテンツ追加してほしいです。 (参考:Udemy)

↓全て表示 ↑少なく表示
最初から公式ドキュメントを読むのはハードルが高いと感じていましたが、こちらの動画で動かしてから、他のドキュメントを調べたりすると理解が深まりました。手元で動かしながらざっと色々なことがインプットできたことが良かったです。 少し説明がわかりづらい部分があったため星-0.5としています (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • Udemyでの講座の進め方
    • 開発環境を整えよう(Windows編)
    • 開発環境を整えよう(macOS編)
  2. JavaScript(EcmaScript 2015/ES6)入門
    • JavaScriptを体験しよう
    • EcmaScript(エクマスクリプト)とは
    • 素材ファイルをダウンロードしよう
    • 画面に文章を表示する - document.write
    • エラーが発生した時の対処法 - Chromeデベロッパーツール
    • JavaScriptを書く時の細かな注意点
    • 警告ウィンドウを表示しよう - window.alert
    • コメントを書こう
    • 計算をしよう - 算術演算子
    • ユーザーに質問しよう - window.prompt
    • 今日の日付を表示しよう - Date
    • 日付をテンプレート文字列を使って表示しよう
    • 画面をその場で変更しよう - innerHTML
    • ウェブブラウザーのタイトルを書き換えよう - window.title
    • 条件によって動きが変わるプログラムを作ろう - if
    • 2つの条件で動き変わるプログラムを作ろう - 論理演算子
    • 1から 365までを連続して表示するプログラムを作ろう - while
    • for構文を使って、より簡単に繰り返しのプログラムを作ろう - for
    • 今日の曜日を日本語で表示しよう - 配列(Array)
    • 連想配列(ハッシュ)を使って配列をより分かりやすく管理しよう - ハッシュ
    • 文章の中からキーワードを検索しよう - indexOf
    • 数字以外の場合にエラーを表示しよう - isFinite
    • 消費税を四捨五入しよう - Math.round
    • ランダムに値を取り出そう - Math.random
    • 偶数か奇数かを判断する - 剰余算
    • 「関数」を作って、よく使う処理をまとめよう
    • 変数のスコープと、let宣言、var宣言の違い
    • クラスを定義しよう
    • setterと getterでプロパティを安全に保とう
    • JSONデータを扱おう
    • 1回だけクリックできるボタンを作ろう - イベントリスナー
    • フォームが空欄だったらエラーを表示しよう
    • チェックボックスにチェックがついたら、ボタンを押せるようにしよう
    • 正規表現を使って、郵便番号が正しいかを確認しよう
    • 別のウェブページに転送しよう - location
    • タイマーで時計をリアルタイムに更新しよう - setInterval
    • JavaScriptを外部ファイル化しよう
    • モジュールを作って外部ファイルを扱いやすくしよう
    • Ajax(非同期)通信で、JSONデータを受信しよう
    • Cookieにメールアドレスを保存して、次回自動記入しよう①
    • Cookieにメールアドレスを保存して、次回自動記入しよう②
    • ローカルストレージに値を保存しよう
  3. TypeScriptでトランスコンパイルしよう
    • macOSをご利用の方へ
    • トランスコンパイルとは。TypeScript Compiler(tsc)をインストールしよう
    • tscでコンパイルしてみよう
    • watchで自動でコンパイルされるようにしよう
    • TypeScriptの「型」を知ろう
    • 関数の「型」を知ろう
    • その場で型を決める「ジェネリック」
    • 複数の型を定義できる「ユニオンタイプ」
    • 型を指定しなくても自動で決まる「型推論」
    • 入れられる値を決められる「リスト」
    • TypeScriptのクラス定義
    • TypeScriptの getterと setter
    • 読み込み専用プロパティ - readonly
  4. Vue.jsでウェブの画面を簡単に制御しよう
    • Vue.jsのバージョンについて
    • Vue.jsとは
    • Vue.jsでプログラムを作成しよう
    • HTML属性に Vue.jsで値を挿入しよう - v-bind
    • フェードインで表示しよう - transition
    • フォームと値を接続しよう - v-model
    • 条件によって、表示・非表示を切り替えよう - v-if
    • v-forディレクティブで繰り返し構文を作ろう
    • v-forディレクティブで、配列を制御しよう
    • v-onディレクティブでイベントを作ろう
    • Vue.jsのコンポーネントで再利用可能なパーツを作ろう
    • 時間が変化する、時計コンポーネントを作ろう
    • スロットで後からコンポーネントを書き換えよう
    • ミックスインで再利用できるプログラムを作ろう
    • 実践:計算機プログラムを作ろう①
    • 実践:計算機プログラムを作ろう②
  5. Vue CLIで、SPA(Single Page Application)を開発しよう
    • メモアプリを作ろう
    • Vue CLIをインストールしよう
    • プロジェクトを作成しよう
    • Vue CLI UIを使って、ブラウザーで操作しよう
    • Vue CLIプロジェクトのファイル構成を知ろう
    • Vue Routerプラグインを入れてルーティング処理ができるようにしよう
    • メモの新規作成画面を作成しよう①
    • メモの新規作成画面を作成しよう②
    • Vuexを使ってデータを保存しよう①
    • Vuexを使ってデータを保存しよう②
    • リスト画面を作ろう
    • 編集画面を作ろう
    • リスト画面から編集画面にリンクを張ろう
    • 編集内容をストアに保存しよう
    • 保存ボタンを押さなくてもデータが変わってしまうバグを修正しよう
    • 共通パーツをコンポーネント化しよう
    • データをローカルストレージに保存できるようにしよう
    • アプリケーションをビルドしよう
 
Preview Video
   

Firebase + React Hooks(TypeScript)によるWebアプリ開発

Firebase + React Hooks(TypeScript)によるWebアプリ開発
発売日 2020/10/18
(4.2)

4.5 total hours
Twitter の クローンアプリを作成しながらReactとFirebase連携、Redux ToolKit、TypeScriptについて学びます。

本コースは、無料コース"最速で学ぶFirebase + React Hooks (TypeScript)"の続編になります。無料コースでは扱いきれなかったテクニックをTwitter クローンを作成しながら学んでいきます。TypeScript、React Hooks、Redux ToolKit、Firebaseを使ってWebアプリをハンズオンで作成していきます。


[本コースで扱っていくトピック]


-Email + Password 認証

-Password リセット機能 (リセット用Email配信)

-ユーザープロフィール登録

-Google認証

-ログイン情報のRedux ToolKitによるグローバル状態管理

-Cloud firestoreによるデータベース(投稿データとコメントデータ)

-Cloud storageによる画像保存 (Tweet画像とAvatar画像)

-Hostingによるディプロイ


[注意点]

-本コースは、mac OSで進んでいきます。

-Firebaseのアカウントを各自作っておいてください。Googleアカウントが必要になります。


↓全て表示↑少なく表示
 
Users Voice
括弧が見づらいのでbrackets、Curley braces、Square bracketsのように発生してくれると嬉しいです。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • 必要なツールのインストール
    • 本コースの Source code
    • サンプル画像データ
  2. [復習] React Hooks/TypeScript/Redux ToolKit
    • useState + useEffect (TypeScript)
    • useEffect cleanup関数 (TypeScript)
    • [注意]最新VersionのReduxToolKitのカウンターデモ
    • Redux ToolKit
  3. [認証機能] Twitter App
    • create-react-app オプションと firebase version指定
    • React プロジェクト作成
    • [補足] 次のレクチャー10 動画 注意点
    • FirebaseプロジェクトとReactの連携設定
    • Appコンポーネント
    • [注意] Sign in 画面のテンプレート
    • Googleアカウント認証
    • [訂正] try catch block
    • Email + Password 認証
    • ユーザープロフィール機能
    • ユーザープロフィールフォーム
    • パスワードリセット機能
  4. [Tweet機能] Twitter App
    • ログインユーザーAvatar (Redux)
    • Tweet投稿機能
    • Tweet投稿フォーム
    • Feed機能
    • 投稿一覧機能
    • 新規コメント機能
    • コメント一覧機能
    • Deploy
  5. 更に学びたい人向け
    • Firebase ver 9.0〜対応
    • ボーナスレクチャー
 
Preview Video
   

【2時間半で学べる!】はじめてのAngular超入門!実践で学ぶ本格Webアプリ開発【TypeScript】

【2時間半で学べる!】はじめてのAngular超入門!実践で学ぶ本格Webアプリ開発【TypeScript】
発売日 2019/04/20
(4.4)

2.5 total hours
もう挫折しない!プログラミング初心者でも大丈夫!業界最先端のWebアプリ開発を基礎からしっかりマスターしよう!

Angular初心者の為の待望の入門コース!

続編【Angular11とNode.jsで始める!】JavaScript系 WEBアプリケーション開発コンプリートガイド①,②

に行く前に、最初の一歩としてAngularによるフロントエンド開発の基礎を学べます


SPA(シングル・ページ・アプリケーション)などを筆頭に特に欧米で人気を誇るJavaScript系プログラミング言語でのWebサービス開発。

日本ではReactが有名ですが、Vue.jsやAngularも非常に優秀なJavaScript系フレームワークです。


プログラミング初心者が挫折しやすい過程を極力削ぎ落とし、かつ実業務でも必要となる大切なAngularの大切な基礎を学べます。

Angularの基礎を学び、フロントエンドエンジニアとして大切な第一歩をスタートしましょう。


このコースでは業界最先端のクラウド開発環境であるStackBlitzを使う事で、GitやGitHub、デプロイといった難しい知識を習得する前に、プログラミング学習のスタートを切ることができます。


こちらのコースは皆さんのご意見を元にパワーアップしていきますので、増やして欲しいレクチャーございましたら気軽にご意見をDMやコメントなどでお知らせください。


このコースでWebアプリケーションフロントエンド開発の基本を学習した後

続編コースでGitやGitHub、Node.js、Herokuを用いた本格的なWebアプリケーション開発の手法やデプロイを学んでいける大切な知識やノウハウを解説しているコースがございますのでそちらでも一緒に学んでいきましょう。


(ごく稀に悪気なくマウンティングされる方がいらっしゃいます。良い授業をお届けする為に、批判ではなく前向きなご意見をお願いします。前向きなご意見・ご要望により講師のモチベが上がり、授業の改善・アップデートをお届けしやすくなります。)

(無料プレビューを設けてますので講師との相性やレベル感に問題ないか事前確認いただけます)


↓全て表示↑少なく表示
 
Users Voice
10年以上のブランクを経てプログラミングの仕事に復帰することになり、こちらの講座を受講しました。コードを書きながら・動作を確認しながら進むので終えるまでに1日掛かりました。内容については、満足しています!次の講座も受講予定です。ありがとうございました。 (参考:Udemy)

↓全て表示 ↑少なく表示
元々上級コースを購入していたが、途中で一部の内容がこちらのコースに移動させられており、復習のためにこちらも買う羽目になった。損した気持ちにはなる。ただ説明はコースにかかわらず丁寧。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • Angularとは?
    • UdemyのQ&A機能の使い方
    • Udemy再生画質の設定方法
  2. [Angular入門]まずは基礎から学ぼう
    • Angular公式ドキュメントのご紹介
    • StackBlitzとは?
    • 外部にWebアプリを公開する方法など
    • StackBlitzでプロジェクト名を変更する方法
    • HTMLタグとは?
    • CSS(スタイルシート)とは?
    • TypeScriptとAngularのファイル構成について
    • Module(モジュール)とは?
    • {{ }}(ダブルカーリーブレイシス)とは?
    • letとconstの使い方
    • TypeScript上で関数を定義しよう
    • コンストラクタとは?
    • 関数のreturnとは?
    • ボタンに連動して関数を走らせるには?
    • SPA(シングル・ページ・アプリケーション)とは?
    • hrefとrouterLinkについて
  3. Angularで動的ページを開発しよう
    • セクションイントロ
    • Array(配列)とは?
    • *ngForとは?
    • JSONオブジェクトとは?
    • インポートしたJSONオブジェクトを使うには?
    • プロパティバインディングとイベントバインディングとは?
    • プロパティバインディングを使ってみよう
    • *ngIfとは?
    • (演習)イベントバインディングを使ってみよう
    • (補足説明)タグの順番について
    • (コラム)エラーについて
    • Type(型)とは?
    • Model(モデル)とは?
    • 補足説明
  4. Angularでコンポーネントを開発しよう
    • イントロ
    • 新規コンポーネントの作成方法①
    • 新規コンポーネントの作成方法②
    • 新規作成したコンポーネントの配置方法と構造化するメリットについて
    • (応用編)作ったComponentにプロパティデータを渡す方法
    • (応用編)作ったComponentからEventを受け取る方法
    • (応用編)子コンポーネントを作るメリットについて
  5. 最後に
    • 最後に
    • 次のコース案内
    

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
インストールコマンドが実行できずに手間取った (参考: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.6)

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
2021年8月25日より,、デフォルトでfirebase v9系のライブラリがインストールされるようになりました。なので、npm installの段階でfirebaseの8系をインストールすることをお勧めします。内容は非常によかったです。何か作ってみようと思えました! (参考:Udemy)

↓全て表示 ↑少なく表示
historyの使い方とかuseCallback, memoのあたりとか、propsでanyを使ったりとか、いまいちな書き方が多かった。 無料なのであえて省略してるのかもしれないけど、コードのクオリティはあまり高くないと感じた。 (参考:Udemy)

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

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

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

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



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

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

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

※Typescriptチートシート配布



↓全て表示↑少なく表示
 
Users Voice
javascriptの知識があると最短で、要所を学べると思います。後はinterface やabstract、typeそれぞれの違いや比較など(結局自分で調べるので)わかりやすく教えていただけると、良かったかな?と思いました。 (参考:Udemy)

↓全て表示 ↑少なく表示
typescriptの解説はとても良く分かりやすかったです。ただquokkaをvscodeで動かすまでが少々手こずったのでもう少し環境構築の説明を詳しくして欲しかったです。 (参考: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をコピーしました