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

「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: 14.1.3

TypeScript: 4.6.4

Node.js: 18.17.0

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

エンジニアのみなさん！

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

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

• JavaScriptを使っている方は、モダンな開発手法が身につきますので、今すぐこの講座に投資してください。2023年のGithubのレポートではTypeScriptはついにトップ3の言語となりました！この講座に投資することで得られるスキルは、きっとあなたの市場価値を大きく高めるでしょう。

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

プログラミングの基礎を学び、アプリケーション開発に実践的に関わり始めると、「MVC」「3 層アーキテクチャ」「サービスクラス」「ドメインモデル」「クリーンアーキテクチャ」といった、なかなか理解できない単語に遭遇します。

これはいわゆる「アプリケーションアーキテクチャ」という分野の話で、アプリケーション開発に関わり始めると、誰もが突き当たる壁の一つです。

例えば...

• 「MVC」や「3 層アーキテクチャ」といった用語が、何を指していて、どんな関係なのかよく分からない

• 「Controller にビジネスロジックを書くな」と言われたが、ではどうすべきなのか、そもそも「ビジネスロジック」とは何なのか分からない

• 1 ファイルに大量のコードが書かれているのを見たが、どう改善すればいいのか分からない

• 「ドメイン駆動設計」や「クリーンアーキテクチャ」を学ぼうとしたが、なかなか理解が進まない

といったことはないでしょうか？

そこでこのコースでは、上記のような疑問を解消すべく、多くの方がふれたことのある「リバーシ」を題材として、TypeScript で実際にコードを書きながら、アプリケーション設計の基本を学びます。

このコースでは、リバーシのアプリケーションの開発を、アプリケーションの設計とも大きく関わる、仕様の整理や API・DB 設計の流れから始めます。

その後、まずはコードの設計方針がないまま実装を進めるとどんな問題が発生するのかを体験し、実装を改善しながらよく使われている様々な設計手法を学んでいきます。

キーワード

• MVC、3 層アーキテクチャ、ビジネスロジック、サービスクラス、トランザクションスクリプト、ドメインモデル、レイヤードアーキテクチャ、クリーンアーキテクチャ

更新履歴

• 2023/05/12「（補足）asdf のセットアップについて」を追加

