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

これからReactを勉強する全ての人におくるReact入門コース決定版！

Reactの勉強に苦戦する多くの人と話してきました。

そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。

JavaScriptへの理解なくしてReactの習得はなし得ません。

そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。

■2023年11月 フルリニューアルしました！

ありがたいことにコース公開から3年で24000人もの方に受講いただきました。

3年でReactのバージョン等大きく変わりましたし、皆さんからのレビュー内容を反映したい気持ちもあり、全て再収録・再編集し直しました！

↓リニューアル内容例

• 最新のReact v18への対応

• 昨今の状況を加味した解説等の追加

• 一部新規レクチャー

• 誤っていた箇所の修正

• レビューいただいた内容の反映（音質改善や完成版コードの共有等）

これから先もReact入門コースの代名詞として選ばれ続けるよう皆さんの声を反映していきます！

■本コースでは以下の流れで学習を進めます。

1. モダンJavaScriptを取り巻く周辺知識や仕組みの概念を知る

   SPAとは？仮想DOMとは？パッケージマネージャとは？等

   React開発に関わる事柄について説明することでまず概念を理解し学習を進め易くします。

2. React開発で使用するモダンJavaScriptの機能を知る

   ReactはJavaScriptの機能をふんだんに使って開発していきます。そのためまずは良く使うモダンなJavaScriptの機能を先に理解することで後でReactの学習に集中することができます。

3. プレーンなJavaScriptのみでアプリケーションを開発する

   Reactを使用することでどういう恩恵があるか、従来との違いは何なのか？を知るためにまずはReactを使わずJavaScriptのみでアプリケーションを開発します。

   このステップを挟むことでよりReactへの理解が深まります。

4. Reactの基本やルールを知る

   ここからReact特有のルールや文法、機能についてフォーカスして学んでいきます。

5. JavaScriptだけで作成したアプリケーションと同じものをReactで開発する

   学んできたReactを使用し実際にアプリケーションを開発することでより理解を深めます。

   実務ではどのような書き方をするか、抑えるべきポイントも合わせて説明していきますのでイメージが深まるかと思います。

   更にプレーンなJavaScriptで作成したものと同じものを作成するので、近代JavaScriptの転換を体感することができます。

■それ以外の本コースの特徴

• 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

• 学習には息抜きも必要なのでセクションの合間に私の経験やフロントエンド周りの雑談も含まれたりしています

• コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

• 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)

  
  

1. はじめに
2. 講師自己紹介
3. コース全体像
4. なぜこのコースが必要なのか
5. このコースを受けたらできるようになること
6. 質問の仕方
7. このコースで用いる環境について
8. [追加]CodeSandboxの変更点
9. [追加]StackBlitzの紹介
10. CodeSandboxの紹介
11. CodeSandboxの機能説明
12. 雑談(情報処理の単位が取れずに留年しかけてました)
13. ReactやVue等を使うために知っておきたいJavaScriptの基本
14. このセクションで伝えたいこと
15. JavaScriptって何？なぜオススメ？
16. DOMや仮想DOMってなんなんだ
17. npmやyarn等のパッケージマネージャーの意義を知る
18. ECMAScriptとは。近代JavaScriptの転換期について
19. モジュールバンドラーやトランスパイラの概念
20. SPAとは？従来のWebシステムとの違い
21. 雑談(フリーランスって一言に言っても...)
22. モダンJavaScriptの機能に触れる
23. CodeSandboxのURL
24. このセクションで取り組むこと
25. const、let等の変数宣言
26. テンプレート文字列 ``
27. アロー関数 =>
28. 分割代入 {} []
29. デフォルト値 =
30. オブジェクトの省略記法
31. スプレッド構文 ...
32. mapやfilterを使った配列の処理
33. 三項演算子 ? :
34. 論理演算子の本当の意味を知ろう
35. 雑談(伸びる人、伸びない人)
36. 素のJavaScriptだけでTODOアプリを作成してみよう
37. CodeSandboxのURL
38. TODOアプリ作成の準備
39. HTMLで構造を作成
40. CSSでスタイリング
41. タスクの追加機能(テキスト)
42. タスクの追加機能(ボタン)
43. タスクの削除機能
44. タスクの完了機能
45. タスクの戻す機能
46. セクションまとめ
47. 雑談(コンポーネントって何だ？)
48. Reactの基本を学ぶ
49. Reactを学ぶ準備
50. JSX記法のルールを知る
51. コンポーネントの使い方を知る
52. Reactでのイベントやスタイルの扱い方を知る
53. Propsを知る
54. Stateを知る
55. 再レンダリングと副作用を知る(useEffect)
56. default exportとnamed export
57. 雑談(ライブラリの選定)
58. React使ってTODOアプリを作成してみよう
59. CodeSandboxのURL
60. TODOアプリ作成の準備
61. JSXで構造を作成
62. CSSでスタイリング
63. Reactでの実装を意識したモックに変更
64. タスクの追加機能
65. タスクの削除機能
66. タスクの完了機能
67. タスクの戻す機能
68. カイゼン(コンポーネント化)
69. カイゼン(コンポーネント内でのスタイル定義)
70. カイゼン(TODOの上限設定)
71. さいごにとこれから
72. 雑談(このコースの次にするべきこと)
73. ボーナスレクチャー：さいごにとこれから

