TypeScript のおすすめの教材8選！ 【 2023年3月 最新版】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上で挙げた２つを学べば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: 12.1.6

TypeScript: 4.6.4

Node.js: 16

1. はじめに
2. なぜReactなのか？
3. コース概要
4. コースの進め方
5. Udemyでの学習の進め方
6. ★重要★資材のダウンロード & 受講準備
7. ★重要★コースで使用するVSCodeの拡張機能を準備しよう
8. VSCodeのショートカットの使い方について学ぼう
9. 【スキップ可】Reactで頻出のJavaScriptの記法
10. セクション紹介
11. npmコマンドの使い方
12. 本セクションのコードの実行方法
13. アロー関数の記法について学ぼう
14. ESModuleのExport/Importについて学ぼう
15. コールバック関数の挙動について学ぼう
16. DOMとイベントリスナについて学ぼう
17. 配列のmap、filterメソッドについて学ぼう
18. 分割代入について学ぼう
19. スプレッド演算子と残余引数について学ぼう
20. 三項演算子について学ぼう
21. truthyな値、falsyな値について学ぼう
22. Promiseについて学ぼう
23. await/asyncの使い方について学ぼう
24. まずはReactに触れてみよう
25. Reactを動かしてみよう
26. Reactコンポーネントって何？コンポーネントを定義してみよう
27. Reactのプロジェクトの作成方法（create-react-appの使い方）
28. ★重要★本コースで使用するプロジェクトの使い方
29. コンポーネントにスタイルを当ててみよう
30. コンポーネントの分割方法
31. 【練習】コンポーネントの分割方法
32. 不要なタグを出力しないFragmentの使い方
33. JSX内でJSコードを実行してみよう
34. 【TIPS】式と文の違い
35. 【練習】JSX内で式を使ってみよう
36. propsでコンポーネントに値を渡してみよう
37. propsに色々な値を渡してみよう
38. 【練習＆解答】propsで値を渡してみよう
39. 特別なプロパティ ~ props.children
40. propsの重要なルール
41. JSXの正体
42. React要素ツリーとコンポーネントツリー
43. セクションまとめ
44. イベントリスナと状態管理（State）
45. セクション紹介
46. イベントに合わせて関数を実行してみよう
47. 開発でよく利用するイベントタイプ
48. イベントに合わせて画面表示を更新してみよう
49. 【重要】ステートとは？
50. 【重要】ステートとレンダリングの仕組み
51. 【複数のステート】ステート使用時の注意点！
52. 【更新は即時ではない】ステート使用上の注意点！
53. 【練習】ステートの処理を自分で記述してみよう
54. オブジェクト型のステートを使う際の注意点！
55. 【重要】オブジェクトのステートは新しいオブジェクトを設定する！
56. 【練習】オブジェクトのステートを更新
57. 配列のステートを使う際の注意点！
58. ステートとコンポーネントの関係
59. ステートを複数のコンポーネントで管理しよう！
60. 【練習】ステートの受け渡し
61. セクションまとめ
62. 制御構文とフォームの制御
63. セクション紹介
64. 配列をリスト表示
65. 【重要】リストには必ずキーを設定
66. 【練習】リストにキーを設定してみよう
67. 配列のフィルターメソッドの使い方
68. 【練習】フィルターメソッドの使い方を練習してみよう
69. 条件分岐を設ける方法まとめ
70. コンポーネントのリファクタリング
71. 【Form】inputとtextareaの作成方法
72. 【Form】ラジオボタンの作成方法
73. 【Form】チェックボックスの作成方法
74. 【Form】複数選択チェックボックスの作成方法
75. 【Form】プルダウンの作成方法
76. Todoアプリを作ってみよう
77. スタイリング
78. セクション紹介
79. インラインスタイルの使い方！
80. インラインスタイルの注意点！
81. 外部CSSのimportを使ったスタイリング
82. CSS Modulesを使ったスタイリング
83. 【styled-components】CSS-in-JSを使ったスタイリング
84. 【styled-components】【発展】CSS-in-JSを使ったスタイリング
85. 【練習&解答】styled-components
86. 【まとめ】Reactでのスタイルの適用方法
87. 【付録】ReactでのCSSフレームワーク【Part.1】
88. 【付録】ChakraUIを使ってみよう【Part.2】
89. 【付録】ChakraUIを使ってみよう【Part.3】
90. ReactでDOM操作を行う方法
91. セクション紹介
92. 【createPortal】モーダルの作り方
93. 【Bubbling】Portalを使う際の注意点！
94. 【練習＆解答】createPortalでトーストを作成してみよう
95. 【useRef】refでDOMを直接操作してみよう
96. 【useRef】refで動画プレイヤーを作成してみよう
97. 【useRef】refとは？refとstateの違い
98. 【forwardRef】他のコンポーネントのDOMにアクセスする方法
99. 【useImperativeHandle】refへのアクセスを限定する方法
100. 【練習＆解答】refの使い方
101. セクションまとめ
102. 【スキップ可】問題への対処法
103. セクション紹介
104. エラーの解消方法
105. デバッガーを使ってみよう
106. React Developer Toolsの使い方
107. Google検索の仕方
108. 【発展】関数型プログラミング
109. セクション紹介
110. 関数型プログラミングとは？
111. 状態と処理の分離
112. 純粋関数
113. 不変性（immutability）【Part.1】
114. 不変性（immutability）【Part.2】
115. Reactと純粋関数
116. Reactにおける状態と処理の分離
117. Reactにおける不変性
118. 【まとめ】関数型プログラミング
119. JavaScriptコードと見比べてみよう
120. 【React Hooks】様々な状態管理の方法
121. セクション紹介
122. useReducerを使ってみよう
123. useReducerとuseStateの違い
124. useReducerとuseStateの違い（関数型プログラミング視点）
125. 【練習＆解答】useReducer
126. useContextでグローバルな値を管理しよう
127. useContextでstateを管理してみよう
128. useContextのリファクタリングをしてみよう
129. useContextを使う際の注意点！
130. useContextとuseReducerを組み合わせて使ってみよう
131. 【練習＆解答】useContextとuseReducer
132. 【練習】useContextとuseReducer
133. 【解答】useContextとuseReducer
134. 【解答続き】useContextとuseReducer
135. 【React Hooks】useEffectとカスタムフック
136. セクション紹介
137. useEffectとは？タイマーを作りながら学んでみよう
138. useEffectの依存配列の使い方
139. 【練習&解答】useEffect
140. useEffectのクリーンアップ処理の使い方
141. useEffectの実行タイミングをおさらいしよう
142. useLayoutEffectって何？useEffectとの違いについて学ぼう
143. useEffectの実行順を意識して実装してみよう
144. 独自のフックを作成してみよう
145. 【練習&解答】Custom Hook
146. 【発展】関数型プログラミングから見たuseEffectの使用ケース
147. 【発展】ReduxとRedux Toolkit
148. セクション紹介
149. Reduxとグローバルな状態管理
150. ★本セクションのサンプルコードの実行方法
151. Reduxを使ってみよう
152. Reduxの状態管理方法について学ぼう
153. 複数のReducerを使う方法
154. Action CreatorでActionを定義してみよう
155. Redux ToolkitでReduxを書き換えてみよう
156. Redux Toolkitにおけるミュータブルな値の変更
157. Immerを使ったミュータブルな値の変更
158. Redux Thunkとは？Redux Middlewareとの関係
159. Redux Thunkで非同期処理を記述してみよう
160. 非同期処理のステータスを画面に表示してみよう
161. Redux Middlewareを作成してみよう
162. セクションまとめ
163. 【スキップ可】クラスコンポーネント
164. セクション紹介
165. クラスコンポーネントとは？
166. クラスコンポーネントを定義してみよう
167. クラスコンポーネントでの状態管理
168. ライフサイクルメソッドとは？
169. Error Boundaryの実装方法
170. 【発展】パフォーマンスの最適化
171. セクション紹介
172. 【レンダリング】画面が更新されるまで
173. Stateの比較処理（Object.is）
174. 【TIPS】StrictModeとは？
175. 子コンポーネントの不要なレンダリング
176. React.memoを使った不要なレンダリングの防止
177. useCallbackを使った関数のメモ化
178. useCallbackの依存配列の使い方
179. useMemoを使った値のメモ化
180. セクションまとめ
181. 【React18】useTransitionでUIのパフォーマンス改善
182. 【React18】useDeferredValueでUIのパフォーマンス改善
183. Rest APIを使ったサーバーとの通信
184. セクション紹介
185. REST APIとは？
186. JSONとは？
187. JSON ServerでモックアップAPIを作成
188. Axiosを使ってサーバーからデータを取得しよう
189. 取得したデータを画面に反映してみよう
190. GUIでリクエストの状態を確認しよう
191. 更新リクエストをサーバーに送信してみよう
192. リクエストと画面処理を統合しよう
193. 【発展】ダイナミックインポートとは？
194. 【発展】コンポーネントのダイナミックインポート
195. Next.js（Part.1）基本的な使い方
196. セクション紹介
197. Next.jsとは？なぜNext.jsを使うのか？
198. Next.jsをインストールしてみよう
199. 書きながら学びたい人はこちらを受講ください
200. ルーティングとは？基本的な書き方について学ぼう

