Reactが学べるスクール・講座

本稿ではReactを体系的に学べるプログラミングスクールとより安価に学べるUdemy講座を計4つご紹介します。本サイトでもReactについてはわかりやすい発信を心がけていますが、本サイトは恐縮ながら全く初めてReactを学ぶ方にとって体系的な内容とはなっておりません。また動画でReactを学びたい、あるいは基礎の基礎からReactを学びたいという方も多いと思いますので、そのような方には本稿を参考にして頂けると思います。

Reactを学ぶ前提

HTML・CSS・JavaScriptの3点、とくにJavaScriptが同様に重要です。ReactはHTML・CSSの延長ではなく、JavaScriptそのものです。JavaScriptの中でもとくにアロー関数、map関数、filter関数、三項演算子、オブジェクトの操作などは自在にできる必要があります。Reactに繋がるJavaScriptが学べる講座も本稿の後段でご紹介します。

お勧め講座1.インターネットアカデミーのReact講座

Reactをメニューに揃えるプログラミングスクールは、Progate、ドットインストール、Winなど幾つかありますが、Reactを妥協なカリキュラムで扱っているスクールは少なく、管理人がお勧めできるプログラミングスクールは2022年6月現在はインターネットアカデミーだけです。Progateとドットインストールは、サポートがないあるいは限定的で、かつlifetime accessがないので(購読をやめると教材にアクセスできない)、両者を選ばれるのであれば、後述のUdemyの講座をお勧めいたします。

いわゆるプログラミングスクールは動画の講座、メンターによるサポート(質問)、受講後のキャリア相談が、全てがフルセットとなって手厚く提供されます。私はインターネットアカデミーで学んだわけではなく、スクールを調査する中で本校を発見した訳ですが、Reactを熟知した本職エンジニアの方でないと本講座のカリキュラムは組めずサポートもできないと思います。以下、運営会社のインターネットアカデミーの概要の後に、Reactコースの概要を解説いたします。

インターネットアカデミーの概要

1995年に創業。創業当時からスクール業務とWeb制作業を営んでおり、Web制作会社(ITRA社)としては東京大学、ビデオリサーチ、朝日学生新聞社、独立行政法人情報処理推進機構(IPA)、銀座コージーコーナー、農林中金総合研究所など300件以上のWebサイトの受託開発・運用・保守実績があります。創業から3年の1998年には、Web人材紹介業も開始しています(ウェブスタッフ社)。スクールの講座はWeb系が充実しており、Web制作会社としての治験・ノウハウを活かした実践的なカリキュラムが大きな特徴です。また前述の通り、グループにWeb人材紹介会社も有していることから、スクール受講後のキャリアのサポートを受けることができるのも大きな特徴です。人材紹介機能を持つプログラミングスクール、あるいはスクール事業にあまり力の入っていない開発会社は多いですが、インターネットアカデミーの場合は、Web制作会社、Web人材紹介会社、Webスクールが三位一体です。講座数は全部で約30あり、下記のようにWeb系のプログラミング、Webデザイン、マーケティングの3つに分かれております。バックエンドの方は、下記左下にあるITエンジニア – Linuxのコースもとてもいいと思います。



インターネットアカデミーのReact講座の概要

続いてReact講座の概要を説明いたします。


本React講座の概要
  • 講座名:React講座
  • 受講形態:オンライン(オンデマンド)
  • 値段:189,200円
  • 言語:日本語
  • 授業類型時間:12-24時間(授業回数は6回)
  • 特徴:Reactの基礎から4つのプロジェクトを通じた実践までしっかり学べる
  • 特徴2:オンラインのライブ授業、マンツーマン、オンデマンド、フリーレッスンが融合
  • サポート:選任のキャリアプロデューサーが付き、就職・転職のサポートが得られる


特徴2に書いたマンツーマンとフリーレッスンは、無制限ではなく授業時間中(12-24時間の全6回)に限るなどの制約があるようなので、申込前に無料のカウンセリングを受講してよく確かめた方がいいと思います。無料カウンセリングの上、メンターやサポート機能が十分でないと感じられた場合は後述のUdemyの講座をお勧めいたします。本講座に劣らない品質にしてずっと安価です。

