Udemy

【厳選】Udemyで React / React Hooksを学べるおすすめ講座5選

大きなチャンスのためのビッグセール.

自己紹介

フリーランスエンジニアをしているヨノと申します。

独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、2018年からフリーランスエンジニアとして活動しています。

主にバックエンド中心の案件を獲っていますが、たまにはフロントエンドも。
主な使用言語・FWは、Ruby/Rails/Go言語/JavaScript/TypeScript/React/Vue.js

プログラミングを勉強するときに教材選びに困ることって多いと思います。
私も独学していたときそうでした...

なので、今回は「Reactを学びたい」、「Reactのスキルアップをしたい」けど

  • 「どんな教材を選べば良いかわからない...」
  • 「自分のスキルにあった教材を知りたい!!」

といった疑問をお持ちの方に、UdemyでReactの基礎やReact Hooksを学べるおすすめコースを紹介していきます!!

Udemyとは?

Udemyとは色んな分野のトップ講師の講座動画を購入できるプラットフォームで、特に「プログラミング」の分野は講座数が多くて充実しています。

Udemyの特徴

  • PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
  • 講師に質問でき、他の人の質問とその回答も見れる
  • スマホでも見れるので、スキマ時間を活用できる
  • 復習として2周目、3周目するときは倍速再生を使うことで効率よく学べる
  • 満足できなかった場合、30日以内であれば返金してくれる

満足できなければ返金してもらえるので、少しでも気になる講座があれば、どんどん受講してスキルアップできるわけです!!

参考Udemyは独学でのプログラミング学習におすすめ

React/Reduxとは?

Reactとは、SPA(シングルページアプリケーション)を作りやすくしてくれるJavaScriptライブラリ。
SPAとは、ページ遷移することなく単一ページで構成されているアプリケーションのこと。

例えば、Reactを使えば次のような機能を簡単に作ることができます↓↓↓

Reactを使えばこんな機能も簡単

  • テキストエリアに入力したら、ページ遷移せずに隣にプレビューが表示される
  • テキストをクリックしたら入力フォーム(編集モード)に切り替わる
  • 商品をカートに入れると、ページ遷移せずに合計金額が表示される

Reduxとは、Reactに特化した状態管理をしてくれるライブラリ。
サーバーからAPIで取得したデータを保存しておいたり、ユーザーが操作した内容を保存しておいたりできます。

ECサイトで例えると次のようなイメージです。

  • サーバーから取得した商品データをReduxに保存して、Reactで表示
  • ユーザーが選択した商品と購入数をReduxに保存して、Reactで合計金額を表示
  • 購入ボタンをクリックしたら、Reduxに保存している商品と購入数をサーバーに送信する

参考JavaScript初心者向け関連ツール・技術まとめ

React Hooks とは?

React Hooks(フック)React 16.8 から導入された機能。
useStateuseEffect などの関数がReact Hooks にあたります。

簡単に言うと、関数コンポーネントでもシンプルにstate管理(stateの操作)やライフサイクルメソッドに相当する処理を書けるようになる機能です。

React を使っていると、ライフサイクルメソッドに無関係な様々なロジックが混在するといった状態になりがちですが、Hooks を使えば、関連するロジックに基づいて、1 つのコンポーネントを複数の小さな関数に分割することができます。また、state を持ったロジックをコンポーネントから抽出して、再利用したりすることができます。

今、良くわからなくても問題ありません。React Hooks は、Reactの機能の一部なのでReact Hooks を学ぶためにはReactの基礎知識が必要ということがわかっていればOK。

【React入門者向け】UdemyでReactを学べるおすすめ講座3選

本記事で紹介しきれない優良コースもたくさんあるので、ご自身でも探してみてください!!

UdemyのReact講座一覧icon

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

モダンJavaScriptの基礎から始める挫折しないためのReact入門
コース時間6時間
評価☆4.5(2022/11/12現在)
受講者数16,396人(2022/11/12現在)
講師SIerで基幹システム等を経験した後、フリーランスとして独立。
現在はフロントエンド周りの技術を軸にプロダクト開発、カイゼンを支援している。
対象者基本的なHTML/CSS/JavaScriptの知識がある人