「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の概要を学ぼう

経験ゼロからReactを最速でマスターすることを目指します。

ウェブサイトの仕組み、Java Scriptの文法に始まり、Reactを基礎から学びます。

Reactの学習では、実際のReactアプリを触りながら学びます。

いざ入門者が会社で現場に配属されると、ゼロからアプリを作ることは少なく、既存の製品の改修から入ることが多いと思います。

そのような現場での仕事を意識して、本コースでは既に完成したReactアプリを題材にし、その中で使われているReactのエッセンスを一つ一つ学んでいきます。

1. イントロダクション
2. 本コースの概要
3. 講師の紹介
4. 本コースの進め方について
5. Webサイトが表示される仕組み
6. 最も原始的なHTMLサイト
7. 動的なウェブサイト
8. フロントエンド技術がなぜ必要なのか
9. Reactがなぜ必要なのか
10. HTML, CSS, JavaScriptの役割
11. 開発環境(CodeSandbox)の準備
12. CodeSandboxのアカウントを作る
13. CodeSandboxの使い方
14. Reactの中でHTML, CSS, JSがどこに書かれているか
15. JavaScriptの基礎
16. JavaScriptの記述ルール
17. 変数について
18. constとletの違い
19. プリミティブなデータ型
20. 値をオブジェクトにまとめる
21. 複数の値を配列に格納する
22. null, undefinedについて
23. if-elseで条件分岐する
24. forによる繰り返し制御
25. 関数で処理をまとめる
26. Reactはコンポーネントで構成されている
27. Reactのファイル構成
28. コンポーネント指向とは?
29. コンポーネントは入れ子にできる
30. 【演習】簡単なコンポーネントを表示してみる
31. propsで親から子に値を渡す
32. propsとは
33. propsではできないこと
34. propsでイベントハンドラーを扱う
35. 親子の役割分担
36. 【演習】propsで背景色を指定してみる
37. stateで状態を保持する
38. stateとは? stateとpropsとの違い
39. stateを実装してみる
40. tic-tac-toeのstate実装を見てみる
41. Reactの注意点 ~ immutableについて
42. 【演習】historyのリセット機能を作ってみる
43. JSXでレイアウトを定義する
44. JSXは常に1つのルート要素を返す
45. JSX内でJavaScriptを書くときは{ }を使う
46. よく使う記法(三項演算子, && )
47. まとめの演習
48. 【演習】historyを隠す機能を作ってみる
49. 【演習】次のゲームへ進むボタンを追加する
50. 【演習】揃ったラインに色を付ける
51. 終わりに
52. 本コースのまとめと今後の学習について

