Udemyと書籍を活用したReact入門手順！3回挫折した結果、今ならこうします

Udemyの講座はたくさんあるので、どれを選べばいいか悩みますよね。

特に、どの講座がどのレベルなのか、どういう順番で受講すればいいか、よくわからないと思います。

Reactの勉強を始めたい場合、その周辺知識として何を知っておかないと詰むというのもよくわからないと思います。

私のように、入門してはReact以外のところで詰まり、結局習得できずに時間が経って忘れてを繰り返さないために、「今ならこうする！Udemyを活用したReact入門手順」を紹介します。

React学習のゴール

• Reactでサクッとアプリが作れる
• Reactの全体像が見えていて、問題発生時に課題に分離して、一つづつ解決できる状態
• 実際の開発で利用できる

React学習の課題

Reactに入門して習得したと言えるまで、以下のような壁のどこかにぶつかると思います。

どこで詰まるかはバックグラウンド次第です。

• JavaScriptよくわからん
  • モダンJSの書き方よくわからん
  • モジュールシステムよくわからん
  • 非同期処理よくわからん
• Reactの歴史的な意義よくわからん
• ネットワークよくわからん
  • TCP/IP？
  • HTTP通信よくわからん
• ブラウザの挙動よくわからん
• React関連
  • npmライブラリが多すぎる、どれ使ったらいいのかよくわからん
  • フォルダ構造どうしたらいいかよくわからん
  • レンダリングの挙動よくわからん
  • コンポーネント分割の基準、文字だけだとわからん
  • カスタムHookいつ使うかわからん
• テスト種類多いしどれをやったらいいか、どこまで書けばいいか良いかよくわからん
• チーム開発でGitどうしたらいいかよくわからん
• AIエージェント時代に自分で書く必要あるのかよくわからん

「これ今はわからないな」って感じる課題があると思います。

複合的な課題に陥ると、Reactから挫折してしまいます。私が課題分解しておきましたので、一つずつ潰してしていきましょう！

複合的な課題とは、例えば以下のような状況です。

ログイン画面で API を叩き、ユーザー情報（名前・権限など）を取得し、取得した情報を複数ページ・コンポーネントで参照したいという場合。

非同期処理を理解し、グローバルな状態管理の方法を理解しておく必要があります。また、カスタムHookに処理をまとめ、関心の分離、可読性、再利用性を高める必要もありそうです。

このように課題を分解できればいいですが、頭の中が整理されていない状態だとよくわからなくて挫折してしまいそうになります。

学習の流れ

前提として、できるだけ長期スパンで学習を進めるのが理想です。基礎をおろそかにすると結局手戻りが大きくなるので。

でも、モチベーションがあるうちにガッとやってしまうのも一つの戦略です。

以下の学習の流れから、あなたにあった学習プランを練ってみてください。

STEP1: IT基礎

フロント開発の前提として、以下のようなことを知っておく必要があります。

• HTML/CSS
• Web技術
• TCP/IP
• セキュリティ

遠回りに見えて、一番効率がいいので、ちょっとでも苦手かもと思ったら、まずはこの辺りを潰しておくのがおすすめです。

STEP1: JavaScript ~ Reactの学習

• モダンJSの学習
• Reactの基礎
• Reactでアプリ開発
• フロントエンドテスト

Reactの学習については、シンプルな3ステップは上記で十分です。3つくらいの講座なら、そこまでお金もかからないです！

アプリ開発についてはできれば色んな人の講座を受けられるといいと思います。フォルダ分割の思想や開発を進める順番などが人によって多少異なるので、実際の開発の流れの理解が進みます。

Udemyの講座を紹介

HTML/CSS

未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す　最高の実践コース

Udemyには、HTML/CSSの講座が大量にあり、異常にボリュームが多いものから、内容が全然ないものまで多種多様です。

この講座は、CSSのグリッドとレスポンシブデザインまでを手を動かしながら習得するまでという、ちょうどReact入門前に知っておくべき最低限の情報が載っている講座です。

評価も高く、安心して購入できるものいい点です。

【世界で90万人が受講】Web Developer Bootcamp（日本語版）

全てを一つの講座で終わらせたい方にはこちらの講座がおすすめです。

世界で90万人以上が受講したThe Web Developer Bootcamp完全日本語版！これ一本でフロントエンドからバックエンド、セキュリティからアプリのデプロイを包括的に学ぶ。

ただし、海外のノリが問題ない方ならという条件付きです。