Udemyでこの講座の詳細をみるicon

講座内容

これから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を使用し仕事をしているエンジニアです(フリーランス→会社設立)
  • 学習には息抜きも必要なのでセクションの合間に私の経験やフロントエンド周りの雑談も含まれたりしています
  • コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます
  • 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)
ユーザー


私のフロントエンドのスキルレベルは、

HTML/CSSの基本的な要素は理解して、ソラで書ける。

Javascriptは昔の知識のまま止まっている。jQueryは一応使える。

SPAは全く経験がない。

という状況で受講してみた結果、非常に理解しやすく、ふつうのJavascriptエンジニアがReactの取っ掛かりを掴むには最適な内容であると思いました。

雑談も周辺知識として非常に価値のある内容でした。

ユーザー

JavaScript でのサンプル作成から入るので React との比較がとても分かりやすかったです。JSの記法についても解説しながら進めてもらえているので詰まるところもありませんでした。記述も TypeScript を使わないので、React の基本の学習に集中できたのがとても良かったです。

ユーザー

過去、JSの基礎知識が固まっていない状態で、書籍でいきなりReactの勉強を始め、挫折しました。

そういった背景から、今回も挫折するのでは?と不安な気持ちと期待を胸に受講を始めました。

実際に受講してみると、こちらの講座ではJSの基礎から順序建ててReactの仕組みを学べるようになっているので、最後まで挫折せず、且つ、楽しみながら学べました!

今後、Reactの勉強をはじめようとしている方が周りにいたら、こちらの講座を受けることをまずオススメしたいです!

こんな方におすすめ

  • JavaScriptに不安はあるけど、Reactにも挑戦したい人
  • Reactの学習を1度挫折した人
  • 近代JavaScriptを学びつつフレームワークやライブラリも習得したい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

Udemyでこの講座の詳細をみるicon


フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
コース時間7時間
評価☆4.0(2022/11/12現在)
受講者数10,085人(2022/11/12現在)
講師組み込みソフトウェア、SMSCサーバ、DSP、ウェブアプリケーションなど
幅広い開発経験のあるエンジニア。
対象者HTML、CSS、JavaScript、gitの基礎的な知識がある人向け

Udemyでこの講座の詳細をみるicon

講座内容

本コースでは、フロントエンドUser Interface開発のためJavaScriptのライブラとして多くの開発者に支持されているReactを題材にし、実際にコーディングを進めながらReactプログラミング技術を習得するという内容になっています。 また、よくReactとセットで用いられる状態管理のためのライブラリであるReduxについても学んで頂けるコースとなっています。

プログラミング習得のための最大の近道は、「とにかく書いて動かすこと!」というのが私の信念です。ReactReduxの習得の学習コストは高いと言われていますが、 とにかく、コードを書いて、その挙動を目で確認しながら、まるでゲームをしているかのごとく体得してもらうことが最も効率的だと私は考えており、このコースの内容もその信念に基づいて設計しています。

本コースの中では受講生の皆様に外部サーバと連携するアプリケーションを開発して頂きます。それはいわゆるCRUDアプリケーションで自在に外部のRESTful APIサーバと連携しながらデータを外部サーバに永続化できる実用的なアプリケーションで現実世界にもよく見かける形態の一つですので、実際の業務にも応用できる技術と言えます。

こんなアプリケーションの実装について興味を持たれた方は是非本コースをご受講ください。

また、何か問題が起きた場合もご安心ください。UdemyではQ&Aを通じて講師と共にその問題を解決しながらコースに取り組んで頂ける仕組みがあります。是非この仕組も十分に活用頂き本コースを通じて皆様の成長のために貢献できるよう頑張ります!

では、本コースでお会いできるのを楽しみにしております!

ユーザー

