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

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

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

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

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

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

「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. ルーティングとは？基本的な書き方について学ぼう

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について
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最新バージョンでの注意点
25. React Router導入&事前準備
26. 基本的なページ遷移
27. ネストされたページ遷移
28. ルート定義の分割
29. URLパラメータを扱う
30. クエリパラメータを扱う
31. stateを渡すページ遷移
32. Linkを使わないページ遷移
33. 404ページを用意する
34. コンポーネントの分割方法（Atomic Design）
35. Atomic Design概要
36. Atomの作成
37. Moleculeの作成
38. Organismの作成1
39. Organismの作成2
40. Templateの作成
41. Pageの作成
42. Atomic Designに取り組む上でのポイント
43. グローバルなstate管理を知る
44. グローバルなstate管理がなぜ必要か
45. ツラい例を実装してみる
46. Contextでのstate管理(基本的な使い方)
47. Contextでのstate管理(ユーザー情報の設定と参照)
48. Contextでのstate管理(再レンダリングの最適化)
49. Recoilでのstate管理(Recoilの紹介)
50. Recoilでのstate管理実践
51. JSONPlaceholderでのデータ取得解説
52. JSONPlaceholderとは
53. JSONPlaceholderからaxiosでデータを取得してみる
54. React × TypeScript(基礎編)
55. TypeScriptとは
56. 基本的な型
57. 引数の型指定
58. 返却値の型指定
59. 変数の型指定
60. 設定ファイル(tsconfig)をいじってみる
61. React × TypeScript(実践編)
62. React × TypeScriptの準備
63. 型がないせいでバグっているアプリの例
64. 取得データの型を定義しバグを防ぐ
65. propsに型を定義しよう
66. 型定義を効率的に管理しよう
67. コンポーネント自体の型定義
68. オプショナルチェイニングでnull安全なコードを書く
69. 補足(ライブラリの型定義について)
70. カスタムフック
71. カスタムフックとは
72. カスタムフックを使わないデータ取得例
73. カスタムフック作成
74. カスタムフックを呼び出す
75. 実践アプリ作成(Chakra UI)
76. ソースコードのリポジトリ
77. 注意事項
78. 総まとめとして作成するアプリ
79. Chakra UIバージョンの注意点
80. Chakra UIの紹介
81. Globalなスタイルを設定する
82. ルーティングの作成
83. ヘッダーの作成
84. ヘッダーの作成(コンポーネント分割)
85. ヘッダーの作成(ルーティング機能実装)
86. ログイン画面の作成
87. ログイン画面の作成(コンポーネント分割)
88. ログイン機能の実装
89. メッセージ表示機能の実装
90. ユーザー一覧画面の作成
91. ユーザー一覧取得機能の実装
92. ユーザー詳細モーダル画面の作成
93. ユーザー詳細モーダル機能の実装
94. ログインユーザー情報をContextに保持してみる
95. 管理者ユーザーを想定してフラグをcontextに保持してみる
96. 管理者ユーザーのみユーザー情報を編集できる導線の作成
97. さいごにとこれから
98. さいごにとこれからのアドバイスと小話
99. ボーナスレクチャー

Reactフレームワークの「Next.js」を初めて触る人に向けたコース構成になっています。

■ 本コースの対象者

・Reactは一通り学んだから次のステップとしてNext.jsを学びたい方

・Next.js完全初心者の方

・Next.jsを学んでReactの違いを明確に理解しておきたい方

・Next.jsの公式ドキュメントを読んでもイマイチ理解が深まらない方

・公式ドキュメントよりも動画でサクッと理解したい方

・CSRではない最新のレンダリング手法のSSG・SSRを学んでみたい方

Reactよりも最適化されたアプリやサイトを構築できます。

Next.jsフレームワークを学べば高速化されたWeb開発が可能に。

モダンなフロントエンド技術に乗り遅れたくない方は必見の内容です。

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

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

・Next.jsの公式ドキュメントに沿った内容で講座を構成しています。

・すでにNext.jsの公式ドキュメントを読み終えて理解済みの方は、

この講座では新しい学びがないので受講しないようにしてください。

・ISRについては取り扱っておりません。