エンジニアのみなさん！

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

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

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

• 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では３０日間の全額返金保証を行なっております。講座の内容には自信がありますが、もし万が一講座に満足いただけなかったとしても心配ありませんので、ご安心ください。

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

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

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

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

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

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

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

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

  
  

この講座の内容リスト

• TypeScriptの型はこう書く！

• コンパイラを使う方法

• TypeScriptではClassをこう使う！

• これがInterfaceだ！

• ジェネリクスの仕組み

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

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

• 「モジュール」と「Webpack」

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

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

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

1. はじめに
2. コースの紹介
3. これがTypeScriptだ！
4. TypeScriptをインストールする方法
5. TypeScriptをJavaScriptに変換する方法
6. ご紹介。私が使用している拡張機能と設定とキーボードショートカット
7. TypeScriptを使うべき３つの理由
8. TypeScriptのドキュメントとしての側面を理解する
9. TypeScriptのLinterとしての側面を理解する
10. TypeScriptのES5へのコンパイラとしての側面を理解する
11. このコースの流れ
12. 再生速度の変更とQ&Aを使って質問する方法
13. TypeScriptの型はこう書く！
14. イントロダクション - セクション２
15. 「TypeScriptの型」と「JavaScriptの型」
16. boolean型とnumber型とstring型を使う方法
17. 「型注釈」と「型推論」
18. オブジェクトに型を付ける方法
19. 配列に型を付けるArray型はこう使う
20. Tuple型を使用して、決まった内容の配列を作る方法
21. Enumを使って、特定のまとまったグループのみを受け入れる列挙型を使う方法
22. どんな型にもなるany型について知る
23. Union型を使って複数の型 を使う方法
24. Literal型を使って特定の値のみを取り扱う方法
25. typeエイリアスを使って複雑な型を変数のように扱う
26. 関数に型を適応させる方法
27. 関数の戻り値にvoid型を使う方法
28. undefined型とnull型についての補足
29. 関数型を使って、特定の関数のみを代入できる変数を作る
30. callback関数の型はこう書く
31. unknown型を使って、柔軟でanyよりも厳しい型を定義する方法
32. never型を使って、起こり得ない値の型を使用する方法
33. まとめ - セクション2
34. コンパイラを使う方法
35. イントロダクション - セクション3
36. watchモードを使って、保存時に自動的にTSからJSにコンパイルする方法
37. tsc —initでtsconfig.jsonを作り、全てのファイルを一気にコンパイルする方法
38. includeとexcludeとfilesを使ってコンパイルするファイルを選ぶ方法
39. targetを指定して、特定のバージョンのJavaScriptに変換する方法
40. libを指定して、TypeScriptが用意している型の定義を追加する
41. allowJs、checkJs、jsx、declaration、declarationMapの設定はこう使う
42. SourceMapを使用して、ブラウザでTypeScriptを操作する方法
43. outDirとrootDir、removeComments、noEmit、downlevelIterationの使い方
44. noEmitOnErrorオプションを使って、エラーが出た時にコンパイルしない方法
45. noImplicitAnyやstrictNullChecksなどのstrictの設定はこう使う
46. 綺麗なコードを書くための設定をする方法
47. まとめ - セクション3
48. TypeScriptではClassをこう使う！
49. イントロダクション - セクション4
50. これがオブジェクト指向プログラミングだ
51. classを定義してオブジェクトを作成する方法
52. JSにコンパイルされたclassはこうなっている
53. クラスにメソッドを追加する方法
54. クラスを型として使う方法
55. public修飾子とprivate修飾子を使用して、アクセスを制限する方法
56. 初期化の処理を省略する方法
57. readonly修飾子を使って、書き換え出来ないようにする方法
58. extendsを使用して、他のクラスの機能を継承する方法
59. protected修飾子を使用して、継承先までアクセスできる範囲を広げる方法
60. ゲッターとセッターはこう作る
61. staticを使用して、インスタンスを作らずにクラスを使う方法
62. Abstractクラスを使用して、継承にのみ使えるクラスを作成する方法
63. privateをconstructorに付けて、シングルトンパターンを実装する方法
64. まとめ - セクション4
65. これがInterfaceだ！
66. イントロダクション - セクション5
67. interfaceはこう使う！
68. メソッドをオブジェクトの型に指定する方法
69. implementsを使用して、クラスに対してinterfaceの条件を適応させる方法
70. これがTypeScriptの構造的部分型だ！
71. readonly修飾子をinterfaceに使って読むだけのプロパティを作る方法
72. extendsを使ってinterfaceを継承する方法
73. interfaceで関数の型を表現する方法
74. ?を使って、あってもなくても良いオプショナルプロパティとオプショナルパラメーターを使用する方法
75. まとめ - セクション5
76. こうすればもっとTypeScriptがわかる応用的な使い方
77. イントロダクション - セクション6
78. AかつBのように、&を用いてインターセクション型を定義する方法
79. 条件文を使って型を絞り込む、３つのType guard
80. タグ付きUnionを使って型を絞り込む方法
81. 型アサーションを使って、手動で型を上書きする方法
82. !(Non-null assertion operator)を使って、nullじゃないと言い切る方法
83. インデックスシグネチャを使用して柔軟なオブジェクトを作る方法
84. 関数のオーバーロードを使って、戻り値の型を正しくTypeScriptに伝える方法
85. Optional Chainingはこう使う！
86. Nullish Coalescingはこう使う！
87. LookUp型を使ってオブジェクトのメンバーの型を取得する方法
88. 型の互換性の仕様書はこうなっている！
89. 「TypeScriptの型安全性」と「JavaScriptの柔軟性」
90. 関数型のオーバーロードはinterfaceで定義する必要がある
91. 関数型のインターセクションはオーバーロードになる
92. 関数型のユニオン型はパラメータがインターセクション型、戻り値はユニオン型になる
93. レストパラメーターに配列やタプルを指定する方法
94. 配列とタプルにreadonly修飾子をつける方法
95. constアサーションはこう使う
96. 型の中でtypeofを使うと、こんな便利なことができる
97. まとめ - セクション6
98. ジェネリクスの仕組み
99. イントロダクション - セクション7
100. こうしてジェネリクスを使って、型を引数として受け取る
101. extendsを使って型パラメータに制約をつける方法
102. keyofを使ってオブジェクトのキーのユニオン型を作成する方法
103. Classに対してジェネリクスを使用する方法
104. Interfaceに対してジェネリクスを使用する方法
105. 内蔵されているジェネリック型であるUtility型の紹介
106. デフォルトの型パラメーターを指定する方法
107. 型のfor文であるMapped Typesはこう使う
108. 型のif文であるConditional Typesはこう使う
109. まとめ - セクション7
110. デコレーターはこう使う！
111. イントロダクション - セクション8
112. デコレータを使ってClassに関数を適応する方法
113. デコレータファクトリを使用して、デコレータに引数を渡す方法
114. こうしてデコレータを使って簡易版のフレームワークを作成する
115. 複数のデコレータを同時に使う方法
116. 戻り値にクラスを指定して、新しいクラスを作り出す方法
117. 「プロパティーデコレータを使う方法」と「prototypeについて」
118. 「メソッドデコレータを使う方法」と「PropertyDescriptorについて」
119. アクセサーデコレータはこう使う
120. 戻り値を使って、実践的なメソッドデコレータを使う方法
121. パラメータデコレータはこう使う
122. まとめ - セクション8
123. 実践：健康管理アプリはTypeScriptでこう作る！
124. イントロダクション - セクション9
125. こうしてオブジェクト指向プログラミングでアプリを作り始める
126. Foodsクラスで、全ての食べ物の要素を保持する方法.mp4
127. こうすれば、クラスを綺麗に分離できる。
128. Foodクラスにクリックイベントを加える方法
129. コールバック関数でthisを使用する場合はこうする
130. activeな食べ物の配列を取得できるようにする方法
131. activeな食べ物のスコアの配列を取得できるようにする方法
132. トータルスコアを取得する方法
133. 取得したトータルスコアを表示する方法
134. アプリでシングルトンパターンを使用する
135. Interfaceを使用して、わかりやすいコードを作成する方法
136. まとめ - セクション9
137. 「モジュール」と「Webpack」
138. イントロダクション - セクション10
139. scriptタグを並べて、ファイルを分割する方法
140. ESモジュールを使って、ファイルを分割する方法
141. ローカルサーバーを用意して、ESモジュールをブラウザで利用する方法
142. 「4つのimportの書き方」と「２つのexportの書き方」
143. モジュールはこのタイミングで実行される
144. これがWebpackを使う理由だ！
145. Webpackをインストールしてセットアップする方法
146. webpack.config.jsのoutputはこう書く！
147. source mapをwebpackで作成する方法
148. ts-loaderを使って、TypeScriptを直接Webpackで扱う方法
149. webpack-dev-serverを使用して、bundleをローカルサーバーから提供する方法
150. webpackのバージョンの補足
151. 本番用の設定でwebpackを使う方法
152. まとめ - セクション10
153. こうしてTypeScriptでJavaScriptライブラリーを使う！
154. イントロダクション - セクション11
155. これが型定義ファイル(.d.ts)だ！
156. DefinitelyTypedの@typesパッケージをインストールして、既存の型定義ファイルを使う方法
157. .d.tsファイルを作って、npmからインストールしたライブラリーを使う方法
158. .d.tsファイルを作って、CDNからインストールしたライブラリーを使う方法
159. namespaceはこう使う！
160. namespaceで型を定義する方法
161. axiosの型定義ファイルを理解し、declareの意味を知る
162. lodashの型定義ファイルはこうなっている
163. declare globalを使ってプロジェクト全体で使える値や型を定義する
164. 同じ名前の値と型とnamespaceはこうして一緒に使う！
165. 型定義ファイルを拡張する方法
166. .d.tsファイルは実は.tsファイルでも書くことができる
167. まとめ - セクション11
168. React.jsをTypeScriptと一緒に使う方法
169. イントロダクション - セクション12
170. ゼロからReact.jsとTypeScriptを一緒に使う方法
171. create-react-appを使ってReact.jsとTypeScriptを一緒に使う方法
172. propsに型をつけるにはこうする！
173. React HooksやRedux、React Routerで型を使う時はこうする！
174. まとめ - セクション12
175. Node.jsとExpressとTypeScriptを一緒に使う方法
176. イントロダクション - セクション13
177. TypeScriptとNode.jsを使って開発する方法
178. Node.jsのモジュールの復習
179. TypeScriptのモジュールとNode.jsのモジュールはこうして相互に繋がっていた
180. esModuleInteropを使って、Node.jsのモジュールにデフォルトimportを使用する方法
181. Expressを使ってルーティングの処理をする
182. VSCodeを使って、正しい型を見つける方法
183. 型を拡張してRequestのbodyに正しい型をつける方法
184. まとめ - セクション13
185. このコースのまとめ
186. このコースのまとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 型、型の使い方

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

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