React, Redux の基礎知識, 実際のアプリケーションに当てはめたときの使い方などがよく理解できました。
細かなところまで深堀りして説明されていたので、スムーズに理解でき、記憶にも定着しやすいなと感じました。

JavaScript を普通に読み書きできる人にとってはちょうど良いレベル感の内容だと思います。

ユーザー

Reactの基礎を軽く学び、Reduxを用いた状態管理の手法を実際にCRUDアプリケーションを作成しながら、学ぶことができ非常にわかりやすかったです!

また、おまけではありますがReactのUIフレームワークのmaterial-uiは本講座で初めて知りました。非常に便利なuiフレームワークのようなので、こちらについても勉強して実際に取り入れて見たいです!

ユーザー

Reactの学び直しということで、チャレンジしました。

すごくわかりやすく、JavaScriptの書き方も無駄のない書き方が

推奨されていて、大変いいトレーニングになりました。

Redux を使ってみて、VueXに似た面白いものだと思いましたが、

React 16.3 以降では、React が Redux を不要とする機能強化をした

事にも触れられていて、有意義な講座でした。

4年前のバージョンと、現在のバージョンの違いはありますが、

これもやりながら理解を深められますので、基礎固めには最適な

講座です!!

こんな方におすすめ

  • モダンなフロントエンド開発の知識を身に付けたい人
  • jQueryの使用経験はあるがReactの使用経験はなく、Reactを身に着けたい人
  • Reactを使用したウェブアプリケーションの開発経験はあるが複雑なUIの実装経験は無い人
  • Reduxによる状態の管理の方法を学びたい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

Udemyでこの講座の詳細をみるicon


Modern React with Redux

Modern React with Redux
コース時間52時間
評価☆4.7(2022/11/12現在)
受講者数276,146人(2022/11/12現在)
講師サンフランシスコの企業向けにフロントエンド開発をしてきたトップエンジニア
対象者JavaScriptの基礎的な知識がある人向け

英語の講座ですが、圧倒的に質が高く内容が濃いです!省略すること無く、React, Reduxの各トピックを丁寧に解説してくれています。この講座を受ければ他の教材は不要なくらい、必要なトピックを網羅しています。

さらに定期的にアップデートされていて、React, Reduxの新機能(Hooksとか)も反映してくれています。
字幕付き、画面を映しながらの解説なので英語が堪能でなくても理解できると思います。余裕がある人、英語の苦手意識がない人は挑戦してみてください。

Udemyでこの講座の詳細をみるicon

講座内容

このコースでは、ReactとReduxを理解しやすいように、たくさんの図を使いながら解説していきます。ReactとReduxどちらの知識がなくても大丈夫です。
丁寧な説明と多くの実用的な例を挙げながら、Reactで動的なWebアプリを構築するための基礎を学んでいきます。

ReactとReduxの各機能をしっかりと身につけれるように、段階的に学んでいけるようなトピック設計になっています。

  • JSX, state, propsなどのReactの基本的な機能をマスターする
  • 再利用可能なコンポーネントの作り方を理解する
  • Reduxが裏でどんなことをやっているのかを理解する
  • 演習で理解度確認、スキルを磨く
  • 人気のスタイリングライブラリを使って、キレイなアプリを作成する
  • デプロイ方法を学ぶ
  • コンポーネントの構成とUIを構築する手法を学ぶ

こんな方におすすめ

  • 徹底的にReactを学びたい・マスターしたい人
  • 色々教材を買いたくない、1つの教材で済ませたい人
  • jQueryから脱却してエンジニアとしてレベルアップしたい人
  • React/Reduxに挫折した人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

Udemyでこの講座の詳細をみるicon

【React基礎知識が付いたら】UdemyでReact Hooksを学べるおすすめ講座2選

React への入門を終えて、基礎知識が付いた方におすすめ!!

React Hooks を使いこなして、レベルアップしましょう!

React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得

React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
コース時間9時間
評価☆4.7(2022/11/12現在)
受講者数5,945人(2022/11/12現在)
講師組み込みソフトウェア、SMSCサーバ、DSP、ウェブアプリケーションなど
幅広い開発経験のあるエンジニア。
対象者Reactの基礎知識がある人向け