カリキュラムは次の通りで、前述の通りとても実践的な内容で妥協がないです。クラスコンポーネントは個人的には初学者には不要と考えているので、その点だけ気になりますが、クラスコンポーネントのセクションでは、props、ステート、イベンド、JSXなど関数コンポーネントと共通の事項を学ぶようなので決して無駄なカリキュラムではないです。また、プログラミングスクールでNext.jsとFirebase Firestoreが学べるプログラミングスクールは日本で唯一だと思います(2022年6月現在)。


Udemyの講座

インターネットアカデミーが高額で難しい方にはオンライン研修プラットフォームのUdemyをお勧めいたします。Udemyはプログラミングに限らず様々な講義が提供されています。Udemyの魅力は(1)講座数が多い(2)プログラミングスクールと比較すると安価(3)講座を買い切れる(lifetime access)の3点である一方、以前の記事「プログラミングを副業にする方法」でもご紹介した通り、Udemyは比較的緩い審査で講義を掲載できてしまうため品質にバラツキがあり、良質な講座を選びにくい点がネックです。また、講師によっては積極的な質問対応とサポートを提供していますが、大部分の講師はサポートを提供しておりません。

UdemyでReactの講座を選ぶ基準

Udemyで講義を選ぶ際のポイントは一般に受講者数と5段階で表示される受講者の評価です。評価が高く、かつ受講者数が多ければそれだけ多くの人に支持されいている講座と言えます。語学など多くの講座はこの方法で選ぶことができます。他方、Reactやプログラミングで講座を選ぶ際は、アップデートに講師が迅速に対応し動画を更新しているか否かという点も重要です。未更新の動画で学ぶと、講師の説明通りに手元で記述してもコードが動かないことがよくあります。例えばReactで複数ページを作るライブラリーであるRouterは、2021年10月にver5.0からver6.0に更新され、コードの書き方も大きく変わりました。受講者数と満足度は講座リリース以来の累積と平均で示されていると思われ、この例では、2021年10月以前の受講者数や満足度も含まれる値を参考にしてもいい講座を選べないということになります。

お勧め講座2.React Front To Back 2022

Udemyの英語のReact講座は非常に数が多く充実しています。私もこれまで幾つか受講しましたが、その中でもとくにお勧めの講座はReact Front To Back 2022です(2022年6月現在)。


本React講座の概要
  • 講座名:React Front To Back 2022
  • 講師:Brad Traversy
  • 受講者数:16,685人
  • 評価:4.7
  • 値段:12,000円
  • 言語:英語(聞き取りやすい)
  • 特徴:Reactの基礎から4つのプロジェクトを通じた実践までしっかり学べる
  • 動画類型時間:20時間
  • 更新:Reactライブラリーが更新される都度、講義動画を更新され、安心して学べる



カリキュラムは基礎、応用、グローバル状態管理、CSS、バックエンド、プロジェクトの6つの切り口でまとめると下記のようになります。


本React講座のカリキュラム
  • 基礎:Reactとは、JSXの概要、props・state、関数コンポーネント、usaState、useEffect
  • 応用:Router、fetch、useMemo、useCallback、カスタムフック
  • グローバル状態管理:Context、Redux
  • CSSフレームワーク:Tailwind CSS、(ほんの一部でbootstrap)
  • バックエンド:MERNスタック(MongoDB, Express, React, Node.js)、firebase、firestore
  • 主なプロジェクト:githubユーザー検索アプリ、不動産売買・賃貸ポータル