• TypeScriptにおけるクラス

• 名前空間とモジュール

• インターフェース

• ジェネリクス

• デコレータ

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

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

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

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

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

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

1. TypeScript入門
2. コースへようこそ
3. TypeScript 概要 & 使う理由
4. TypeScriptのインストール & 利用方法
5. TypeScriptのメリット
6. コースの概要
7. このコースを最大限に活用する方法
8. 開発環境（IDE）の設定
9. コースで利用するプロジェクトの作成
10. TypeScriptの基本と型
11. イントロダクション
12. 型の利用
13. JavaScriptの型 vs TypeScriptの型
14. 重要：型の大文字・小文字
15. number, string, boolean型の使い方
16. 型の指定 & 型推論
17. 型の理解
18. Object 型
19. ネストしたObject 型
20. Array 型
21. Tuple 型
22. Enum 型
23. any 型
24. Union 型
25. Literal 型
26. 型エイリアス / カスタム型
27. 型エイリアス と Object 型
28. コアな型 & 概念
29. function 型 と void 型
30. function 型
31. function 型とコールバック
32. 関数 & 型
33. unknown 型
34. never 型
35. まとめ
36. 役に立つ資料 & リンク
37. TypeScript の設定とコンパイラ
38. イントロダクション
39. Watch モードの使い方
40. プロジェクト全体のコンパイル方法
41. ファイルの Include & Exclude の設定
42. コンパイルターゲットの設定
43. Lib 設定の理解（ビルトイン API の設定）
44. その他の設定、コンパイラオプション
45. Source Map の利用
46. rootDir と outDir の設定（ソースフォルダと出力先フォルダの設定）
47. コンパイルエラー時にJavaScriptの出力をしない設定
48. 厳格な型チェックのオプション（Strict Type-Checking Options）
49. コード品質に寄与するオプション
50. 【補足】Chrome for Debugger (非推奨) の代わりに JavaScript Debugger を使用する手順
51. Visual Studio Code を利用してデバッグする方法
52. まとめ
53. 役に立つ資料 & リンク
54. 新しい世代のJavaScriptとTypeScript
55. イントロダクション
56. "let" & "const"
57. アロー関数
58. デフォルト関数パラメータ
59. スプレッドオペレータ（...）
60. レストパラメータ（残余引数）
61. 配列とオブジェクトの分割代入
62. コンパイルターゲット＆まとめ
63. 役に立つ資料 & リンク
64. クラス & インターフェース
65. イントロダクション
66. クラスとは？
67. 最初のクラス
68. JavaScriptへのコンパイル
69. コンストラクタ関数 & "this" キーワード
70. "private" & "public" 修飾子
71. プロパティ初期化のショートカット構文
72. "readonly" プロパティ
73. クラスの基本
74. 継承
75. プロパティのオーバーライド & "protected" 修飾子
76. Getter & Setter
77. static メソッド & プロパティ
78. abstract クラス（抽象クラス）
79. シングルトン & private コンストラクタ
80. クラスのまとめ
81. クラス
82. 最初のインターフェース
83. クラスでのインタフェースの実装
84. インターフェースを利用する理由
85. 読み取り専用のインターフェースプロパティ
86. インターフェースの拡張
87. 関数型としてのインターフェース
88. 任意のパラメータ & プロパティ
89. インターフェースの JavaScript へのコンパイル
90. インターフェース
91. まとめ
92. 役に立つ資料 & リンク
93. 高度な型
94. イントロダクション
95. 交差型
96. 型ガード
97. 判別可能な Union 型
98. 型キャスト
99. インデックス型
100. 関数オーバーロード
101. オプショナルチェイン
102. NULL合体演算子
103. 高度な型
104. まとめ
105. 役に立つ資料 & リンク
106. Generics（ジェネリクス）
107. イントロダクション
108. 組み込みの Generic 型 & Generics とは
109. 【補足】次レクチャ「Generic 関数の作成」に関して
110. Generic 関数の作成
111. Generics に制約を追加する
112. もうひとつの Generic 関数
113. "keyof" の制約
114. Generic クラス
115. まとめ
116. Generic型のユーティリティ
117. Generic 型 vs Union 型
118. Generics
119. 役に立つ資料 & リンク
120. デコレータ
121. イントロダクション
122. 最初のクラスデコレータ
123. デコレータファクトリ
124. 便利なデコレータ
125. 複数のデコレータの追加
126. プロパティデコレータの詳細
127. アクセサとパラメータのデコレータ
128. デコレータの実行タイミング
129. クラスデコレータによるクラスの変更
130. その他のデコレータの返却値
131. 例："Autobind" デコレータの作成
132. デコレータによるバリデーション - 最初のステップ
133. デコレータによるバリデーション - 完成
134. バリデーションモジュールのバグ修正
135. まとめ
136. 役に立つ資料 & リンク
137. 実践！ドラッグ & ドロップ可能なプロジェクト管理ツールの作成
138. イントロダクション
139. プロジェクト作成
140. DOM要素の取得 & オブジェクト指向
141. DOM要素の操作
142. "Autobind" デコレータの作成 & 利用
143. ユーザ入力の取得
144. 再利用可能なバリデーション機能の作成
145. プロジェクト一覧の表示
146. シングルトン & アプリケーションの状態管理
147. 追加のクラス & カスタム型
148. Enum によるプロジェクトのフィルタリング
149. 継承の追加 & ジェネリクス
150. プロジェクト項目の表示
151. Getter の利用
152. ドラッグ & ドロップ実装におけるインターフェースの活用
153. ドラッグイベント & 状態をUIに反映する
154. ドロップ可能な場所
155. ドラッグ & ドロップ機能の完成
156. まとめ
157. 役に立つ資料 & リンク
158. モジュールと名前空間 (namespace)
159. イントロダクション
160. モジュール分割の選択肢
161. 名前空間の利用
162. ファイルとフォルダの整理
163. 名前空間の問題点
164. 注意：Chrome または Firefox を使ってください
165. ESモジュールの利用
166. インポート & エクスポート構文のバリエーション
167. モジュールのコードが実行されるタイミング
168. まとめ
169. 役に立つ資料 & リンク
170. Webpack と TypeScript
171. イントロダクション
172. Webpack とは何か & なぜ必要なのか
173. Webpack のインストール & 重要な依存パッケージ
174. エントリポイントと出力設定
175. ts-loaderの利用（TypeScriptサポートの追加）
176. 【注意】Webpack version 5 での設定について（開発用）
177. セットアップの完了 & webpack-dev-server の追加
178. 【注意】Webpack version 5 での設定について（本番用）
179. 本番用のワークフロー設定
180. まとめ
181. 役に立つ資料 & リンク
182. サードパーティライブラリ & TypeScript
183. イントロダクション
184. JavaScriptライブラリの利用
185. 最後の手段としての "declare" の利用
186. 次のレクチャ「class-transformer の例」についての補足
187. class-transformerの例
188. class-validatorの例
189. まとめ
190. 役に立つ資料 & リンク
191. 住所検索アプリの作成（Google Maps）
192. イントロダクション
193. プロジェクトの設定
194. ユーザ入力の取得
195. Google API キーの設定
196. Axios & 住所の座標取得
197. Google Map による地図の表示
198. クレジットカード無しで地図を表示したい場合
199. 役に立つ資料 & リンク
200. React & TypeScript

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

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

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

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

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

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

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