1. はじめに
2. このコースについて
3. 受講ガイド
4. TypeScript のセットアップ
5. TypeScript の概要とセットアップの方針
6. Node.js をインストールするために asdf をインストール
7. （補足）asdf のセットアップについて
8. asdf で Node.js をインストール
9. ts-node で TypeScript の Hello World
10. TypeScript 超入門
11. TypeScript について
12. 型注釈と型推論
13. 関数の基本
14. クラス・コンストラクタ・getter
15. メソッド
16. インタフェース
17. 関数・コールバックと async/await を用いた非同期処理
18. 3 種類の方法で関数を定義する
19. 関数のコールバック
20. コールバックを使った配列の操作
21. 非同期処理とは
22. Promise による非同期処理の実装
23. async/await を用いた非同期処理
24. アプリケーションの仕様を決める
25. なぜリバーシを題材にしたか
26. 仕様検討の進め方
27. VSCode の Draw.io プラグインの準備
28. コンテキスト図の作成
29. ユースケース図の作成
30. 登場する概念の整理
31. 実装する機能の整理
32. 画面イメージの作成
33. このセクションのまとめ
34. 技術要素の選定と API・DB 設計
35. 技術要素の選定
36. API の設計
37. OpenAPI の記述
38. DB の設計
39. （補足）ターンごとのマス目の状態を保存する必要性はあるのか
40. Express のセットアップ
41. Express の Hello World
42. ホットリロードの設定
43. アクセスログの設定
44. エラーハンドリングの設定
45. モックアップの実装
46. このセクションで実施すること
47. 静的ファイル配信の設定
48. 対戦画面の HTML の実装
49. 対戦画面の CSS の実装
50. ブラウザ上で JavaScript の Hello World
51. JavaScript で盤面を表示する処理の実装
52. （補足）なぜフロントエンドだけで実装しないのか
53. データベースの準備と対戦開始処理の実装
54. Docker で MySQL をセットアップ
55. DDL の作成
56. DDL の実行
57. 対戦を開始する API の疎通
58. 対戦を MySQL に保存する処理の実装
59. 対戦開始時の盤面を保存する処理の実装
60. 石が打てるところまでリバーシを実装
61. 盤面を取得する処理の API を実装
62. 盤面を取得する処理のフロントエンドを実装
63. 石を打つ処理のフロントエンドの実装
64. 石を打つ処理の API の実装
65. フロントエンドの盤面を取得する処理の修正
66. 3 層アーキテクチャの実装
67. アプリケーションアーキテクチャとは
68. アプリケーション設計の基本「3 層アーキテクチャ」とは
69. Table Data Gateway パターンの導入
70. データアクセス層の抽出
71. プレゼンテーション層を作成
72. サービスクラスの作成
73. リクエストやレスポンスの型を作成
74. 現時点のアプリケーション構成の整理
75. （補足）3 層アーキテクチャと MVC の関係
76. ビジネスロジックの実装準備
77. ビジネスロジックとは何か
78. ビジネスロジックの実装方式
79. ドメインモデルの設計
80. ドメインモデルのクラスの作成
81. ドメインモデルのメソッドの簡易実装
82. TurnRepository の実装
83. GameService の修正
84. GameRespotoryの実装
85. 現時点のアプリケーション構成の整理
86. （補足）Rails や Laravel などのアクティブレコード系の OR マッパーを使う場合
87. アプリケーションの完成
88. 盤面に置けるかチェックする処理の実装
89. ひっくり返せる点をリストアップする処理の実装
90. ひっくり返す処理の実装
91. エラーハンドリングの方針を検討
92. ドメイン層のエラーハンドリングの実装
93. アプリケーション層のエラーハンドリングの実装
94. フロントエンドの改善
95. 値の範囲などのバリデーションの実装
96. 次の石を判定する処理の実装
97. 勝敗判定のロジックの実装
98. 対戦結果を保存する処理の実装
99. 対戦画面のフロントエンドの完成
100. 現時点のアプリケーション構成の整理
101. 発展編：アーキテクチャをさらに改善
102. ヘキサゴナル・オニオン・クリーンアーキテクチャのポイント
103. Repository のインタフェースと実装の分離
104. DI (Dependency Injection) の実装
105. サービスをユースケースにリネーム
106. （補足）サービスとユースケースについて
107. 発展編：対戦履歴の表示機能の実装
108. このセクションで実施すること
109. 対戦履歴の API の設計
110. HTML の実装
111. JavaScript の実装
112. リポジトリの弱点と QueryService による対応
113. QueryService を使った API の実装
114. 現時点のアプリケーション構成の整理
115. おわりに
116. さらにステップアップするには
117. ボーナスレクチャー

このコースは、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は、ざっくり説明すると、 JavaScript に 型 を付けられるようにした、プログラミング言語です。

TypeScriptのTypeは日本語でいうと型、言い換えるとデータ型を意味します。

型がTypeScriptの目玉機能であることが、言語名からも推測できます。

JavaScriptを代替する事を目指した言語ですので、JavaScriptと同じく幅広い用途に利用できます。

JavaScriptを使った開発において、開発規模が大きくなった時に生じようになった欠点を改善することを目指しており、利用が伸びているプログラミング言語の一つです。

学習に必要なもの

• パソコン（macOS または Windows）

• テキストエディタ Visual Studio Code （無料）

• ウェブブラウザ Google Chrome （無料）

TypeScriptのバージョンについて

• 動画収録ではv4.7.4を利用しています。v4.7.4以上のバージョンをご利用ください。

  
  

Q＆Aコーナーのご利用について

• 本コースの内容を超えるご質問にはお答えできませんので、予めご了承ください。

• ご意見・ご要望や、コンテンツのリクエストは、コース内で紹介する専用のフォームにてお知らせいただけると幸いです。

2022年最新版

• 本コースは2022年に制作を行いました。

  
  

このコースを学ぶメリット

• インターネットとPCがあれば、いつでも自分のペースで学ぶ事ができます。