Reactの基礎を学び終え、３種類のアプリ開発をすることでReactの理解をさらに深める講座内容となっています。

■ 本コースの対象者

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

・Reactでどんなアプリが作れるのかハンズオン形式で学んでみたい

・ReactでAPIの叩き方(Promiseを使ったデータフェッチング)を学んでみたい

・ReactとFirebaseで権限付きの簡単なブログ(掲示板)を構築したい

・Googleログイン機能を実装してみたい

・モダンJavascriptで使われるmap, filter, find, sort関数を使ってCRUD操作を学びたい

・ローカルストレージに保存できるノートアプリ(Evernoteクローン)を構築したい

・etc...

Reactは学んだけど、作りたいWebアプリが思いつかないから学習が捗らない・・・

実際にプロジェクトを作ることでプログラミングの理解は深まります。

Reactの基礎は理解し「次に進んでみたい」「ステップアップしたい」という方におすすめの

講座内容となっています。

また、ReactだけでなくFirebase(Cloud Firestore, Google Authentication)を使ったDBの取り扱いや

Googleログイン機能、ローカルストレージの取り扱い、Promiseオブジェクトの利用法などを付随して学ぶことできます。

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

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

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

1. はじめに
2. 本講座で学ぶこと・デモ
3. 本講座を学習する流れ
4. React開発をする上で必要なセットアップ
5. VSCodeをインストールしよう
6. Node.jsって何？
7. Node.jsをインストールしよう
8. React開発効率を爆上げするセットアップ
9. 【アプリ①】ポケモン図鑑アプリケーションを構築してみよう
10. 【ポケモン図鑑】完成品のデモから
11. Reactの環境開発構築からはじめよう
12. ポケモンAPIってなに？
13. 実際にポケモンのデータを取得してみよう
14. データ読み込み時のローディング設定をしよう
15. 詳細なポケモンデータを取得する準備をしよう
16. ポケモンの詳細なデータを取得してみよう
17. Cardコンポーネントを作成しよう
18. ポケモンデータを実際のページに出力してみよう
19. ポケモン達をグリッドで表示してみよう
20. CardコンポーネントをCSSでスタイリングしよう
21. 簡単にナビゲーションバーを作成しよう
22. 次のページのポケモンを検索するボタンを作成しよう：その１
23. 次のページのポケモンを検索するボタンを作成しよう：その２
24. 前のページのポケモンを検索するボタンを作成しよう
25. ページをめくるボタンをCSSでスタイリングしよう
26. 【アプリ②】ReactとFirebaseでブログを構築してみよう
27. 【ブログ】完成品のデモから
28. Reactの環境開発構築からはじめよう
29. Firebaseのセットアップをはじめよう
30. FirebaseとReactを連携させる準備をしよう
31. Reactにおけるルーティング設定をしてみよう
32. ナビゲーションバーの雛形を作成しよう
33. CSSでナビゲーションバーをスタイリングしよう
34. fontawesomeでReactでアイコンを利用する方法
35. Googleログイン機能を実装してみよう
36. 認証状態を保存する変数をローカルストレージに保存してみよう
37. Googleログアウト機能を実装してみよう
38. ログインとログアウトボタンを切替えてみよう
39. ブログ記事投稿ページを作成しよう
40. ブログ記事投稿にCSSを適用させよう
41. タイトルと記事内容の文字列を取得してみよう
42. Cloud Firestoreにデータを格納してみよう
43. Firestoreにデータ書き込みができるようにルールを変更しよう
44. Homeコンポーネントを作成しよう
45. HomeコンポーネントにCSSを適用してみよう
46. Could Firestoreからブログデータを取得してみよう
47. map関数でブログデータを１つずつ取り出して表示しよう
48. ログインしていないのに記事が書けるバグを修正しよう
49. ブログ記事を削除する関数を作成しよう
50. 誰でも記事が削除できてしまうバグを修正しよう
51. 【追加】ログインしていない時にホームに行くとエラーになるバグの修正
52. リロードしても自動的にログインするように修正しよう
53. 【アプリ③】ノートアプリを構築してみよう
54. 【ノートアプリ】完成品のデモから
55. React環境開発から整えよう
56. ノートメモアプリに必要なコンポーネントを用意しよう
57. Sidebarコンポーネントから作成しよう
58. SidebarをCSSでスタイリングしよう
59. 新しいノートを追加する関数を作ってみよう
60. map関数でノートを全て出力してみよう
61. react-uuidを利用してkeyを一意に決定しよう
62. 指定したノートを削除する関数を作成しよう
63. ノートを選択したらハイライトされる仕組みを作ろう
64. Mainコンポーネントを作成しよう
65. MainコンポーネントをCSSでスタイリングしよう
66. 選択したノートをプレビューに出力してみよう
67. ノートを編集する機能を実装しよう：その１
68. ノートを編集する機能を実装しよう：その２
69. ノート編集の流れをもう一度おさらいしよう
70. マークダウンエディタを実装してみよう
71. 修正日が新しい順にノートを並び替えよう
72. ノート内容をローカルストレージに保存してみよう
73. ページを開くとノートの1番目が選択された状態にしよう
74. ボーナスレクチャー
75. 最後まで受講していただいた方へのお礼
76. ボーナスレクチャー