1. はじめに
2. イントロダクション
3. 本コースの学習内容について
4. Q&Aについて
5. 本コースのセクション1からセクション9までの内容のソースコードを収録したgitリポジトリについて
6. こんにちは！TypeScript！
7. 環境構築 - Node.js編
8. Node.jsのインストールをしよう
9. 環境構築 - Gitリポジトリ編
10. 次のレクチャーに進む前に
11. GitHubでリポジトリを作成しよう
12. 環境構築 - Node パッケージ編
13. package.jsonを作ろう
14. typescriptをインストールしよう
15. ts-node をインストールしよう
16. ts-node-dev をインストールしよう
17. 環境構築 - Visual Studio Code編
18. Visual Studio Code をインストールしよう
19. 基本的な型について学ぼう
20. boolean型
21. number型、string型
22. array型
23. tuple型
24. any型
25. void型
26. null型とundefined型
27. never型
28. object型
29. 型エイリアス(Type Aliases)
30. interface
31. 型安全とは
32. unknown型
33. 交差型(intersection型)
34. 共用体型(union型)
35. Literal型
36. 列挙型(enum型)
37. 関数で「型」を使ってみよう
38. functionキーワードによる関数定義
39. 無名関数による関数定義
40. アロー関数(ラムダ式)による関数定義
41. オプショナルなパラメータを定義しよう
42. デフォルトパラメータを設定しよう
43. Restパラメータを設定しよう
44. オーバーロードをやってみよう
45. クラスで「型」を使ってみよう
46. クラスを作ってみよう
47. アクセス修飾子を使ってみよう
48. constructorを使い倒す
49. getter と setter
50. readonly 修飾子
51. 静的メンバを定義しよう
52. namespaceによる名前空間
53. 継承
54. 抽象クラスと抽象メソッド
55. インターフェース・リターンズ
56. 高度な型について学ぼう
57. 型の互換性
58. ジェネリクス
59. 型アサーション
60. constアサーション
61. Nullable Types
62. インデックスシグネチャ
63. Utility TypesとConditional Typesについて学ぼう
64. Utility TypesとConditional Typesをなぜ学ぶのか
65. PartialとRequired
66. Mapped Types
67. Readonly
68. Record
69. Exclude と Exract と NunNullableについて
70. Conditional Types と Distributive Conditional Types についてマスターしよう
71. Pick と Omit
72. ReturnType
73. Conditional Typesで使用されるinferキーワードについて
74. Parameters
75. ConstructorParameters
76. React アプリケーションとTypeScript
77. Reactの紹介、なぜReactを学ぶのか
78. GitHubでリポジトリを作成しよう
79. Function Components 入門編
80. Function Components 初級編
81. useStateと型制約
82. useRefとuseEffectを使ってみよう
83. useRefのより実践的な使い方とOptional ChainingとNon-Null Assertion Operatorの紹介
84. useReducerとオーバーロードを用いたその型定義について
85. useReducerの利用例
86. さいごに
87. さいごのご挨拶
88. はむさんの落穂拾い
89. macOS でログインシェルを zsh から bash に切り替える方法
90. ボーナスセクション
91. ボーナストラック：現場に活かせる実践的なテクニックを学びたい方は必見！

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

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

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

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