Udemyでこの講座の詳細をみるicon

講座内容

本コースでは、React Hooksについて学びます。

導入方法ももちろんですし、実践的な使い方について、手を動かしながら学習します。僕のコースは基本パワーポイントとかでで概要とか概念の概略の説明などは一切しません。というのも、パワポの資料作成とそれによるプレゼンテーションは費用対効果が低いんですよね、なので、机上の理論よりも、簡単に口頭で概要をお伝えして、その後すぐ、エディターを開いて手を動かして目で動作を確認するというスタイルで進めていきます。僕に言わせると、プログラミングは、スポーツをやっているような感覚に近いです。まぁとにかくですね、手をガンガン動かしていくんで、楽しんでいきましょう!ということですね。

他にも、React Hooksとの今後の付き合い方について学びます。これはかなり抽象的に書いていますけれども、要するに、 Hooksを使うと、今までのクラスコンポーネントにあまり依存しないコンポーネントを実装することになります。何故かと言うと、今まではファンクショナルコンポーネントとクラスコンポーネントの2つがあったわけなんですけれどもその2つの違いの1つに、状態を持たせるかどうかというのがありました。Hooksが出てからはですね、今までのファンクショナルコンポーネントというのはファンクションコンポーネントという名前に変わりました。これ、名前が変わっただけじゃなくて何が起きたのかと言うと、状態がもてるようになったんですね。ということはどういうことかというと、ファンクションコンポーネントとクラスコンポーネントとの実質的な違いというのがなくなってきたんですよね。なので、コンポーネントを実装しょうとしたときに、どっちのコンポーネントで実装しようかと考えてきたと思いますけれども、今後は、hooksによって機能拡張がなされたことで、ファンクションコンポーネントを書く機会が増えると思います。本コースでもクラスコンポーネントは一切実装しません。クラスコンポーネントに依存しなくても状態を持つアプリケーションは十分に実装できるということを本コースで学んでいただければいいかなと思います。

メンテナンス性についても触れていきます。これは、Hooksだからということではないんですけれども、僕のコーディングスタイルは、動いたら終わり!というようなコーディンすは一切しません。みなさんが、コース終了後に、もっと大規模なアプリケーション開発をする際にきっと役に立つであろうコンポーネントの細分化だったり、定数の定義だったり、とにかく、性質の異なるものは、モジュールという単位で分割してコードの見通しを良くすると言ったプログラマに備わっている慣習について意識しながらコーディングを進めていきますのでまだ、現場でコードを書いたことがない!という方には是非この辺りのコーディングの慣習について学んで頂けたら良いんじゃないかなと思います。

最後に、これはまぁおまけみたいなものなんですが、Bootstrapですね。本コースはHooksのコースなのでスタイリングに時間をかけるつもりはないんですが、とはいえ、見た目も最低限は必要かなということでBootstrapを採用しています。 ReactアプリケーションへのBootstrapの適用についても解説していますので興味のある方はぜひ一緒にやっていきましょう。

次にソースコードについてですが、本コースで動画の中で実装したソースコードは、GitHubに完全公開していますので、自分の書いた内容と照合したいときなどに是非お使いいただければとおもいます。

もし、コースを進めていて、動画の通りにやってみたけれども、うまく行かない!という時には、Q&Aのページがありますので、遠慮なくご質問ください。僕の肌感では、どうも、質問をするのが恥ずかしいとか、周りに質問の内容をみられるのがいやだとか、あるいは、初歩的な質問になるから恐縮してしまうといったような受講生の方が非常に多いんじゃないかと感じています。僕のプロフィールページにも、書いていますが、「聞くは一時の恥聞かぬは一生の恥」ということですね。とにかく、遠慮しないでガンガンぶつかってきてください!そもそも、知らないことを学ぶためにコースを受講しているわけですし、受講料をお支払い頂いているわけですから、ちょっと遠慮するところが間違っていますよ!と僕は言いたいです。というわけで、Q&A、どんどん活用してください。

