レバテックフリーランスのサイトに当サイトが紹介されました!

【動画で学習】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
【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript...
発売日 2022/03/29
受講者 20,379人
通常 10,000円
現在 1,500円
(4.6)
総評価数 2556件
2
【世界で7万人が受講】Understanding TypeScript 日本語版
発売日 2020/01/14
受講者 9,967人
通常 27,800円
現在 3,600円
(4.5)
総評価数 1419件
3
超TypeScript入門 完全パック
発売日 2020/01/29
受講者 11,880人
通常 27,800円
現在 27,800円
(4.1)
総評価数 1885件
4
[2022年決定版] Vue3 x Typescriptによるアプリケーションづくり
発売日 2022/01/30
受講者 1,930人
通常 3,600円
現在 2,000円
(4.1)
総評価数 366件
5
【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座...
発売日 2022/11/20
受講者 2,028人
通常 27,800円
現在 1,500円
(4.6)
総評価数 232件
6
最速で学ぶTypeScript
発売日 2020/06/29
受講者 8,033人
無料講座
(4.3)
総評価数 1083件
7
(4.6)
総評価数 174件
8
(4.4)
総評価数 599件
9
最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
受講者 6,740人
無料講座
(4.4)
総評価数 390件
10
NestJS入門 TypeScriptではじめるサーバーサイド開発
発売日 2020/12/26
受講者 2,220人
通常 3,000円
現在 1,500円
(4.2)
総評価数 341件
11
(4.6)
総評価数 61件
12
(4.4)
総評価数 22件
13
はじめてのTypeScriptプログラミング入門
発売日 2022/08/19
受講者 608人
通常 2,400円
現在 2,400円
(4)
総評価数 55件
14
TypeScriptではじめるWebアプリケーションテスト入門
発売日 2023/04/01
受講者 277人
通常 10,000円
現在 10,000円
(4.5)
総評価数 16件
15
ちゃんと学ぶ、TypeScript
発売日 2024/02/29
受講者 181人
通常 2,600円
現在 1,500円
(4.5)
総評価数 15件
16
JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門 2023年最新版...
発売日 2019/09/29
受講者 6,701人
通常 27,800円
現在 27,800円
(4.5)
総評価数 975件
17
【脱オブジェクト指向初心者!】TypeScriptで学ぶSOLID原則・デザインパターン...
発売日 2022/08/07
受講者 1,199人
通常 10,000円
現在 10,000円
(4.3)
総評価数 87件
18
ざっくり学ぶ、モダンフロントエンド(ES6, TypeScript, Vue.js)...
発売日 2020/04/02
受講者 4,832人
通常 27,800円
現在 1,800円
(4.2)
総評価数 829件
19
(3.2)
総評価数 22件
20
ゼロから学ぶWebアプリケーション Vue3 x Typescript
発売日 2022/02/11
受講者 15,509人
無料講座
(3.9)
総評価数 246件
21
【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで...
発売日 2022/06/24
受講者 317人
通常 7,600円
現在 1,500円
(4.6)
総評価数 43件
22
[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA
発売日 2020/09/09
受講者 1,236人
通常 21,800円
現在 1,800円
(4.3)
総評価数 113件
23
(3.4)
総評価数 133件
24
Firebase + React Hooks(TypeScript)によるWebアプリ開発
発売日 2020/10/18
受講者 3,624人
通常 21,800円
現在 1,800円
(4.3)
総評価数 457件
25
【Nuxt3】3日でできるNuxt.js WEBアプリ開発入門(Vue.js・Vuetify・TypeScript)...
発売日 2023/05/19
受講者 42人
通常 7,600円
現在 1,500円
(3.2)
総評価数 8件
26
チャート式問題集の用に学ぶ React・Next.js・TypeScript・Tailwind CSS...
発売日 2024/03/17
受講者 7人
通常 6,200円
現在 1,500円
(5)
総評価数 1件
 

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

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

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

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

【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript

【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript
発売日 2022/03/29
(4.6)

27 total hours
HTML、CSS、JavaScriptの基礎を終えた方に最適!React入門の決定版!Reactについて知っておくべき基礎知識について体系的、かつ網羅的に学習して、最短でReactをマスターしよう!

「Reactってよく聞くけど、なんだか難しそう。。」

「HTML、CSS、JSは触ったことあるけど、Reactには壁を感じる。。」

「興味はあるけど自分には早いんじゃないか。。」


本コースはReactに興味があるけど、できるか自信がないフロントエンド入門者の方に向けて作成しました。


まず、皆さんにお伝えしたいのはReactは決して扱うのが難しいライブラリではないということです。

ただ、使いこなせるようになるためにはいくつか知っておくべきことがあります。


本コースではReactを使うにあたって知っておいてほしい基礎の部分を体系的、かつ網羅的に説明しています。



■ 知っておくべきこと1 | JavaScriptの挙動

JavaScriptの挙動自体が曖昧(あいまい)な場合、Reactを使いこなすことは難しいでしょう。

ReactはJavaScriptのライブラリですので、当然JavaScriptで記述することになります。


そのため、Reactに感じる複雑性の多くはJavaScript言語自体の独特の記法からくるものです。

また、Reactのコードを記述する際は分割代入やスプレッド演算子、配列の高階関数、await/asyncなどの比較的最新の記法を多用します。


そのため、十分なJavaScriptへの理解がない状態でReactを使うと、Reactが分かっていないのか、JavaScriptが分かっていないのかが切り分けられず、問題の解決が困難になります。


これがReactが難しいと思われる大きな原因の一つであると私は感じています。


本コースではReactの書き方だけではなくJavaScriptの記述で複雑に感じるであろう部分についても適宜説明しています。

これによって、JavaScriptへの十分な理解がなくてもコースを受講していただけるようにしています



■ 知っておくべきこと2 | Reactが持つ独特の記述ポリシー

また、Reactを使いこなすためにはReactのポリシー(書き方)についても知る必要があります。

プログラミング入門者はプログラミング経験自体が浅いため、新しい言語やライブラリに出会った際に過去の経験に当てはめて最適な記述方法を考察することができません。


そのようなことを教えてくれる先輩がいればラッキーですが、多くの人はそのような恵まれた環境ではないと思います。そのため、「これで合ってるのかな?」と何となくモヤモヤした気持ちで学習をしていることと思います。


繰り返しになりますが、Reactのコードを記述する際は独特のポリシーが存在します。

そのため、そのポリシーを学べば、どのようにしてReactを記述すればよいかが自(おの)ずとわかってきます


一つ例を見てみましょう。


例えば、本コースでは関数型プログラミングというプログラミング手法からみたReactについて触れています。関数型プログラミングというのはクラスを使わず、関数によってプログラムの保守性、拡張性、再利用性、テスト性を高めようというプログラミング言語の書き方です。


React 16.8のReact Hooksの導入からReactのポリシーはクラスを用いたオブジェクト指向型プログラミングから関数型プログラミングに完全に移行しました。そのため、関数型プログラミングがどういったプログラミング手法なのかを知ることはReactを知る上で大変重要な事になってきます。


本コースではそういったReactの背景にある思想なども交えながら、体系的にReactというライブラリについて学んでいきます。



■ 知っておくべきこと3 | Reactを取り巻く周辺知識

上で挙げた2つを学べばReact単体については使いこなせるようになるでしょう。しかし、Reactを実際のアプリで使用しようとするとReactだけを学べばよいということではないことがわかってきます。


実際にはどのようにしてサーバーとの通信をすればよいのか、どのようにReact上でデータを管理すればよいのか、どのようにしてページ管理をしていけばいいのかといった問題にぶち当たることになります。


そういった問題を解決するために本コースではReactのみに留(とど)まらず様々なRest API、Redux、Next.jsなどの周辺知識についても学んでいくことになります。ここで、それらについて全て挙げることはできませんので、興味のある方はレクチャー一覧を一度見てみてください。



■ なぜ本コースなのか?

既存の動画教材では、一本でReactとその周辺知識について体系的に、かつ網羅的に学べる教材がないように感じています。


ただ、初心者の頃は自分自身で断片的な知識をつなぎ合わせることは困難です。(そもそも、どの情報を学ぶべきで、どの情報は必要ないのかを取捨選択することも困難でしょう。)そのため、体系的、かつ網羅的に学べる教材は初心者の方にとってきっと大きな力になってくれると思います。


本コースではReactにおける確固たる基礎とその周辺の学ぶ必要のある知識にフォーカスし、Reactを最短で習得することを目的としています。


最短でReactについての基礎を固めたい方は是非本コースを試してみてください。



■ 最後に

私は「なぜこのように書くのか?」「なぜそのような挙動になるのか?」を知ることがプログラミングの上達には極めて重要だと感じています。プログラミング言語やライブラリは日々進化し続けます。そのため、暗記した知識は時代とともに使い物にならなくなってしまいます。


また、プログラムの書き方はグーグルで検索すればいくらでも確認する事ができますが、それを自分の状況に合わせて使うためには動作を理解する必要があります。そのため、プログラミングの上達においては「覚えること」よりも「理解すること」が大切になってきます。


これは本コースで学ぶReactにおいても変わりません。ただ書き方を暗記するのではなく、「なぜそのように書くのか?」「なぜそのような挙動となるのか?」それを知ることによって応用の効く技術を習得することができます。


本コースを終えた方が「Reactってそんな難しくないじゃん!」と思っていただければ、大変嬉しく思います。



■ 各種バージョン情報

React: 18.1.0

Redux: 4.2.0

Next.js: 14.1.3

TypeScript: 4.6.4

Node.js: 18.17.0



↓全て表示↑少なく表示
 
Users Voice
ReactからNEXT.JSまでフォローされていて、これ一つでReactの基礎が学べると思います。ロジックの説明も詳しくされていておすすめです。 (参考:Udemy)

↓全て表示 ↑少なく表示
めちゃくちゃ詳しいかつ、わかりやすく解説されていて大満足です。 今後この講座を超えるReact講座が生まれることはないでしょう。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • なぜReactなのか?
    • コース概要
  2. コースの進め方
    • Udemyでの学習の進め方
    • ★重要★資材のダウンロード & 受講準備
    • ★重要★コースで使用するVSCodeの拡張機能を準備しよう
    • VSCodeのショートカットの使い方について学ぼう
    • ChatGPTで疑問を解決しよう!!
  3. 【スキップ可】Reactで頻出のJavaScriptの記法
    • セクション紹介
    • npmコマンドの使い方
    • 本セクションのコードの実行方法
    • アロー関数の記法について学ぼう
    • ESModuleのExport/Importについて学ぼう
    • コールバック関数の挙動について学ぼう
    • DOMとイベントリスナについて学ぼう
    • 配列のmap、filterメソッドについて学ぼう
    • 分割代入について学ぼう
    • スプレッド演算子と残余引数について学ぼう
    • 三項演算子について学ぼう
    • truthyな値、falsyな値について学ぼう
    • Promiseについて学ぼう
    • await/asyncの使い方について学ぼう
  4. まずはReactに触れてみよう
    • Reactを動かしてみよう
    • Reactコンポーネントって何?コンポーネントを定義してみよう
    • 【2024/04/01追記】create-react-appからviteにプロジェクトの雛形を変更
    • Reactのプロジェクトの作成方法(create-react-appの使い方)
    • ★重要★本コースで使用するプロジェクトの使い方
    • コンポーネントにスタイルを当ててみよう
    • コンポーネントの分割方法
    • 【練習】コンポーネントの分割方法
    • 不要なタグを出力しないFragmentの使い方
    • JSX内でJSコードを実行してみよう
    • 【TIPS】式と文の違い
    • 【練習】JSX内で式を使ってみよう
    • propsでコンポーネントに値を渡してみよう
    • propsに色々な値を渡してみよう
    • 【練習&解答】propsで値を渡してみよう
    • 特別なプロパティ ~ props.children
    • propsの重要なルール
    • JSXの正体
    • React要素ツリーとコンポーネントツリー
    • セクションまとめ
  5. イベントリスナと状態管理(State)
    • セクション紹介
    • イベントに合わせて関数を実行してみよう
    • 開発でよく利用するイベントタイプ
    • イベントに合わせて画面表示を更新してみよう
    • 【重要】ステートとは?
    • 【重要】ステートとレンダリングの仕組み
    • 【複数のステート】ステート使用時の注意点!
    • 【更新は即時ではない】ステート使用上の注意点!
    • 【練習】ステートの処理を自分で記述してみよう
    • オブジェクト型のステートを使う際の注意点!
    • 【重要】オブジェクトのステートは新しいオブジェクトを設定する!
    • 【練習】オブジェクトのステートを更新
    • 配列のステートを使う際の注意点!
    • ステートとコンポーネントの関係
    • ステートを複数のコンポーネントで管理しよう!
    • 【練習】ステートの受け渡し
    • セクションまとめ
  6. 制御構文とフォームの制御
    • セクション紹介
    • 配列をリスト表示
    • 【重要】リストには必ずキーを設定
    • 【練習】リストにキーを設定してみよう
    • 配列のフィルターメソッドの使い方
    • 【練習】フィルターメソッドの使い方を練習してみよう
    • 条件分岐を設ける方法まとめ
    • コンポーネントのリファクタリング
    • 【Form】inputとtextareaの作成方法
    • 【Form】ラジオボタンの作成方法
    • 【Form】チェックボックスの作成方法
    • 【Form】複数選択チェックボックスの作成方法
    • 【Form】プルダウンの作成方法
    • Todoアプリを作ってみよう
  7. スタイリング
    • セクション紹介
    • インラインスタイルの使い方!
    • インラインスタイルの注意点!
    • 外部CSSのimportを使ったスタイリング
    • CSS Modulesを使ったスタイリング
    • 【styled-components】CSS-in-JSを使ったスタイリング
    • 【styled-components】【発展】CSS-in-JSを使ったスタイリング
    • 【練習&解答】styled-components
    • 【まとめ】Reactでのスタイルの適用方法
    • 【付録】ReactでのCSSフレームワーク【Part.1】
    • 【付録】ChakraUIを使ってみよう【Part.2】
    • 【付録】ChakraUIを使ってみよう【Part.3】
  8. ReactでDOM操作を行う方法
    • セクション紹介
    • 【createPortal】モーダルの作り方
    • 【Bubbling】Portalを使う際の注意点!
    • 【練習&解答】createPortalでトーストを作成してみよう
    • 【useRef】refでDOMを直接操作してみよう
    • 【useRef】refで動画プレイヤーを作成してみよう
    • 【useRef】refとは?refとstateの違い
    • 【forwardRef】他のコンポーネントのDOMにアクセスする方法
    • 【useImperativeHandle】refへのアクセスを限定する方法
    • 【練習&解答】refの使い方
    • セクションまとめ
  9. 【スキップ可】問題への対処法
    • セクション紹介
    • エラーの解消方法
    • デバッガーを使ってみよう
    • React Developer Toolsの使い方
    • Google検索の仕方
  10. 【発展】関数型プログラミング
    • セクション紹介
    • 関数型プログラミングとは?
    • 状態と処理の分離
    • 純粋関数
    • 不変性(immutability)【Part.1】
    • 不変性(immutability)【Part.2】
    • Reactと純粋関数
    • Reactにおける状態と処理の分離
    • Reactにおける不変性
    • 【まとめ】関数型プログラミング
    • JavaScriptコードと見比べてみよう
  11. 【React Hooks】様々な状態管理の方法
    • セクション紹介
    • useReducerを使ってみよう
    • useReducerとuseStateの違い
    • useReducerとuseStateの違い(関数型プログラミング視点)
    • 【練習&解答】useReducer
    • useContextでグローバルな値を管理しよう
    • useContextでstateを管理してみよう
    • useContextのリファクタリングをしてみよう
    • useContextを使う際の注意点!
    • useContextとuseReducerを組み合わせて使ってみよう
    • 【練習&解答】useContextとuseReducer
    • 【練習】useContextとuseReducer
    • 【解答】useContextとuseReducer
    • 【解答続き】useContextとuseReducer
  12. 【React Hooks】useEffectとカスタムフック
    • セクション紹介
    • useEffectとは?タイマーを作りながら学んでみよう
    • useEffectの依存配列の使い方
    • 【練習&解答】useEffect
    • useEffectのクリーンアップ処理の使い方
    • useEffectの実行タイミングをおさらいしよう
    • useLayoutEffectって何?useEffectとの違いについて学ぼう
    • useEffectの実行順を意識して実装してみよう
    • 独自のフックを作成してみよう
    • 【練習&解答】Custom Hook
    • 【発展】関数型プログラミングから見たuseEffectの使用ケース
  13. 【発展】ReduxとRedux Toolkit
    • セクション紹介
    • Reduxとグローバルな状態管理
    • ★本セクションのサンプルコードの実行方法
    • Reduxを使ってみよう
    • Reduxの状態管理方法について学ぼう
    • 複数のReducerを使う方法
    • Action CreatorでActionを定義してみよう
    • Redux ToolkitでReduxを書き換えてみよう
    • Redux Toolkitにおけるミュータブルな値の変更
    • Immerを使ったミュータブルな値の変更
    • Redux Thunkとは?Redux Middlewareとの関係
    • Redux Thunkで非同期処理を記述してみよう
    • 非同期処理のステータスを画面に表示してみよう
    • Redux Middlewareを作成してみよう
    • セクションまとめ
  14. 【スキップ可】クラスコンポーネント
    • セクション紹介
    • クラスコンポーネントとは?
    • クラスコンポーネントを定義してみよう
    • クラスコンポーネントでの状態管理
    • ライフサイクルメソッドとは?
    • Error Boundaryの実装方法
  15. 【発展】パフォーマンスの最適化
    • セクション紹介
    • 【レンダリング】画面が更新されるまで
    • Stateの比較処理(Object.is)
    • 【TIPS】StrictModeとは?
    • 子コンポーネントの不要なレンダリング
    • React.memoを使った不要なレンダリングの防止
    • useCallbackを使った関数のメモ化
    • useCallbackの依存配列の使い方
    • useMemoを使った値のメモ化
    • セクションまとめ
    • 【React18】useTransitionでUIのパフォーマンス改善
    • 【React18】useDeferredValueでUIのパフォーマンス改善
  16. Rest APIを使ったサーバーとの通信
    • セクション紹介
    • REST APIとは?
    • JSONとは?
    • JSON ServerでモックアップAPIを作成
    • Axiosを使ってサーバーからデータを取得しよう
    • 取得したデータを画面に反映してみよう
    • GUIでリクエストの状態を確認しよう
    • 更新リクエストをサーバーに送信してみよう
    • リクエストと画面処理を統合しよう
    • 【発展】ダイナミックインポートとは?
    • 【発展】コンポーネントのダイナミックインポート
  17. Next.js 14(App Router)を使ったアプリの構築方法
    • Next.jsについて学ぼう
    • Next12(Page Router)を学びたい方へ
    • Next.jsとは?Next.jsの概要を学ぼう
 
Preview Video
   

【世界で7万人が受講】Understanding TypeScript 日本語版

【世界で7万人が受講】Understanding TypeScript 日本語版
発売日 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が利用されているプロジェクトとユースケース



↓全て表示↑少なく表示
 
Users Voice
nodeやwebpack、のversionが新しくなっていくため、添付資料のままVScodeで作業はできない。それでも内容はわかりやすく、初学者でもTypeScriptに関しては学習できる。 (参考:Udemy)

↓全て表示 ↑少なく表示
元々が英語版であったため、ソースコードを見て判断する状態だったのを翻訳していただいてたので助かりました。 簡易的なコードも提供されており、スペックがそれほどないPCでもコード修正を学べる。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  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)
    • コード品質に寄与するオプション
    • 【補足】Chrome for Debugger (非推奨) の代わりに JavaScript Debugger を使用する手順
    • 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 関数の作成」に関して
    • 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 version 5 での設定について(開発用)
    • セットアップの完了 & webpack-dev-server の追加
    • 【注意】Webpack version 5 での設定について(本番用)
    • 本番用のワークフロー設定
    • まとめ
    • 役に立つ資料 & リンク
  12. サードパーティライブラリ & TypeScript
    • イントロダクション
    • JavaScriptライブラリの利用
    • 最後の手段としての "declare" の利用
    • 次のレクチャ「class-transformer の例」についての補足
    • class-transformerの例
    • class-validatorの例
    • まとめ
    • 役に立つ資料 & リンク
  13. 住所検索アプリの作成(Google Maps)
    • イントロダクション
    • プロジェクトの設定
    • ユーザ入力の取得
    • Google API キーの設定
    • Axios & 住所の座標取得
    • Google Map による地図の表示
    • クレジットカード無しで地図を表示したい場合
    • 役に立つ資料 & リンク
  14. React & TypeScript
     
    Preview Video
       

    超TypeScript入門 完全パック

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

    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
    The teacher teaches so many details about Typescript, which enables people who try to study it for the first time. I learned a large number of things. It is not only that the teacher always update his tutorial videos, but he also answers any questions nicely. I really appreciate his tutorials. (参考:Udemy)

    ↓全て表示 ↑少なく表示
    情報量が多い上に、どこまでが入門でどこからが応用なのかが曖昧なので、初心者にはおすすめできません。 他の言語で、ある程度プログラミング経験がないと厳しいと思います。 個人的な感覚としては、内容の半分は入門レベルではまず使わない応用的な内容だと感じました。入門というよりは、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. このコースのまとめ
      • このコースのまとめ
       

    [2022年決定版] Vue3 x Typescriptによるアプリケーションづくり

    [2022年決定版] Vue3 x Typescriptによるアプリケーションづくり
    発売日 2022/01/30
    (4.1)

    6 total hours
    Vueの最新メジャーバージョンであるVue3を、ViteやTypescriptを使ったモダンな環境で学習していきます

    Vueの最新メジャーバージョンであるVue3を、ViteやTypescriptを使ったモダンな環境で学習していきます

    コンポーネントとは何かの説明から始まって、最終的には認証やアニメーションなどを活用した実践的なアプリケーション作成を学びます


    ↓全て表示↑少なく表示
     
    Users Voice
    vue.jsの最新テクノロジー(vue3 + typescript + composition API)をベースとして各コンテンツを簡潔にまとめてくれているので後から復習するときも参照しやすい内容となっています。 (参考:Udemy)

    ↓全て表示 ↑少なく表示
    コードを書いた後にすぐ画面を切り替えるため何を書いたか伝わってこないことがほとんどでした (参考:Udemy)

    ↓全て表示 ↑少なく表示
     
    レクチャー内容
    1. 紹介
      • 紹介
      • このコースの全体像
      • 開発環境の整備
    2. [Optional] Javascriptを復習する
      • Javascriptとは何か
      • Javascriptはどのように実行されるか
      • 動的な型付けとは
      • 様々な実行環境
      • 変数・型・関数
      • Javascriptのコード構造
      • letとconst
      • Operator
      • 実際に変数と演算子を使う
      • 型 stringとnumber
      • 関数
      • 処理の順番
      • 関数の登録
      • 型の変換
      • javascriptの基礎的な型
      • Arrayを活用する
      • Objectを活用する
      • 型の特定
      • スプレッド構文とレスト構文
      • 高階関数
      • Typescriptと型
    3. Vueの導入
      • 環境構築
      • viteで作られたアプリケーション
      • template, script, style
      • templateについて
      • scriptについて
      • styleについて
    4. ComponentとCompositionAPI
      • コンポーネント指向について
      • 初めてのコンポーネント
      • v-bind データを埋め込む
      • v-on 処理を埋め込む
      • ネイティブイベントを扱う
      • 動的なアプリケーションへの入り口
      • RefとReactive
      • v-model 双方向バインド
      • Computed Property
      • watch
      • CompositionAPI と OptionAPI
      • script setup
      • ライフサイクルの扱い方
    5. 動的なリスト
      • イントロダクション
      • 静的なリスト
      • 動的なリスト 要素の追加
      • 動的なリスト 要素の削除
      • v-if 条件付きレンダリング
      • まとめ
    6. コンポーネント同士のコミュニケーション
      • イントロダクション
      • Props 親から子へ
      • Emits 子から親へ
      • (optional) コールバック関数とEmit
    7. 初めてのアプリケーション実践
      • イントロダクション
      • 全体の構成を作る
      • 動的なスタイリング
      • 確認アラートを出す
      • まとめ
    8. より深くコンポーネントを理解する
      • イントロダクション
      • Slots
      • 動的なコンポーネント
    9. 大規模アプリでのコンポーネント同士のコミュニケーション
      • イントロダクション
      • Provide / Inject
      • InjectionKey
    10. より深くディレクティブを理解する
      • カスタムディレクティブ
      • modifiers (修飾子)
      • v-modelとdropdown, checkbox, radiobutton
      • v-modelとカスタムコンポーネント
    11. HTTPリクエストを扱う
      • イントロダクション
      • バックエンドのセットアップ
      • POSTリクエスト データを作成する
      • GETリクエスト データを取得する
      • Loadingを扱う
      • エラーを扱う
       

    【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座

    【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座
    発売日 2022/11/20
    (4.6)

    4.5 total hours
    人気アプリ「Discord」を1からReactで開発する講座。使用する技術はReact/Redux/Typescript/Firebase。近年はTypescriptの実装が増えてきており実務に近い形式で学びたい方は知っておいて損はない講座

    React/Redux/Typescript等の基礎を学び終え、Discordクローンをハンズオン開発することでWebアプリケーション開発の大まかな流れを把握して基礎力~応用力を高める講座です。


    ■ 本コースの対象者

    ・React等の基礎技術を学んだだけでは物足りない方

    ・React/Reduxは一通り学んだからもっとアプリケーションを作ってみたい方

    ・Typescriptを用いて実務に近いWebアプリ開発をしてみたい方

    ・Firebaseバージョン9.0での実装を学んでおきたい方

    ・Reactのフックスやカスタムフックス実装を体験してみたい方

    ・Firebaseでデプロイして他のユーザーにアプリを触ってもらい方

    ・Discordクローンを作ってポートフォリオにしたい方

    ・ただただWebアプリ開発好きで好奇心がある方

    ・etc...


    ReactとTypescriptを使ったWebアプリ開発をして実務に近い経験を積んでおきたい・・・

    Typescriptの理解は手を動かして理解することが1番の近道です。


    ReactやTypescriptの基礎は分かるけど「実用的なアプリ開発がしたい」「もっとステップアップしたい」という方におすすめの講座内容となっています。


    今回はReact/Redux/Firebase/Typescriptのモダン技術スタックを使用してDiscordクローンを開発します。

    特にTypescriptは近年流行りの技術でどの企業でも採用されている型指定JSなので、この講座で基礎をしっかり理解することができます。理解すると案外簡単なことが分かることでしょう。


    ■ 本コースを受講する際の注意点

    ・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

    ・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。

    ・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。


    ↓全て表示↑少なく表示
     
    Users Voice
    ReactとReduxについて深く理解を深めることができたので良かったです。 (参考:Udemy)

    ↓全て表示 ↑少なく表示
    とても丁寧な解説でわかりやすいです!最高です! (参考:Udemy)

    ↓全て表示 ↑少なく表示
     
    レクチャー内容
    1. はじめに
      • 本講座で学べること
      • 本講座の完成品のデモ
    2. 【Discordクローン】開発環境構築からはじめよう
      • VSCodeをインストールしよう
      • Node.jsをインストールしよう
      • 【補足】React開発効率が上がるオススメVSCodeプラグイン紹介
      • 【補足】開発効率が2倍になるVSCodeショートカットキー
      • 【追加】本レクチャーのソースコード
    3. 【Discordクローン】フロントエンド開発編(サイドバー&チャット欄実装編)
      • ReactとTypescriptでDiscordクローン開発用プロジェクトを作成しよう
      • CSSのスタイリングはSassで記述してみよう
      • サイドバーコンポーネントを作成してみよう
      • サイドバーの中身のHTMLとCSSの記述をはじめよう
      • 【補足】ブラウザ上の色を取得できるグーグル拡張機能の紹介
      • MaterialUIをインストールしてアイコンを利用してみよう
      • Discordチャンネルのヘッダーを記述してみよう
      • Discordチャンネルリストを作成してみよう
      • サイドバーのフッターアカウントを作成してみよう
      • サイドバーフッターをCSSでスタイリングしてみよう
      • Googlefontで全体の文字フォントを変更してみよう
      • Discordチャットコンポーネントを作成してみよう
      • チャットヘッダーを作成してみよう
      • チャットヘッダーをCSSでスタイリングしてみよう
      • Discordチャット送信のHTMLとCSSを実装してみよう
      • チャットメッセージコンポーネントを作成してみよう
      • 【補足】HTMLとCSSを記述するときの考え方について
      • 【補足】Discordアイコンを追加しよう
    4. 【Discordクローン】バックエンド開発編(Firebase&Redux実装編)
      • Firebaseの準備をはじめよう
      • Firebaseの初期設定をはじめよう
      • ReduxをTypescriptで用意してみよう
      • StoreとuserSliceを準備してみよう
      • ユーザーの初期状態をTypescriptで準備してみよう
      • Providerを使ってアプリ全体でstoreが使える状態にしよう
      • ログイン用ページを作成してみよう
      • 型付きのuseSelectorとuseDispatchを準備しよう
      • Firebaseを使ってGoogleログイン機能を実装してみよう
      • ログインしたユーザー情報をStoreに通知して状態更新しよう
      • ログアウト機能とログインしたユーザー情報をUIに反映させよう
      • 【補足】Redux DevToolsプラグインでstate状態を視覚的に確認してみよう
    5. 【Discordクローン】バックエンド開発編(FireStore & チャンネル & チャット追加編)
      • CloudFirestoreにチャンネルデータを設定してみよう
      • onSnapshotでチャンネルデータをリアルタイムで取得してみよう
      • react-error-boundaryライブラリでエラーの詳細を出力してみよう
      • エラーを修正してチャンネルデータを取得してみよう
      • チャンネルデータをDiscordに出力してみよう : その1
      • チャンネルデータをDiscordに出力してみよう:その2
      • コレクションを取り出すカスタムフックスを作ってみよう
      • Discordチャンネルを追加する実装をしてみよう
      • チャンネル情報をReduxで管理してみよう
      • 設定したReducerに名前をつけてエラーを回避してみよう
      • チャット送信するために入力文字列を取得してみよう
      • サブコレクションにメッセージ情報を追加してみよう
      • onSnapshotでリアルタイムでメッセージ情報を取得してみよう
      • ディスコードチャット欄にメッセージを表示してみよう
      • メッセージを投稿した順番にソートして表示してみよう
      • 投稿しすぎるとレイアウトがずれるバグを修正してみよう
      • 【補足】サブコレクションデータ取得をカスタムフックスで切り出してみよう
    6. 【Discordクローン】完成したアプリのデプロイ編
      • 完成したDiscordをFirebaseでデプロイしてみよう
    7. ボーナスレクチャー
      • 最後まで受講いただいた方へ
      • ボーナスレクチャー
     
    Preview Video
       

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

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

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

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

    最速で学ぶTypeScript

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

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

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


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




    ↓全て表示↑少なく表示
     
    Users Voice
    一つ一つ丁寧 (参考:Udemy)

    ↓全て表示 ↑少なく表示
     
    レクチャー内容
    1. TypeScriptの必要性
      • TypeScriptの必要性
      • 2023年版 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
    現在はReact18であるため環境構築の順番が大切でした。React18 + TypeScript + Firebase8 + ReactRouter5 + MateialUI4の順番で環境構築して成功。教材動画の環境を再現することができました。$ npx create-react-app . --template typescript $ npm i firebase@8.10.0 $ npm i react-router-dom@5.3.0 @types/react-router-dom@5.3.1 $ npm i @material-ui/core --legacy-peer-deps $ npm i @material-ui/icons --legacy-peer-deps (参考:Udemy)

    ↓全て表示 ↑少なく表示
    サクッとデプロイまで学べる無料コンテンツとして質が高いコースだと思います。 1点、コードを記載する際に、動画上では講師が元々用意しているコードをコピペしていくため、受講者はコードを打つセクションのたびに一時停止して講師がコピペしたコードを打つ必要がある場面が多々あるため、その点のみ考慮して星4とさせていただきました。 しかし、上記を考慮しても質の高いコースには間違いありません。 (参考:Udemy)

    ↓全て表示 ↑少なく表示
     
    レクチャー内容
    1. はじめに
      • はじめに
      • TypeScript無料コース
      • コースに必要なツールのインストール
      • 本コースのSource code
      • 2022年版 React学習ロードマップ
    2. ToDo アプリのハンズオン (Firebase + React Hooks/TypeScript)
      • firebase version
      • [注意] react-router-dom ver6.0以降 + "--legacy-peer-deps"オプション
      • 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
       

    ゼロから学ぶWebアプリケーション Vue3 x Typescript

    ゼロから学ぶWebアプリケーション Vue3 x Typescript
    発売日 2022/02/11
    (3.9)

    1 total hour
    Javascriptのフレームワーク、Vueを最初から丁寧に学んでいきます

    環境構築から始めて、Vue3の最新の環境を導入するところまでを学習します

    2022年最新の環境である、Vue3, Vite, Typescriptという構成でのフロントエンド環境構築について理解できます

    また、一定のウェブアプリケーションを作るためのJavascriptに関する学習もしていきます


    ↓全て表示↑少なく表示
     
    Users Voice
    Vue3のApp.vueやindex.htmlがどのように連携されているか解説いただいててとても分かりやすく、受講して良かったです!ありがとうございました! (参考:Udemy)

    ↓全て表示 ↑少なく表示
    一つ一つ丁寧に解説がはいっていたのでとても分かりやすかったです。 ターミナル入力画面を少し拡大していただけると見やすいと思いました。 (参考:Udemy)

    ↓全て表示 ↑少なく表示
     
    レクチャー内容
    1. 紹介
      • 紹介
      • 開発環境の整備
    2. JavascriptとTypescript
      • 変数
      • 関数
      • オブジェクト
      • letとconst
      • スプレッド構文とレスト構文
      • 高階関数
      • Typescriptと型
    3. Vueの環境を導入する
      • 環境構築
      • viteで作られたアプリケーション
      • template, script, style
      • templateについて
      • scriptについて
      • styleについて
       

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

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

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



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

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

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

    ※Typescriptチートシート配布



    ↓全て表示↑少なく表示
     
    Users Voice
    Typescriptのコースは初めて受けましたが丁寧で分かりやすくかったです。ありがとうございました。 (参考:Udemy)

    ↓全て表示 ↑少なく表示
    とてもわかりやすかったです 2周くらいするとより理解が進むと思いました ありがとうございました (参考: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をコピーしました