はじめまして、ヨノと申します。
私は、大学時代に独学でプログラミングを学び、ソシャゲ・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コース一覧
から探してみてください！！
| コース時間 | 6時間 |
| 評価 | ☆4.5（2020/10/10現在） |
| 受講者数 | 784人（2020/10/10現在） |
| 講師 | フリーのフロントエンジニア。 React 公式チュートリアル、Redux ドキュメント等の翻訳を担当。 |
| 対象者 | 超基礎的なJavaScriptの知識がある人向け |
コース内容
コースの流れは、React, ES2015+について解説してReactのみでToDoアプリケーションを実装する。
その後、ajax, Reduxについての解説があり、React+Reduxで外部APIと連携したアプリケーションを実装していくといったものになっています。
CodeSandboxを使って環境構築を省略していることもあり、短時間で必須知識を学べ、実際に手を動かしながら複数のサンプルアプリケーションの実装を体験できる講座になっています。
このコースだけの知識では実務エンジニアになるためには足りませんが、それでも一旦React エンジニアへの道筋をつけることができるでしょう！！
他の講義では最小の書き方、それに対する説明に対してES6の初歩的な部分を省いたり、逆に導入しすぎて複雑化していたため、自分が受けた講義の中ではトップクラスで分かりやすかった。
code sandboxの導入により、GUIからwebpackを使用する感覚を視覚的に掴むことができ、今後webpackを学習するときにスムーズに移行できた。
今所属している会社の先輩から教えていただいて購入したのですが、ものすごくわかりやすく、毎回の講義の終わりにまとめとして話すフローも最高に良いと思いました。
数あるReactの講座の中でもっともわかりやすく、丁寧だと思っています。
初心者向けの講座では最高の講座だと思いました。
それと同時にjsの講座も含めてもっと公開してほしいと思いました。
まだまだこの素晴らしい講師の方から学びまくりたいと思っています。
学校教育に向いている話し方、講座、時間のまとめかただと思いました。
本当に最高のコースです。
回し者ではなく、ユーデミーでめちゃくちゃ講座買ってますが、ここまでわかりやすかった講義はありません。
最高です。
こんな方におすすめ
- 短時間（6時間）でReactの全体像、雰囲気を把握したい人
- Reactを学ぶための最初の超入門教材を探している人
- ゴリゴリ React を書くことはないが、部分的にコーディングをする必要があるデザイナー
- フロントエンドの基礎を習得したいバックエンドエンジニア
↓↓↓コースの一部が無料公開されているので、確認してみてください！！↓↓↓
| コース時間 | 7.5時間 |
| 評価 | ☆4.1（2020/10/10現在） |
| 受講者数 | 6,556人（2020/10/10現在） |
| 講師 | 組み込みソフトウェア、SMSCサーバ、DSP、ウェブアプリケーションなど 幅広い開発経験のあるエンジニア。 |
| 対象者 | HTML、CSS、JavaScript、gitの基礎的な知識がある人向け |
コース内容
プログラミング習得のための最大の近道は、「とにかく書いて動かすこと！」というのが私の信念です。ReactとReduxの習得の学習コストは高いと言われていますが、 とにかく、コードを書いて、その挙動を目で確認しながら、まるでゲームをしているかのごとく体得してもらうことが最も効率的だと私は考えており、このコースの内容もその信念に基づいて設計しています。
本コースの中では受講生の皆様に外部サーバと連携するアプリケーションを開発して頂きます。それはいわゆるCRUDアプリケーションで自在に外部APIサーバと連携しながらデータを外部サーバに永続化できる実用的なアプリケーションで現実世界にもよく見かける形態の一つですので、実際の業務にも応用できる技術と言えます。
こんなアプリケーションの実装について興味を持たれた方は是非本コースをご受講ください。
細かなところまで深堀りして説明されていたので、スムーズに理解でき、記憶にも定着しやすいなと感じました。
JavaScript を普通に読み書きできる人にとってはちょうど良いレベル感の内容だと思います。
また、おまけではありますがReactのUIフレームワークのmaterial-uiは本講座で初めて知りました。非常に便利なuiフレームワークのようなので、こちらについても勉強して実際に取り入れて見たいです！
こんな方におすすめ
- モダンなフロントエンド開発の知識を身に付けたい人
- jQueryの使用経験はあるがReactの使用経験はなく、Reactを身に着けたい人
- Reactを使用したウェブアプリケーションの開発経験はあるが複雑なUIの実装経験は無い人
- Reduxによる状態の管理の方法を学びたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください！！↓↓↓
こちらの講座は英語です。日本語字幕もありますが、全ての動画にあるわけではありません。
| コース時間 | 52時間 |
| 評価 | ☆4.7（2020/10/10現在） |
| 受講者数 | 204,511人（2020/10/10現在） |
| 講師 | サンフランシスコの企業向けにフロントエンド開発をしてきたトップエンジニア |
| 対象者 | 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 を使いこなして、レベルアップしましょう！
| コース時間 | 9時間 |
| 評価 | ☆4.6（2020/12/31現在） |
| 受講者数 | 3,360人（2020/12/31現在） |
| 講師 | 組み込みソフトウェア、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.2（2020/12/31現在） |
| 受講者数 | 721人（2020/12/31現在） |
| 講師 | 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 |
| サポート内容 |
|