ユーザー

なぜそうなるのか、どこがどこに作用するのか、実装していく一連の流れを細かく紐解きながら解説されています。

「動けばいい」ではなく、正常に動いたあとのリファクタリングの考え方は右も左も分からない未経験、初学者には分からない領域ですので大変参考になるかと思います。

単に正しい構文を入力していくだけでなく、起こりがちなエラーも交えて解説されています。

ユーザー

ひとつひとつのhookの役割や使い方をドキュメントをもとに解説したあとに、実践でアプリケーション内で具体的にどのように使うのかを体験できたのでとても役に立った。受講前からuseStateやuseEffectは使ったことがあったのだが、useContext、useReducerはよく理解してなかったので、それらについても学べて良かった。

ユーザー

実務でReact Hooks + Redux を導入しましたが、復習とより効率の良い書き方がないかと思い、受講しました。

まず動作させるために平たくコードを書いてから、リファクタリングをしていくという流れを通して、実務で活かせるより良い構成、コードを書くためのヒントを多く学ぶことができました。

失敗してから書き直すという流れもWhyと結びついて頭に入ってきやすかったです。

こんな方におすすめ

  • なぜそうなるのか、どこがどこに作用するのか、実装していく一連の流れを細かく紐解きながら学びたい人
  • Q&A で気軽に講師に質問しながら学びたい人
  • ついでにReactへのBootstrapの適用方法も学びたい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

Udemyでこの講座の詳細をみるicon


最短・最速で学ぶ React Hooks 完全ガイド!基礎〜応用編 最新のReact開発+ステート管理をマスターしよう!

最短・最速で学ぶ React Hooks 完全ガイド! 現場で使えるReact開発+ステート管理をマスターしよう!
コース時間2時間
評価☆4.6(2022/11/12現在)
受講者数1,098人(2022/11/12現在)
講師Daiz academy。
業務後や土日など限られた時間の中で最短・最速で学べるコースを配信している。
対象者Reactに慣れている、初学者以上(Reactを学びたての人には少し辛いかも)

Udemyでこの講座の詳細をみるicon

講座内容

本講義では、React 16.8から導入されたReact Hooksについて一から学習していきます。

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を学習していきましょう!

ユーザー

ステート管理含め丁寧でわかりやすかったです。

特にクラスと関数コンポーネントの比較があったのは良かった。

ユーザー

useRef,useMemo,useCallback等、使いどころや挙動を理解することが出来ました。ReactHooksで実際の開発を行う上で必要となる土台を作ることができました。ありがとうございました。

ユーザー

後半のHooksは知らないものが多かったので、使い方、実用例含め、とても参考になった。
useMemoあたりで、パフォーマンス改善の解説もあったのも、有意義な内容だった。
2回目の視聴では、実装しながら、手元で確認してみようと思う。

こんな方におすすめ

  • Reactに慣れており、テンポ良くReact Hooks について学びたい人
  • クラスコンポーネントと関数コンポーネントを比較しながらReact Hooks を学びたい人

↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓

Udemyでこの講座の詳細をみるicon


以上、Udemyで React / React Hooksを学べるおすすめ講座5選でした。

本記事で紹介しきれない優良コースもたくさんあるので、ご自身でも探してみてください!!

UdemyのReact講座一覧icon


イチオシ記事

1

自己紹介 フリーランスエンジニアをしているヨノと申します。 独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、2018年からフリーランスエンジニアとして活動しています。 主にバックエンド中 ...

2

はじめまして、フリーランスエンジニアのヨノと申します。 自己紹介 独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、2018年からフリーランスエンジニアとして活動しています。 主にバックエ ...

3

ネット上で色々言われているフリーランスエンジニア....。「本当はどうなの?」と思っている人は多いでしょう。 そこで本記事ではフリーランスエンジニア5年生の私が、ネット上の意見も引用しながら実態を解説 ...

-Udemy