React力を更に高めたい全ての人におくるステップアップコース完全版！

「stateやprops、useStateやuseEffectの使い方は何となく分かったけど次どうしたら良いか分からない」

「もっと実務で必要となるレベルの解説を知りたい」

といったReactでもっとステップアップしていきたい人のために本コースを作成しました。

■本コースでは以下の内容を取り扱います

1. 再レンダリングの仕組みを知りレンダリングを最適化する

   どんな時に再レンダリングは起きるのか、またそれを最適化する方法を知ることで規模が大きくなってもサクサク動く快適なアプリケーションを作ることができるようになります。

2. 様々なCSSのあてかたに触れる

   いざ自分でアプリケーション作ろうと思うとCSSについては絶対迷うと思います。

   選択肢を増やすために主要なCSSライブラリについて使い方を紹介します。

3. ルーティングのテクニックを学ぶ(React Router)

   Reactで画面遷移を伴うアプリケーションを作る場合ルーティング周り知識は不可欠です。

   ReactRouterの使い方や具体的なテクニックを知ることでアプリケーション開発に生かせるかと思います。

4. コンポーネントの分割方法を学ぶ（Atomic Design）

   コンポーネント分割として有名なAtomic Designというデザインシステムを紹介します。

   概念の部分や、Reactでの使い方を知ることでコンポーネント分割への意識が変わります。

5. グローバルなstate管理を知る

   実際のアプリケーションではコンポーネントを横断して使用できるグローバルなstateの知識は必須です。

   React標準のContextの使い方やテクニックと、Recoilというライブラリについても軽く紹介しています。

6. React × TypeScriptで開発できるようになる

   これからReactで開発していく場合、TypeScriptの使用はほぼ必須と言っても過言ではありません。

   基礎、応用と順番にTypeScriptについて解説していくので、今後はTypeScriptを用いたReact開発に取り組んでいけるようになるかと思います。

7. カスタムフックを使えるようになる

   コンポーネントとロジックを分離するカスタムフック について実際に使い方を学ぶことで更にステップアップしたReactのコードを書けるようになります。

8. Chakra UIを使った実践アプリ作成

   これまでの内容を全て取り込んで実際にCSSフレームワークを使いながらアプリケーションを作っていく流れを体験することで、より学習した内容の生かし方がイメージできるようにしています。

■それ以外の本コースの特徴