1. 本講座を受講する流れ
2. 本講座で学ぶこと・デモ
3. 本講座の学習の流れ
4. Next.jsの基礎を学ぼう
5. Next.jsって何？なぜ必要なの？
6. プリレンダリングって何？
7. SSGとSSRって何？
8. 【追加教材】SSGのより分かりやすい説明
9. Next.jsの開発環境を構築しよう
10. VSCodeをインストールしよう
11. Node.jsをインストールしよう
12. 開発用フォルダを作ってNext.jsのひな型を作成しよう
13. Next.jsファイル群の中身の説明
14. Next.jsの開発効率が上がるプラグインをインストールしよう
15. ①Next.jsでマイクロブログを構築(ページ遷移、スタイリング編)
16. はじめに：完成品デモ
17. Next.jsにおけるホットリローディングを体感しよう
18. pagesフォルダでルーティング設定をしてみよう
19. Linkコンポーネントでページ遷移をしてみよう
20. 静的な画像ファイルの取り扱いについて(publicディレクトリ)
21. Headコンポーネントを使ってメタデータを追記しよう
22. 複数ページに共通して使えるレイアウトコンポーネントを作成してみよう
23. Next.jsにおけるcssスタイリング適用方法を学ぼう
24. タイポグラフィに関するCSSモジュールを用意しよう
25. _app.jsにグローバルスタイリングを適用させてみよう
26. トップページのレイアウトを更新しよう
27. トップページのスタイリングを調整しよう
28. ②Next.jsでマイクロブログを構築(プリレンダリング編)
29. はじめに
30. Next.jsでプリレンダリングを実感してみよう
31. ブログ投稿用データを準備しよう
32. マークダウン解析のためのライブラリを作成しよう
33. getStaticPropsでSSGを実装してみよう
34. propsで受け取った静的データをmap関数で出力して表示しよう
35. getServerSidePropsの書き方も知っておこう
36. ③Next.jsでマイクロブログ構築(動的ルーティング編)
37. はじめに
38. Next.jsにおける任意のURLを動的ルーティングとして設定する方法
39. 各ブログファイル名(id)のオブジェクトを返す関数を作成しよう
40. getStaticPathsを実際に使ってみよう
41. 外部から一度だけデータを取得するSSGを実装しよう
42. ブログIDに応じた記事内容を返す関数を用意しよう
43. 実際にgetStaticPathsとgetStaticPropsを実感してみよう
44. ブログ記事のレイアウトを訂正しよう
45. フォールバックについて補足
46. 404 Not Foundページをカスタマイズしてみよう
47. ブログの細かい訂正をしよう(その１)
48. ブログの細かい訂正をしよう(その２)
49. ④Next.jsでマイクロブログ構築(デプロイ編)
50. buildコマンドを実行して本番前にプレビューしてみよう
51. デプロイするためにGitHubアカウントを作成しよう
52. Vercel社が開発したデプロイサービスを利用しよう
53. DPSワークフローを体験してみよう(その１)
54. DPSワークフローを体験してみよう(その２)
55. Next.jsが本当にページを高速にレンダリングしているか確認してみよう
56. ボーナスレクチャー
57. 最後まで受講していただいた方へ
58. ボーナスレクチャー

ある程度React基礎を学んだ人向けに作成した講義ビデオになります。

「Twitterアプリってどんな仕組みで作られているの ？」

「Reactは少し理解したけど作りたいものが見つからない・・・」

「Firebaseのデータベース連携でテキストや画像情報を保存してブラウザに表示したい！」

「クローンアプリを作りながらもっとReactの理解を深めたい！ 」

モダンなReactライブラリを使ってSNSアプリで有名な「Twitter」クローンをハンズオン形式でレクチャーします。

■本コースでは教えないこと

・HTML/CSS/JavaScriptの基本的な文法・ルール

・削除機能

・ログイン機能

・いいねやリツイート機能等

・完璧なTwitterクローンではないのでご了承ください。

・Twitterの見た目と、ツイート・画像投稿機能（データベースに保存）とタイムライン表示まで実装しています。

1. はじめに
2. 本講座で学ぶこと・デモ
3. 本講座の学習の流れ
4. Reactの開発環境を構築しよう
5. VSCodeをインストールしよう
6. Node.jsをインストールしよう
7. React開発環境構築
8. Reactプロジェクト内部の説明/整理
9. コーディングに便利なプラグインをインストールしよう
10. 【基礎】Javascript 関数講座
11. はじめに
12. Array.map()
13. 三項演算子の使い方
14. 【実践】Twitterクローンの完成品デモ
15. ツイッター完成品のデモ
16. ツイッター完成品のソースコード
17. 【実践】Twitterアプリを実装しよう(フロントエンド編)
18. TwitterのHTML構成を図解で確認してみよう
19. サイドバーを作成しよう
20. MaterialUIを導入・インストールしてみよう
21. SidebarOption.jsを実装してみよう
22. Material Iconコピペ用テキスト
23. Material Iconを探す練習をしてみよう
24. サイドバーにツイートボタンを追加しよう
25. Sidebar.cssでスタイリングを適用しよう
26. SidebarOption.cssでスタイリングを適用しよう
27. App.cssでアプリ全体のレイアウトを変更しておこう
28. タイムラインを作成しよう
29. タイムラインのCSSを適用させよう
30. TweetBox.jsを作成しよう
31. TweetBox.cssでスタイリングを適用しよう
32. Post.jsを作成しよう
33. Post.cssでスタイリングを適用しよう
34. タイムラインをスクロールできるように修正しよう
35. ウィジェットを作成しよう
36. ツイッタータイムライン貼り付けのライブラリを導入してみよう
37. Wiget.cssでスタイリングを適用しよう
38. 最後にアプリ全体のCSSの修正をしよう
39. 【追加】CSSの最終修正
40. 【実践】Twitterアプリを実装しよう(バッグエンド編)
41. はじめに図解で全体像を確認しよう
42. Post.jsコンポーネントにプロップスを渡してみよう
43. Firebaseを使ってみよう
44. Firebaseの初期化設定
45. CloudFirestoreデータベースを使ってみよう
46. データベースを初期化（連携）してみよう
47. データベースからデータを取り出してみよう
48. 取り出したデータをPost.jsに渡して出力してみよう
49. マウント時だけデータを取得するように変更してみよう
50. ツイート投稿できるようにしよう：その１
51. ツイート投稿できるようにしよう：その2
52. 最新のツイート順にデータを出力してみよう
53. リアルタイムでデータを出力してみよう
54. 滑らかにツイートを表示してみよう
55. 最初からサイドバーが選択された状態にしてみよう
56. 作ったTwitterをデプロイしてみよう
57. Firebaseでデプロイしてみよう
58. ボーナスレクチャー
59. 最後までご受講いただいた方へ
60. ボーナスレクチャー