1. はじめに
2. はじめに
3. Udemyでの講座の進め方
4. 開発環境を整えよう（Windows編）
5. 開発環境を整えよう（macOS編）
6. JavaScript（EcmaScript 2015/ES6）入門
7. JavaScriptを体験しよう
8. EcmaScript（エクマスクリプト）とは
9. 素材ファイルをダウンロードしよう
10. 画面に文章を表示する - document.write
11. エラーが発生した時の対処法 - Chromeデベロッパーツール
12. JavaScriptを書く時の細かな注意点
13. 警告ウィンドウを表示しよう - window.alert
14. コメントを書こう
15. 計算をしよう - 算術演算子
16. ユーザーに質問しよう - window.prompt
17. 今日の日付を表示しよう - Date
18. 日付をテンプレート文字列を使って表示しよう
19. 画面をその場で変更しよう - innerHTML
20. ウェブブラウザーのタイトルを書き換えよう - window.title
21. 条件によって動きが変わるプログラムを作ろう - if
22. 2つの条件で動き変わるプログラムを作ろう - 論理演算子
23. 1から 365までを連続して表示するプログラムを作ろう - while
24. for構文を使って、より簡単に繰り返しのプログラムを作ろう - for
25. 今日の曜日を日本語で表示しよう - 配列（Array）
26. 連想配列（ハッシュ）を使って配列をより分かりやすく管理しよう - ハッシュ
27. 文章の中からキーワードを検索しよう - indexOf
28. 数字以外の場合にエラーを表示しよう - isFinite
29. 消費税を四捨五入しよう - Math.round
30. ランダムに値を取り出そう - Math.random
31. 偶数か奇数かを判断する - 剰余算
32. 「関数」を作って、よく使う処理をまとめよう
33. 変数のスコープと、let宣言、var宣言の違い
34. クラスを定義しよう
35. setterと getterでプロパティを安全に保とう
36. JSONデータを扱おう
37. 1回だけクリックできるボタンを作ろう - イベントリスナー
38. フォームが空欄だったらエラーを表示しよう
39. チェックボックスにチェックがついたら、ボタンを押せるようにしよう
40. 正規表現を使って、郵便番号が正しいかを確認しよう
41. 別のウェブページに転送しよう - location
42. タイマーで時計をリアルタイムに更新しよう - setInterval
43. JavaScriptを外部ファイル化しよう
44. モジュールを作って外部ファイルを扱いやすくしよう
45. Ajax（非同期）通信で、JSONデータを受信しよう
46. Cookieにメールアドレスを保存して、次回自動記入しよう①
47. Cookieにメールアドレスを保存して、次回自動記入しよう②
48. ローカルストレージに値を保存しよう
49. TypeScriptでトランスコンパイルしよう
50. macOSをご利用の方へ
51. トランスコンパイルとは。TypeScript Compiler（tsc）をインストールしよう
52. tscでコンパイルしてみよう
53. watchで自動でコンパイルされるようにしよう
54. TypeScriptの「型」を知ろう
55. 関数の「型」を知ろう
56. その場で型を決める「ジェネリック」
57. 複数の型を定義できる「ユニオンタイプ」
58. 型を指定しなくても自動で決まる「型推論」
59. 入れられる値を決められる「リスト」
60. TypeScriptのクラス定義
61. TypeScriptの getterと setter
62. 読み込み専用プロパティ - readonly
63. Vue.jsでウェブの画面を簡単に制御しよう
64. Vue.jsのバージョンについて
65. Vue.jsとは
66. Vue.jsでプログラムを作成しよう
67. HTML属性に Vue.jsで値を挿入しよう - v-bind
68. フェードインで表示しよう - transition
69. フォームと値を接続しよう - v-model
70. 条件によって、表示・非表示を切り替えよう - v-if
71. v-forディレクティブで繰り返し構文を作ろう
72. v-forディレクティブで、配列を制御しよう
73. v-onディレクティブでイベントを作ろう
74. Vue.jsのコンポーネントで再利用可能なパーツを作ろう
75. 時間が変化する、時計コンポーネントを作ろう
76. スロットで後からコンポーネントを書き換えよう
77. ミックスインで再利用できるプログラムを作ろう
78. 実践：計算機プログラムを作ろう①
79. 実践：計算機プログラムを作ろう②
80. Vue CLIで、SPA（Single Page Application）を開発しよう
81. メモアプリを作ろう
82. Vue CLIをインストールしよう
83. プロジェクトを作成しよう
84. Vue CLI UIを使って、ブラウザーで操作しよう
85. Vue CLIプロジェクトのファイル構成を知ろう
86. Vue Routerプラグインを入れてルーティング処理ができるようにしよう
87. メモの新規作成画面を作成しよう①
88. メモの新規作成画面を作成しよう②
89. Vuexを使ってデータを保存しよう①
90. Vuexを使ってデータを保存しよう②
91. リスト画面を作ろう
92. 編集画面を作ろう
93. リスト画面から編集画面にリンクを張ろう
94. 編集内容をストアに保存しよう
95. 保存ボタンを押さなくてもデータが変わってしまうバグを修正しよう
96. 共通パーツをコンポーネント化しよう
97. データをローカルストレージに保存できるようにしよう
98. アプリケーションをビルドしよう