一つの講座で全ての学習が完結できるので、安く済ませたい方に最適です。

Web技術

WebについてのUdemy講座は質の良いものはないので、書籍を紹介します。

どちらも名著なので、どちらでも良いです。

両方家にあって良い書籍ですが、「Webを支える技術」が個人的には好きです。

歴史から設計までしっかり解説されていて、本棚から手に取って参照したくなる時があります。

TCP/IP

こちらも書籍を紹介します。

「マスタリングTCP/IP　入門編（第6版）」が王道of王道です。

前者をまずは読んで、復習は図が多い後者を利用しています。カラーで見やすくて「図解入門TCP/IP 第2版」が結構好きです。

セキュリティ

こちらも書籍です。フロントにとどまらないので、遠回りしすぎと思った方は、後回しにしてもらって構いません。

モダンJSの学習

JavaScriptで詰まると、React特有のJSXやJSの記載がスラスラ読めず、ストレスが徐々に溜まって学習をやめるというのが典型的な挫折パターンです。

そのため、JSの学習はしっかりやっておくことをお勧めします。

【JS】ガチで学びたい人のためのJavaScriptメカニズム

「最低限のJavaScriptの文法はもちろんわかるけど、モジュールシステムや非同期処理がよくわからん」

という方にはこちらがおすすめです。

JavaScriptでの開発が苦手ですか？JSのメカニズムを学べば「これまでとは全く違うJSの世界」が見えてきます。React、Vue、JQuery、Firebaseを勉強したいと思っている人は、是非メカニズムから始めてみてください。

【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門

Reactの基礎まで一気にいきたい方はこちらがおすすめです。

じゃけぇさんという方の講座はわかりやすいのでおすすめです。続編もあります。

【フルリニューアルしました！】Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。

書籍の場合はこちらが王道です。

Reactの基礎 ~ 応用

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

じゃけぇさんの「【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門」の続編です。

２つ同時受講がおすすめです。

「React何となく分かったけど次どうしたら良いか分からない」という人がステップアップするために知っておくべきことを順序立ててハンズオン形式で詰め込みました。本コースを終える頃にはもっとReactのことを好きになっていると思います。

Reactアプリ開発

基礎ができたら、とにかくアプリを作って、問題解決を積み重ねるしかないと思います。

ただ、他の方の開発の流れやフォルダ構造など、暗黙知になっている部分を学ぶためにUdemyのアプリ開発講座をいくつか受けてみるのが個人的にはおすすめです。

その後は、自分でアプリをゼロから作っていきましょう。

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座

shincodeさんはYoutubeやUdemyでフロント周りの動画をたくさん上げている、これからお世話になるであろう方です。

この方の考え方は信頼できるので、一つ受けてみてください。

Reactを使って「ポケモン図鑑」「ブログ」「ノートメモアプリ」の3種類のアプリを構築する講座です。Reactの基礎は学び終えたからもっと実践的なアプリケーションを作りたい！応用が効くアプリ開発力を鍛えたい！という方は必見の講座内容です。

フロントエンドテスト

フロントエンドの単体テストから、End to End テストまでのフレームワークを学びましょう。

これで実際の開発でもある程度通用すると思います。

【Reactテスト入門】React Testing Library/Jest/Vitestで学ぶフロントエンドテスト入門

【E2Eテスト編】Playwright + Next.js App Router によるフロントエンドテスト

番外編 Reactの歴史

技術が生まれるのは課題があったからです。

技術が生まれた理由を理解することで、思想レベルで理解が進み、新しい機能が追加されるときなどに、理解しやすくなります。

ということで、Reactやフロントエンドの歴史を語ってくれるシリーズ「りあクト！」の1巻にまとまっているのでおすすめです。（筆者は第4版を読んだので、5版の評判は不明です。）

まとめ

Reactへ入門するために、

IT基礎とReactの学習教材を、Udemyと書籍から紹介しました。

筆者のように、Reactがなんかかっこいいからといった理由で学習して挫折してなんとなく苦手という状況にならないように、基礎を重視して紹介しました。

たくさん紹介しましたが、以下の講座を受けてみて、理解できなければIT基礎からやるという流れでも構わないと思います。

【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門

この先は、TypeScriptやNext.jsなどに発展していくと思います。モダンJSがわかっていればTSは大したことないですし、Next.jsもReactがわかっていれば身構えるほどではないです。

気楽に次の挑戦をしていってください！