• 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

• コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

• 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)

  
  

1. はじめに
2. 講師挨拶
3. 本コース受講の前提条件
4. コース全体像
5. CodeSandboxについて
6. [追加]CodeSandboxの変更についてとStackBlitzの紹介
7. 再レンダリングの仕組みを知りレンダリングを最適化する
8. 注意事項（Reactのバージョン）
9. 理解度の確認
10. レンダリング確認用のコーディング
11. 模擬的にレンダリングコストの高いコンポーネントを作成
12. 再レンダリングが起きる条件
13. レンダリング最適化１(memo)
14. レンダリング最適化２(useCallback)
15. おまけ(useMemo)
16. 様々なCSSのあてかたに触れる
17. Inline Styles
18. CSS Modules
19. Styled JSX
20. styled components
21. Emotion
22. ルーティングの基礎(React Router)
23. React Routerバージョンの注意点
24. React Router導入&事前準備
25. 基本的なページ遷移
26. ネストされたページ遷移
27. ルート定義の分割
28. URLパラメータを扱う
29. クエリパラメータを扱う
30. stateを渡すページ遷移
31. Linkを使わないページ遷移
32. 404ページを用意する
33. コンポーネントの分割方法（Atomic Design）
34. Atomic Design概要
35. Atomの作成
36. Moleculeの作成
37. Organismの作成1
38. Organismの作成2
39. Templateの作成
40. Pageの作成
41. Atomic Designに取り組む上でのポイント
42. グローバルなstate管理を知る
43. グローバルなstate管理がなぜ必要か
44. ツラい例を実装してみる
45. Contextでのstate管理(基本的な使い方)
46. Contextでのstate管理(ユーザー情報の設定と参照)
47. Contextでのstate管理(再レンダリングの最適化)
48. Recoilでのstate管理(Recoilの紹介)
49. Recoilでのstate管理実践
50. JSONPlaceholderでのデータ取得解説
51. JSONPlaceholderとは
52. JSONPlaceholderからaxiosでデータを取得してみる
53. React × TypeScript(基礎編)
54. TypeScriptとは
55. 基本的な型
56. 引数の型指定
57. 返却値の型指定
58. 変数の型指定
59. 設定ファイル(tsconfig)をいじってみる
60. React × TypeScript(実践編)
61. React × TypeScriptの準備
62. 型がないせいでバグっているアプリの例
63. 取得データの型を定義しバグを防ぐ
64. propsに型を定義しよう
65. 型定義を効率的に管理しよう
66. コンポーネント自体の型定義
67. オプショナルチェイニングでnull安全なコードを書く
68. 補足(ライブラリの型定義について)
69. カスタムフック
70. カスタムフックとは
71. カスタムフックを使わないデータ取得例
72. カスタムフック作成
73. カスタムフックを呼び出す
74. 実践アプリ作成(Chakra UI)
75. ソースコードのリポジトリ
76. 注意事項
77. 総まとめとして作成するアプリ
78. Chakra UIバージョンの注意点
79. Chakra UIの紹介
80. Globalなスタイルを設定する
81. ルーティングの作成
82. ヘッダーの作成
83. ヘッダーの作成(コンポーネント分割)
84. ヘッダーの作成(ルーティング機能実装)
85. ログイン画面の作成
86. ログイン画面の作成(コンポーネント分割)
87. ログイン機能の実装
88. メッセージ表示機能の実装
89. ユーザー一覧画面の作成
90. ユーザー一覧取得機能の実装
91. ユーザー詳細モーダル画面の作成
92. ユーザー詳細モーダル機能の実装
93. ログインユーザー情報をContextに保持してみる
94. 管理者ユーザーを想定してフラグをcontextに保持してみる
95. 管理者ユーザーのみユーザー情報を編集できる導線の作成
96. さいごにとこれから
97. さいごにとこれからのアドバイスと小話
98. ボーナスレクチャー