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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本講義では、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を学習していきましょう！