ノーリスク

• 30日以内返金保証付きで安心です（Udemyウェブサイトよりご購入の場合）。

それでは、皆さんとコースの中でお会いできることを楽しみにしています！

1. コースイントロダクション
2. 訂正情報：Typeスクリプトとは
3. Typeスクリプトとは
4. 受講オリエンテーション（Udemyのご利用が初めての方向け）
5. はじめてのTypeScriptを実行しよう
6. イントロダクション - はじめてのTypeScriptを実行しよう
7. はじめてのTypeScriptプログラムを実行しよう① - Playground
8. 学習環境を用意しよう①
9. 補足：Node.js公式サイト
10. トラブルシューティング（学習環境準備）
11. 【macOS】学習環境を準備しよう②
12. 【Windows】学習環境を準備しよう②
13. はじめてのTypeScriptプログラムを実行しよう② - VSC
14. プログラムをコメントアウトしよう
15. コンテンツリクエスト募集中！
16. 変数とデータ型の基本を理解しよう
17. イントロダクション
18. リテラルについて理解しよう
19. エスケープシーケンスを使おう
20. 変数を使おう
21. 定数（不変変数）を使おう
22. 変数名の付け方を知ろう
23. データ型について知ろう
24. 型推論を使おう
25. 基本的な演算子を使おう
26. 複合代入演算子を使おう
27. 演算子の優先順位を理解しよう
28. 文字列結合とテンプレートリテラルを使おう
29. インクリメントとデクリメントを使おう
30. 演習問題: 演算子
31. コンパイルの設定をしよう
32. イントロダクション - コンパイルの設定をしよう
33. コンパイルを自動で実行しよう
34. コンパイルとページリロードを自動で実行しよう
35. 補足説明
36. ソースコードの保存場所と出力先を設定しよう
37. Source Mapを使おう
38. 条件分岐を使おう
39. イントロダクション - 条件分岐を使おう
40. 条件分岐を記述しよう if / else
41. より複雑な条件分岐を記述しよう else if
42. 様々な比較演算子を使ってみよう
43. 演習問題: 条件分岐 if
44. 論理演算子を使おう
45. 条件分岐の入れ子を使おう
46. 条件分岐switchを使おう
47. 演習: 条件分岐 switch
48. nullとundefinedを理解しよう
49. 三項演算子を使おう
50. 関数を使おう
51. イントロダクション - 関数を使おう
52. 関数とは何か理解しよう
53. function命令を使おう
54. 関数リテラルを使おう
55. アロー関数を使おう
56. 演習問題：関数
57. コールバック関数を使おう
58. 引数にデフォルト値を設定しよう
59. 配列、オブジェクト、タプルを使おう
60. イントロダクション - 配列、オブジェクト、タプルを使おう
61. 配列の基本を理解しよう
62. 配列を操作しよう
63. オブジェクト（連想配列）を使おう
64. タブルを使おう
65. 繰り返し処理を使おう
66. イントロダクション - 繰り返し処理を使おう
67. 繰り返し処理forを使おう
68. ループの入れ子を使おう
69. 繰り返し処理whileを使おう
70. 繰り返し処理do whileを使おう
71. 繰り返し処理for...ofを使おう
72. 演習：配列、繰り返し処理
73. クラスの基本的な使い方を知ろう
74. イントロダクション - クラスの基本的な使い方を知ろう
75. クラス宣言をしよう
76. オプショナルなプロパティを使おう
77. プロパティを読み取り専用にしよう
78. メソッドを使おう
79. コンストラクタを使おう
80. アクセシビリティ修飾子を使おう
81. クラスの型について理解しよう
82. クラスの継承をしよう
83. オーバーライドをしよう
84. コンストラクタのオーバーライドをしよう
85. モジュールの基本的な使い方を知ろう
86. イントロダクション - モジュールの基本的な使い方を知ろう
87. import宣言とexport宣言を利用しよう①
88. import宣言とexport宣言を利用しよう②
89. 関数をexportしよう
90. クラスをexportしよう
91. ボーナスレクチャー
92. ボーナスレクチャー