基礎の部分での大きな特徴は、関数コンポーネントでuseStateとuseEffectなどのフックスが自由に使えるようになって以来、意義が薄れつつあるクラスコンポーネントの説明を思い切って省いている点です。エンジニアとしての力量や幅を広げるという意味でクラスコンポーネントを学ぶ意義は大きいですが、実用性という観点では必要性が生じたときに学べば十分だと思います。応用ではuseMemoやuseCallbackそれにカスタムフックの説明を丁寧にされていて、グローバル状態管理では始めから難解なReduxを使うのではなく、前半のgithubプロジェクトではReactのContext APIを使っている点が初学者に優しいです。CSSでは2022年6月現在、Reactで最も使っている人が多いと思われるTailwindを使っている点がとても実務的でいいと思います。なお、Tailwindの講座ではないのでTailwindの使い方を初めから丁寧に解説されているわけではないです。バックエンドはReactで使う人が多いgoogleのfirebase・firestoreの他に、MERNスタックも丁寧に解説されている点がいいです。また、これらのテーマが全部で4つのプロジェクト(うち主要なプロジェクトは2つ)に沿って解説されている点もお勧めポイントです。あえてデメリットを挙げると、講義が英語である点と、全20時間と内容が充実しているので、なかなか最後まで終わらない点でしょうか。

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

Udemyの日本語のReact講座は数が少なく、1,000人以上の受講者で4.7評価を獲得している講座は本講座だけです(2022年6月現在)。4.7評価はお勧め2でご紹介したReact Front To Back 2022と同じです。


本React講座の概要
  • 講座名:Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
  • 講師:じゃけぇ(Takumi Okada)
  • 受講者数:12,600人
  • 評価:4.7
  • 値段:4,900円
  • 言語:日本語
  • 特徴:Reactの応用、TypeScript、実践的なアプリまでしっかり学べる。Reactが全く初めての方は後述の同じ講師の入門講座の受講を推奨
  • 動画類型時間:8時間
  • 更新:講師はもちろんライブラリーのアップデートをフォローされているが、その旨の注意にとどまり、必ずしも動画を更新されわけではない


カリキュラムは次の通りです。Reatの有力なバックエンド(MERN、firebase、又はNext.js)はばっさり切る一方で、TypeScriptを扱っている点が大きな特徴です。 また、グローバルのステート管理ツールでRecoilを紹介されているところに講師岡田さんのセンスを感じます。Recoilの魅力については私のこちらの記事「Recoilの仕組みと使い方」もご覧ください。やや残念な点はRouterの動画をver5.0からver6.0にアップデートされていない点です(2022年6月現在)。また本講座は基礎の部分がございません。Reactが全く初めての方は後述の岡田講師のReactの入門講座とセットで受講されることをお勧めいたします。


本React講座のカリキュラム
  • 応用:Atomic Design、Router、useMemo、useCallback、カスタムフック、TypeScipt
  • グローバル状態管理:Context、Recoil
  • CSSフレームワーク:Styled JSX, styled components, Emotion, Chakura UI
  • バックエンド:なし(JSON Placeholderを使用)
  • 主なプロジェクト:ユーザー検索、管理アプリ

お勧め講座4.モダンJavaScriptの基礎から始める挫折しないためのReact入門

冒頭でご紹介したように、ReactはJavaScriptの知識が前提となります。JavaScriptについては不安のある方はこちらの講座「モダンJavaScriptの基礎から始める挫折しないためのReact入門」をお勧めいたします。JavaScriptの講座は英語のもの日本語のもの含め多数ありますが(そしてどれも内容が濃い)、最低限のJavaScriptの知識があることを前提に組み立てられ、Reactに直結する形のコンパクトなJavaScript講座は本講座だけです。先ほどのお勧め講座3の岡田さんが講師をされています。全6時間4,290円の講座で、6時間のうちの前半はJavaScriptを、後半はReactの基礎を解説されています。


本講座のカリキュラムはReactに直結するJavaScript(冒頭ご紹介したアロー関数、map、filter、三項演算子はもちろん全て含む)とReactの入門ということに尽きるのでカリキュラムはとくにご紹介しませんが、JavaScriptからVueやReactに繋がる部分も丁寧に解説されているとてもいい講座だと思います(クラスコンポーネントをばっさり切られ関数コンポーネントに特化されている点もいい)。本日も最後まで読んで頂きありがとうました。