はじめまして、ヨノと申します。
私は、大学時代に独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、現在はフリーランスエンジニア（フロントエンド、バックエンド両方）をやっています。
プログラミングを勉強するときに教材選びに困ることって多いと思います。
私も独学していたときそうでした...
なので、今回は「Reactを学びたい 」、「Reactのスキルアップをしたい」けど
- 「どんな教材を選べば良いかわからない...」
- 「自分のスキルにあった教材を知りたい!!」
といった疑問をお持ちの方に、UdemyでReactの基礎やReact Hooksを学べるおすすめコースを紹介していきます！！
目次
Udemyとは？
Udemy
とは色んな分野のトップ講師の動画を購入できるプラットフォームで、特に「プログラミング」の分野は充実しています。
Udemyの特徴
- PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
- 講師に質問でき、他の人の質問とその回答も見れる
- スマホでも見れるので、スキマ時間を活用できる
- 復習として2周目、3周目するときは、倍速再生を使うことで効率が上がる
- 満足できなかった場合、30日以内であれば返金してくれる
満足できなければ返金してもらえるので、お金を気にせずに、気になるコースをどんどん受講してスキルアップできるわけです！！
React/Reduxとは？
Reactとは、SPA（シングルページアプリケーション）を作りやすくしてくれるJavaScriptライブラリ。
SPAとは、ページ遷移することなく単一ページで構成されているアプリケーションのこと。
例えば、Reactを使えば次のような機能を簡単に作ることができます↓↓↓
- テキストエリアに入力したら、ページ遷移せずに隣にプレビューが表示される
- テキストをクリックしたら入力フォーム（編集モード）に切り替わる
- 商品をカートに入れると、ページ遷移せずに合計金額が表示される
Reduxとは、Reactに特化した状態管理をしてくれるライブラリ。
サーバーからAPIで取得したデータを保存しておいたり、ユーザーが操作した内容を保存しておいたりできます。
ECサイトで例えると↓のようなイメージです。
- サーバーから取得した商品データをReduxに保存して、Reactで表示
- ユーザーが選択した商品と購入数をReduxに保存して、Reactで合計金額を表示
- 購入ボタンをクリックしたら、Reduxに保存している商品と購入数をサーバーに送信する
React Hooks とは？
React Hooks（フック）React 16.8 から導入された機能。
useState や useEffect などの関数がReact Hooks にあたります。
簡単に言うと、関数コンポーネントでもシンプルにstate管理（stateの操作）やライフサイクルメソッドに相当する処理を書けるようになる機能です。
React を使っていると、ライフサイクルメソッドに無関係な様々なロジックが混在するといった状態になりがちですが、Hooks を使えば、関連するロジックに基づいて、1 つのコンポーネントを複数の小さな関数に分割することができます。また、state を持ったロジックをコンポーネントから抽出して、再利用したりすることができます。
今、良くわからなくても問題ありません。
React Hooks は、Reactの機能の一部なので、React Hooks を学ぶためにはReactの基礎知識が必要ということがわかっていればOK。
【React入門者向け】UdemyでReactを学べるおすすめ講座3選
本記事で紹介しきれない優良コースもたくさんあるので、ご自身でもUdemy Reactコース一覧
から探してみてください！！
モダンJavaScriptの基礎から始める挫折しないためのReact入門
| コース時間 | 6時間 |
| 評価 | ☆4.6（2021/09/07現在） |
| 受講者数 | 5,669人（2021/09/07現在） |
| 講師 | SIerで基幹システム等を経験した後、フリーランスとして独立。 現在はフロントエンド周りの技術を軸にプロダクト開発、カイゼンを支援している。 |
| 対象者 | 基本的なHTML/CSS/JavaScriptの知識がある人 |
コース内容
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を勉強していこうと思います。
正直なところスクールの教材だけでは頭に入ってこず、調べようにもどこから調べたらいいのだろうという状態でこちらの講座に出会いました。
モダンJSについてや初めて聞く単語も解説してくれていて、よく使うJSについても教えて頂けてありがたかったです。
React初学者は必修なのでは？と思います！
じゃけぇさん、ありがとうございました。
こんな方におすすめ
- JavaScriptに不安はあるけど、Reactにも挑戦したい人
- Reactの学習を１度挫折した人
- 近代JavaScriptを学びつつフレームワークやライブラリも習得したい人
↓↓↓コースの一部が無料公開されているので、確認してみてください！！↓↓↓
| コース時間 | 7時間 |
| 評価 | ☆4.0（2021/09/07現在） |
| 受講者数 | 9,153人（2021/09/07現在） |
| 講師 | 組み込みソフトウェア、SMSCサーバ、DSP、ウェブアプリケーションなど 幅広い開発経験のあるエンジニア。 |
| 対象者 | HTML、CSS、JavaScript、gitの基礎的な知識がある人向け |
コース内容
プログラミング習得のための最大の近道は、「とにかく書いて動かすこと！」というのが私の信念です。ReactとReduxの習得の学習コストは高いと言われていますが、 とにかく、コードを書いて、その挙動を目で確認しながら、まるでゲームをしているかのごとく体得してもらうことが最も効率的だと私は考えており、このコースの内容もその信念に基づいて設計しています。
本コースの中では受講生の皆様に外部サーバと連携するアプリケーションを開発して頂きます。それはいわゆるCRUDアプリケーションで自在に外部のRESTful APIサーバと連携しながらデータを外部サーバに永続化できる実用的なアプリケーションで現実世界にもよく見かける形態の一つですので、実際の業務にも応用できる技術と言えます。
こんなアプリケーションの実装について興味を持たれた方は是非本コースをご受講ください。
また、何か問題が起きた場合もご安心ください。UdemyではQ&Aを通じて講師と共にその問題を解決しながらコースに取り組んで頂ける仕組みがあります。是非この仕組も十分に活用頂き本コースを通じて皆様の成長のために貢献できるよう頑張ります！
細かなところまで深堀りして説明されていたので、スムーズに理解でき、記憶にも定着しやすいなと感じました。
JavaScript を普通に読み書きできる人にとってはちょうど良いレベル感の内容だと思います。
また、おまけではありますがReactのUIフレームワークのmaterial-uiは本講座で初めて知りました。非常に便利なuiフレームワークのようなので、こちらについても勉強して実際に取り入れて見たいです！
こんな方におすすめ
- モダンなフロントエンド開発の知識を身に付けたい人
- jQueryの使用経験はあるがReactの使用経験はなく、Reactを身に着けたい人
- Reactを使用したウェブアプリケーションの開発経験はあるが複雑なUIの実装経験は無い人
- Reduxによる状態の管理の方法を学びたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください！！↓↓↓
Modern React with Redux
こちらの講座は英語です。日本語字幕もありますが、全ての動画にあるわけではありません。
| コース時間 | 52時間 |
| 評価 | ☆4.7（2021/09/07現在） |
| 受講者数 | 242,511人（2021/09/07現在） |
| 講師 | サンフランシスコの企業向けにフロントエンド開発をしてきたトップエンジニア |
| 対象者 | JavaScriptの基礎的な知識がある人向け |
英語の講座ですが、圧倒的に質が高く内容が濃いです！
省略すること無く、React, Reduxの各トピックを丁寧に解説してくれています。この講座を受ければ他の教材は不要なくらい、必要なトピックを網羅しています。
さらに定期的にアップデートされていて、React, Reduxの新機能（Hooksとか）も反映してくれています。
字幕付き、画面を映しながらの解説なので英語が堪能でなくても理解できると思います。余裕がある人、英語の苦手意識がない人は挑戦してみてください。
コース内容
丁寧な説明と多くの実用的な例を挙げながら、Reactで動的なWebアプリを構築するための基礎を学んでいきます。
ReactとReduxの各機能をしっかりと身につけれるように、段階的に学んでいけるようなトピック設計になっています。
- JSX, state, propsなどのReactの基本的な機能をマスターする
- 再利用可能なコンポーネントの作り方を理解する
- Reduxが裏でどんなことをやっているのかを理解する
- 演習で理解度確認、スキルを磨く
- 人気のスタイリングライブラリを使って、キレイなアプリを作成する
- デプロイ方法を学ぶ
- コンポーネントの構成とUIを構築する手法を学ぶ
こんな方におすすめ
- 徹底的にReactを学びたい・マスターしたい人
- 色々教材を買いたくない、1つの教材で済ませたい人
- jQueryから脱却してエンジニアとしてレベルアップしたい人
- React/Reduxに挫折した人
↓↓↓コースの一部が無料公開されているので、確認してみてください！！↓↓↓
【React基礎知識が付いたら】UdemyでReact Hooksを学べるおすすめ講座2選
React への入門を終えて、基礎知識が付いた方におすすめ！！
React Hooks を使いこなして、レベルアップしましょう！
React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
| コース時間 | 9時間 |
| 評価 | ☆4.6（2021/09/07現在） |
| 受講者数 | 4,596人（2021/09/07現在） |
| 講師 | 組み込みソフトウェア、SMSCサーバ、DSP、ウェブアプリケーションなど 幅広い開発経験のあるエンジニア。 |
| 対象者 | Reactの基礎知識がある人向け |
コース内容
導入方法ももちろんですし、実践的な使い方について、手を動かしながら学習します。僕のコースは基本パワーポイントとかでで概要とか概念の概略の説明などは一切しません。というのも、パワポの資料作成とそれによるプレゼンテーションは費用対効果が低いんですよね、なので、机上の理論よりも、簡単に口頭で概要をお伝えして、その後すぐ、エディターを開いて手を動かして目で動作を確認するというスタイルで進めていきます。僕に言わせると、プログラミングは、スポーツをやっているような感覚に近いです。まぁとにかくですね、手をガンガン動かしていくんで、楽しんでいきましょう！ということですね。
他にも、React Hooksとの今後の付き合い方について学びます。これはかなり抽象的に書いていますけれども、要するに、 Hooksを使うと、今までのクラスコンポーネントにあまり依存しないコンポーネントを実装することになります。何故かと言うと、今まではファンクショナルコンポーネントとクラスコンポーネントの2つがあったわけなんですけれどもその2つの違いの1つに、状態を持たせるかどうかというのがありました。Hooksが出てからはですね、今までのファンクショナルコンポーネントというのはファンクションコンポーネントという名前に変わりました。これ、名前が変わっただけじゃなくて何が起きたのかと言うと、状態がもてるようになったんですね。ということはどういうことかというと、ファンクションコンポーネントとクラスコンポーネントとの実質的な違いというのがなくなってきたんですよね。なので、コンポーネントを実装しょうとしたときに、どっちのコンポーネントで実装しようかと考えてきたと思いますけれども、今後は、hooksによって機能拡張がなされたことで、ファンクションコンポーネントを書く機会が増えると思います。本コースでもクラスコンポーネントは一切実装しません。クラスコンポーネントに依存しなくても状態を持つアプリケーションは十分に実装できるということを本コースで学んでいただければいいかなと思います。
メンテナンス性についても触れていきます。これは、Hooksだからということではないんですけれども、僕のコーディングスタイルは、動いたら終わり！というようなコーディンすは一切しません。みなさんが、コース終了後に、もっと大規模なアプリケーション開発をする際にきっと役に立つであろうコンポーネントの細分化だったり、定数の定義だったり、とにかく、性質の異なるものは、モジュールという単位で分割してコードの見通しを良くすると言ったプログラマに備わっている慣習について意識しながらコーディングを進めていきますのでまだ、現場でコードを書いたことがない！という方には是非この辺りのコーディングの慣習について学んで頂けたら良いんじゃないかなと思います。
最後に、これはまぁおまけみたいなものなんですが、Bootstrapですね。本コースはHooksのコースなのでスタイリングに時間をかけるつもりはないんですが、とはいえ、見た目も最低限は必要かなということでBootstrapを採用しています。 ReactアプリケーションへのBootstrapの適用についても解説していますので興味のある方はぜひ一緒にやっていきましょう。
次にソースコードについてですが、本コースで動画の中で実装したソースコードは、GitHubに完全公開していますので、自分の書いた内容と照合したいときなどに是非お使いいただければとおもいます。
もし、コースを進めていて、動画の通りにやってみたけれども、うまく行かない！という時には、Q&Aのページがありますので、遠慮なくご質問ください。僕の肌感では、どうも、質問をするのが恥ずかしいとか、周りに質問の内容をみられるのがいやだとか、あるいは、初歩的な質問になるから恐縮してしまうといったような受講生の方が非常に多いんじゃないかと感じています。僕のプロフィールページにも、書いていますが、「聞くは一時の恥聞かぬは一生の恥」ということですね。とにかく、遠慮しないでガンガンぶつかってきてください！そもそも、知らないことを学ぶためにコースを受講しているわけですし、受講料をお支払い頂いているわけですから、ちょっと遠慮するところが間違っていますよ！と僕は言いたいです。というわけで、Q&A、どんどん活用してください。
「動けばいい」ではなく、正常に動いたあとのリファクタリングの考え方は右も左も分からない未経験、初学者には分からない領域ですので大変参考になるかと思います。
単に正しい構文を入力していくだけでなく、起こりがちなエラーも交えて解説されています。
まず動作させるために平たくコードを書いてから、リファクタリングをしていくという流れを通して、実務で活かせるより良い構成、コードを書くためのヒントを多く学ぶことができました。
失敗してから書き直すという流れもWhyと結びついて頭に入ってきやすかったです。
こんな方におすすめ
- なぜそうなるのか、どこがどこに作用するのか、実装していく一連の流れを細かく紐解きながら学びたい人
- Q&A で気軽に講師に質問しながら学びたい人
- ついでにReactへのBootstrapの適用方法も学びたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください！！↓↓↓
| コース時間 | 2時間 |
| 評価 | ☆4.6（2021/09/07現在） |
| 受講者数 | 948人（2021/09/07現在） |
| 講師 | Daiz academy。 業務後や土日など限られた時間の中で最短・最速で学べるコースを配信している。 |
| 対象者 | Reactに慣れている、初学者以上（Reactを学びたての人には少し辛いかも） |
コース内容
React Hooksの導入によってReactでのアプリケーション開発は大きく変わりました。
今までステート管理やライフサイクルメソッドの導入にはクラスコンポーネントが必須でしたが、
React Hooksによってそれぞれの機能を関数コンポーネントに移植することができるようになりました。
また、従来グローバルステート管理にはRedux等のサードモジュールが使われていましたが、
React Hooksによりサードパーティに頼らないグローバルステート管理をすることができるようになりました。
このように、16.8以降Reactの開発手法は大きくアップデートされています。
2020年、最新のReact開発方法を学び、より良いアプリケーションを作成していきましょう。
本講義では、React Hooksの機能を一つ一つ例題を持って学んでいきます。
実際に手を動かしてアプリを作成することで、表面的な知識では無く
現場で使える本質的な知識が身につきます。
また、本講義では従来のクラスコンポーネントと比較することで、
クラスコンポーネントと関数コンポーネント両方での書き方、
そして、React Hooksを導入するメリットを比較することで体感できるようになっています。
本講義では、PromiseやAsync Awaitによる外部APIとの連携などを行うレクチャーもあり、
Javascriptの知識も同時に身に付けることができます。
わからないことがあった場合はQ&Aを通じて一緒に解決していきましょう！
全力で皆様の学習を手助けできるように頑張ります。
一緒にReact Hooksを学習していきましょう！
特にクラスと関数コンポーネントの比較があったのは良かった。
useMemoあたりで、パフォーマンス改善の解説もあったのも、有意義な内容だった。
2回目の視聴では、実装しながら、手元で確認してみようと思う。
こんな方におすすめ
- Reactに慣れており、テンポ良くReact Hooks について学びたい人
- クラスコンポーネントと関数コンポーネントを比較しながらReact Hooks を学びたい人
テンポ良く、サクサク進んでいくので、ある程度Reactに慣れている人におすすめ
↓↓↓コースの一部が無料公開されているので、確認してみてください！！↓↓↓
以上、Udemyで React / React Hooksを学べるおすすめ講座5選でした。
本記事で紹介しきれない優良コースもたくさんあるので、ご自身でもUdemy Reactコース一覧から探してみてください！！
Reactの独学に限界を感じたら？
独学に限界を感じたらプログラミングスクールを利用するのも手です。
プログラミングスクールでモダンなフロントエンドを学べるところが無いと思っている人もいるかもしれませんが、CodeShip
ならVue.jsやReactといったモダンなフロントエンドスキルを身に着けることが可能です。
CodeShipはZoomを使ったオンライン授業スタイルで現役エンジニアからモダンなフロントエンド技術を学ぶことができます。
おすすめポイント
- プランは４ヶ月と６ヶ月プランがあり、無償延長制度あり
- ４ヶ月で分割払いの場合、月々13,400円
- 無料体験可能
- コンテンツに不満がある場合は中途解約、返金対応
もし独学に限界を感じていたら、気軽に無料体験から始めみましょう。
| 受講スタイル | オンライン少人数制個別指導 |
| 料金 | ４ヶ月：３５万円（税抜） ６ヶ月：６０万円（税抜） ※ 分割払い可能、４ヶ月の場合月々１３，４００円〜（３６回） |
| 学習領域 | HTML / CSS / JavaScript / React / Vue.js / PHP / Laravel / Ruby / Rails / Python / Flask / C# / Unity |
| サポート内容 |
|