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

【動画で学習】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
受講者 28,602人
通常 10,000円
現在 10,000円
(4.5)
総評価数 3447件
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
(4.6)
総評価数 49件
6
(4.4)
総評価数 129件
7
最速で学ぶTypeScript
発売日 2020/06/29
受講者 8,033人
無料講座
(4.3)
総評価数 1083件
8
(4.5)
総評価数 783件
9
最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
受講者 6,740人
無料講座
(4.4)
総評価数 390件
10
(4.4)
総評価数 289件
11
【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座...
発売日 2022/11/20
受講者 3,317人
通常 27,800円
現在 1,500円
(4.7)
総評価数 378件
12
(4.6)
総評価数 61件
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
JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門 2023年最新版...
発売日 2019/09/29
受講者 6,701人
通常 27,800円
現在 27,800円
(4.5)
総評価数 975件
16
ちゃんと学ぶ、TypeScript
発売日 2024/02/29
受講者 848人
通常 3,600円
現在 1,300円
(4.1)
総評価数 108件
17
【脱オブジェクト指向初心者!】TypeScriptで学ぶSOLID原則・デザインパターン...
発売日 2022/08/07
受講者 1,199人
通常 10,000円
現在 10,000円
(4.3)
総評価数 87件
18
チャート式問題集の用に学ぶ React・TypeScript・Tailwind CSS
発売日 2024/03/17
受講者 337人
通常 6,200円
現在 6,200円
(4.2)
総評価数 30件
19
NestJS入門 TypeScriptではじめるサーバーサイド開発
発売日 2020/12/26
受講者 2,944人
通常 3,000円
現在 1,300円
(4.3)
総評価数 428件
20
ゼロから学ぶWebアプリケーション Vue3 x Typescript
発売日 2022/02/11
受講者 15,509人
無料講座
(3.9)
総評価数 246件
21
(3.2)
総評価数 22件
22
【Nuxt3】3日でできるNuxt.js WEBアプリ開発入門(Vue.js・Vuetify・TypeScript)...
発売日 2023/05/19
受講者 65人
通常 7,600円
現在 1,300円
(2.9)
総評価数 14件
23
【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで...
発売日 2022/06/24
受講者 447人
通常 7,600円
現在 1,300円
(4.6)
総評価数 49件
24
ざっくり学ぶ、モダンフロントエンド(ES6, TypeScript, Vue.js)...
発売日 2020/04/02
受講者 5,091人
通常 27,800円
現在 1,500円
(4.3)
総評価数 862件
25
[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA
発売日 2020/09/09
受講者 1,236人
通常 21,800円
現在 21,800円
(4.3)
総評価数 113件
26
Firebase + React Hooks(TypeScript)によるWebアプリ開発
発売日 2020/10/18
受講者 3,796人
通常 21,800円
現在 1,500円
(4.3)
総評価数 466件
27
(3.4)
総評価数 133件
28
(4.6)
総評価数 42件
29
生成AIを活用してVue3 x Typescriptを学ぶ
発売日 2025/01/13
受講者 17人
通常 2,600円
現在 2,600円
(4.3)
総評価数 2件
 

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

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

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

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

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

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

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
セクション15あたりまでは割と丁寧に説明されているが、動画を追いながら身に着けるのは時間がかかってしまうだろうと思った。私自身はChatGPT(4o)の力を借りて、動画を見る前にその回のコードを読み解き、その後自分でコードを書くというような予習をしていたので、快適に受講することができた。また、Next.js、Vitestなどはコード検証が比較的甘く、説明もあっさりしていたので若干の不足感はあった。Q&Aに関しては、(ほかの講座に比べると)返答率が高いが、勘違い回答や(恐らく)生成AIによる回答、思いっきり間違えているのに訂正しない回答などがまれに見られたので、修正した方がよいだろう(いずれもCodeMafia本人ではなく、彼に雇用された人による回答なのでご安心を)。とはいえ、全体的にはすばらしい講座だった。HTML, CSS, JSを一通り知っているなら、受講することで大きく前進できると思う。 (参考:Udemy)

↓全て表示 ↑少なく表示
React, TypeScript, Next.jsを実務で長く使っているエンジニアです。 細かな仕様を確認したり教えたりする時にその関数や概念だけ知りたい!という時にとても便利な教材です。 辞書のようにその単元だけ見ることで理解しやすいのでとても助かりました。 (参考: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を扱う
      • エラーを扱う
       

    【Next.js】フルスタック開発基本講座(TypeScript/Prisma/Auth)【脱初心者/わかりやすさ重視】

    【Next.js】フルスタック開発基本講座(TypeScript/Prisma/Auth)【脱初心者/わかりやすさ重視】
    発売日 2024/12/10
    (4.6)

    11.5 total hours
    Next.jsを使いフロントエンドとバックエンドを同じ言語・フレームワークで開発する方法を解説しています。実用的な様々なライブラリも組み合わせてハンズオンで進める事で、フルスタック開発に必要な知識や技術を効率よく学ぶことができます。

    この講座は、Next.jsのベースから実践的な内容まで、

    フロントエンドとバックエンドを同じ言語・同じフレームワークで開発する方法をハンズオンで解説しています。


    講座の前半・・Next.jsの主要な機能を解説

    講座の中盤・・バリデーションやDB操作のライブラリを扱ったフォームの作成方法

    講座の後半・・認証機能を盛り込んだ実践的なブログシステムを構築する方法


    講座を作ったモチベーション

    昨今様々な生成AIサービスがリリースされており、

    生成AIを活用することでかなりのスピードでコード生成できるようになっています。


    一方で、生成AIを扱う上での問題点も実感しています。


    • 新旧織り混ざってうまく動かないコードも出力される

    • 出力するたびにコードの内容が違う

    • ミスを指摘してコードを再生成するも結局ミスが消えずに堂々巡り


    などなど。


    使う側としても、

    生成AIが出力したコードが正しいのかどうか、

    的確に指摘・修正できるスキルが求められるようになっています。


    さらにフロントエンドとバックエンドの技術が全く別のプログラム言語であれば、

    それぞれの知識も必要になってきます。


    コード生成AIのパワーを活かすためにも、

    フロントエンドとバックエンドを同じ環境で開発することができれば、

    使い手側のスキルも一本化できて効率化でき、開発効率も上がることになります。


    そんな課題意識を受けて本講座では、

    モダンなNext.js+TypeScript環境にて、

    フロントエンド・バックエンドをまとめたフルスタックな開発を実施するための、

    土台になるような講座構成にしております。


    土台としての知識を蓄えた状態でコード生成AIなどを活用することで、

    個人開発や小中規模のアプリであれば

    かなりのスピードで開発できる実力を身につけることができます。


    「急がば回れ」の精神でできるだけ細かく解説しておりますので、

    サービス開発に興味のある方はぜひ本講座をご活用いただければ幸いです。


    ## 講座で扱っている技術

    Next.js

    AppRouter(page/layout/not-found/error/loading/RouteHandler(api/route)/MetaData/middleware

    コンポーネント(RSC/RCC)/レンダリング(CSR/SSR/SSG/ISR)/ServerActions/redirect/Link/Image/


    ライブラリ

    prisma/shadcnui/zod/auth.js(旧NextAuth.js)/bcryptjs/date-fns/react-markdown/


    Reactの機能

    useActionState, useState, useEffect


    デプロイ

    Vercel, Supabase


    ↓全て表示↑少なく表示
     
    Users Voice
    最新のNext.jsを学べるのはいい機会だと思いますし、説明も丁寧ですがAuth.js、shadcn にPrismaと割りと初学者がこれだけのボリューミーだと確かにできたけど、頭に入ったかというと入ってない気もする。。 何回か繰り返さないと見に入らないかなと感じた。 (参考:Udemy)

    ↓全て表示 ↑少なく表示
    Nextjsがどんどんアップデートされているため、講義の内容が若干古くなりつつあるため、4.5とさせていただきました。 難しいかとは思いますが、定期的に最新の情報を講義に追加いただけると幸いです。 (参考:Udemy)

    ↓全て表示 ↑少なく表示
     
    レクチャー内容
    1. Next.js 基本
      • 講座の紹介
      • 初めてUdemyで講座受講される方へ
      • 講座で扱った資料
      • Next.jsの概要・特徴
      • 環境構築 (Next.js インストール)
      • ファイル・フォルダ・scriptコマンドの解説
      • VisualStudioCode推奨の拡張機能
    2. AppRouter ルーティング関連
      • appフォルダ内の整理・特別なファイル名の紹介
      • 基本ルーティング
      • 動的ルーティング
      • paramsの型を指定する(Promiseオブジェクト)
      • ルーティンググループ
      • プライベートフォルダ
      • レイアウト(layout.tsx)
      • 下層にlayoutファイルを作成し表示確認
      • Not Foundページ
      • ローディングページ
      • エラーページ
      • route.tsx ルートハンドラー (APIルート定義)
      • メタデータの設定方法
      • ミドルウェア (Middleware)
      • このセクションのまとめ
    3. コンポーネント(RCC/RSC)・レンダリング・データ操作
      • クライアントコンポーネント(RCC)とサーバーコンポーネント(RSC)の比較
      • RSCとRCCの作成方法・動作確認
      • RSCとRCCの違い・ReactHook, イベント周り
      • RSCとRCCの組み合わせ・Cilent Boundary
      • リンクの使い分け(LinkとuseRouter)
      • レンダリングの比較 (CSR, SSG, ISR, SSR)
      • Imageコンポーネント
      • レンダリングの動作確認 その1 (SSR)
      • レンダリングの動作確認 その2 (SSG, ISR)
      • データ操作方法の比較 (Next.jsは4通り)
      • このセクションのまとめ
    4. フォーム作成
      • フォームの作成
      • ServerActionsを使ってフォーム送信
      • zod (型バリデーション)
      • useActionStateでサーバーのバリデーションをクライアントに表示させてみる
      • クライアントサイドでバリデーション (useState, onBlur)
      • Prismaの概要・インストール・初期設定
      • Prisma スキーマ設定・マイグレーション・Prisma Studio
      • データベーステーブルへの登録
      • 登録されたデータの表示
      • このセクションのまとめ
    5. 簡易ブログ作成 その1 環境構築・認証なし画面
      • 成果物の完成例・技術構成
      • 開発環境の構築
      • ルーティンググループの作成
      • Prismaインストール・初期設定
      • Prisma スキーマ (User, Post)
      • Prisma 初期データ(ダミーデータ)
      • Prisma マイグレーション実行・関連コマンド・Primsa Studio
      • 追記: shadcn/uiのバージョン指定方法の変更
      • shadcn/uiの概要・インストール
      • 認証なし画面 ヘッダー
      • ヘッダー表示確認・不要ファイル削除
      • 記事一覧の取得関数、Post型の作成など
      • 記事一覧向け カードコンポーネント
      • 画像最適化・記事一覧ページ
      • 1記事の取得 準備
      • 記事詳細の表示
      • 記事検索機能 事前解説
      • 記事検索機能 クエリ・コンポーネント
      • 記事一覧ページで検索できるように対応する
      • このセクションのまとめ
    6. 簡易ブログ その2 認証
      • 認証(Auth.js (旧NextAuth.js))の概要・インストール
      • auth.config.ts と middleware.tsの作成
      • Auth.js 設定ファイル
      • ServerAction(SignIn)・認証用のレイアウト
      • ログインフォーム その1
      • ログインフォーム その2
      • ログイン後の共通ヘッダー (PrivateHeader)
      • Dropdownでログアウト機能
      • 不具合修正 (リダイレクトの調整)
      • ユーザー登録ページ その1 (バリデーションスキーマ・Recordユーティリティ)
      • ユーザー登録ページ その2 (バリデーション・DB登録)
      • ユーザー登録フォーム
      • npm run build ESLintエラー対応(createUserの型など)
      • このセクションのまとめ
    7. 簡易ブログ その3 ログイン後のCRUD
      • CRUDとRESTful API セッションの拡張(ログインユーザーのid付与)
      • ログインユーザーの記事取得クエリ
      • 記事一覧ページ その1
      • 記事一覧ページ その2 (DropdownMenu)
      • 記事作成画面の準備(Markdownなどのインストール)
      • 記事作成画面 その1 (フォーム・文字数カウント)
      • 記事作成画面 その2 (ReactMarkdownでプレビュー)
      • 記事作成機能 (画像アップロード)
      • 記事作成機能 ServerAction その1
      • 記事登録機能 ServerAction その2
      • 記事・画像の保存
      • 記事の詳細画面
      • 記事の詳細画面 その2 (Markdown表示など)
      • 記事編集画面 (RSCとRCCの分離)
      • 記事編集画面 その2
      • 画像のプレビュー機能
      • 表示非表示のラジオボタン追加
      • 記事更新機能
      • 記事削除機能 その1 (AlertDialog)
      • 記事削除機能 その2 (Dropdown)
      • 記事削除機能 その3
      • このセクションのまとめ
    8. デプロイ関連
      • デプロイ先の紹介 (Vercel, Supabase)
      • supabaseのアカウント・プロジェクト・ストレージ作成
      • supabase データベース接続
      • supabase ストレージ接続
      • vercelへのデプロイ
      • このセクションのまとめ
    9. 補足 Git/GitHub
      • Laravel第2弾・第3弾・第4弾に含めていた内容と同じものです。
      • Gitのインストール (mac)
      • Gitのインストール(win)
      • GitHubの登録
      • Gitのconfig設定
      • SSHキーの設定(mac)
      • SSHキーの設定(win)
      • gitHubにpushしてみる(init, add, commit, push)
      • 初回の補足と2回目のpush
      • ブランチとプルリク
     
    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をコピーしました