開発者向けReact学習サイト＆コース22選

Reactは、Facebook（現Meta）が開発したオープンソースのJavaScriptライブラリ。フロントエンドのユーザーインターフェース（UI）の構築に有用です。

Reactを使えば、ユーザーとサイトのスムーズなインタラクションを実現することができます。

フロントエンドページには一般的に、JavaScript、CSS、HTMLなど、さまざまなファイルが含まれますが、Reactを使えば、すべて1つのファイルにまとめることができるため、ページの表示速度が上がります。

また、コンポーネントをクリックすると、ページ全体ではなく、そのコンポーネントだけをレンダリングすることも。これが速度やビジュアルの面で、Reactが優れたライブラリである所以の1つです。

その性能と人気の高さから、フロントエンドUI用のJavaScriptライブラリとして、世界の大手企業の間でも広く利用されています。

これはつまり、多くの企業がReactに精通したエンジニアを求めているということで、Reactの習得はキャリアアップに打ってつけです。

そこで今回は、Reactの学習リソースをお探しの開発者向けに、おすすめのオンラインコース、解説動画、書籍をご紹介していきます。ぜひ参考にしてみてください。

動画での解説もご用意しています。

Reactとは

ReactJS（React、React.jsとも）は、サイトのフロントエンドユーザーインターフェース（UI）を開発するための、オープンソース、宣言型、コンポーネントベースのJavaScriptライブラリです。Meta（当時のFacebook）によって開発され、現在も大規模なコミュニティに支えられています。

その仕組みは、ウェブページのDOM（Document Object Model）を変更し、ページの更新やインタラクションの発生時に、行われた変更をすべてレンダリングするというもの。ページ全体だけでなく、検出された変更のみを更新することから、HTMLのごく一部のみが対象となり、ページの表示速度が高速になります。この操作は、システムが自動で行うこともあれば、ユーザー側で行うこともあります。

さらに、ReactはインタラクティブなUIやビューレイヤーを構築するのにも有用です。JSXで記述できるため、タグが既に形成されており、特定のコンポーネントを呼び出すのが容易です。

Reactの機能

• 宣言的UIにより、コードの予測可能性を高め、デバッグを容易に。アプリの各状態をよりシンプルに設計し、データの変化に応じてコンポーネントの更新やレンダリングが可能。
• コンポーネントベースのアーキテクチャを採用。コンポーネントのロジックはテンプレートではなくJavaScriptであるため、状態をDOMから遠ざけながら、アプリケーションを介してリッチなデータセットを簡単に渡すことができる。このように状態を管理できるカプセル化されたUIコンポーネントを構築し、組み合わせることによって、複雑なUIの構築も簡単。
• データ構造のキャッシュを活用した仮想DOMにより、最終的な変更点のみを更新することができ、アプリケーションを高速化。
• 単方向のデータバインディング
• JavaScript XMLまたはJSX
• React Native

ウェブ開発にReactが便利な理由

Reactは、大部分がJavaScriptで書かれていることから、ウェブ開発にさまざまなメリットをもたらします。Reactを使ったソフトウェア製品は、サーバー、クライアント、モバイル側で単一のプログラミング言語を使用することになるため、作成、テスト、スケーリングが容易です。また、UIコードの保守性、可読性も向上するため、ひいては生産性の向上、ワークフローの統一、スムーズな共同作業、高い費用対効果という恩恵も得られます。

Instagram、Facebook、Reddit、Netflixなど、世界の名だたる企業がReactを採用し、質の高い高度な製品をリリースしています。

続いて、ウェブ開発でReactを利用するメリットを見ていきましょう。

無料のオープンソース

Reactはオープンソースのライブラリであり、一般公開されています。したがって、お金を払って購入する必要はありません。コードを入手して、要件に応じて変更すればOKです。

Reactは、世界中の組織が使用する人気の高いJavaScriptライブラリであることから、膨大な数の開発者コミュニティがあり、いつでも助けを求めることができます。また、他の開発者とつながり、意見交換も可能です。

開発ワークフローの効率化

Reactの大部分のコーディングは、HTMLではなくJavaScriptで行うため、Reactベースのアプリケーションはテストとデバッグが容易です。複雑さが軽減され、柔軟性も高まります。また、最適化されたプログラミング言語と開発インターフェースも特徴です。APIは軽量かつ高パフォーマンスであり、開発フローが効率化され、コンポーネントも理解しやすく、使いやすいものになります。Reactが世界中で広く使用されている理由はここにあります。

また、AngularやVueといった、他の人気フレームワークと比較して、Reactには余分なHTML属性がありません。JSXを使用することで、可読性が上がり、より質の高いクリーンなコードを記述できます。

アプリケーションを運用するプラットフォームもお探しなら、Kinstaのアプリケーションホスティングをぜひご検討ください。セットアップはこれ以上ないほど簡単で、アカウントを作成してGitHubリポジトリに接続し、アプリケーションをデプロイするだけ。毎月使用したリソース分だけ課金されます。ご利用初月には無料利用枠をご用意していますので、まずは一度お試しください。

再利用性と柔軟性

Reactコンポーネントを使用すると、アプリケーションの属性を簡単に構築できます。また、コンポーネントは再利用可能で、同じ機能を追加する際にゼロから構築する必要はありません。同じコードを再利用したり、少し手を加えて他のアプリに応用したりすることが可能になります。再利用可能なコードは、メンテナンスも容易です。

さらに、Reactでアプリケーションのコンポーネントを作成すると、一意のオブジェクトが得られ、React互換のプロジェクトに追加することも。これにより、優れた拡張性とアプリケーションの整合性を確保することができ、最適化とサポートを行いやすくなります。

仮想DOMによる高いパフォーマンス

仮想DOM、宣言型UI、コンポーネントベースの設計により、直感的なアプリのUI作りが容易になり、高速なレンダリングが可能になります。

DOMの変更は、システムの速度を低下させる可能性がありますが、仮想DOMを使用すると、その変更を最小限に抑えて、効率的に最適化することができます。また、仮想DOMの変更は、バックグラウンドで処理されるため、ハードウェアのリソース消費率を大幅に削減することも可能です。

余談ではありますが、サイトのパフォーマンス向上には、Kinsta APMのご利用をおすすめします。

堅牢なReduxとFlux

加えて、FluxとReduxの機能も使用することができます。Fluxベースのソフトウェアアーキテクチャは、動作構造を最適化するため、単方向のデータフローを持つ改良型Reactコンポーネントを構築することができます。また、アプリケーション全体でモデルデータを適切に同期させることも可能です。

豊富なツール

ReactとReduxの開発ツールは、非常に簡単にインストール、使用可能です。stateやpropsなど、Reactベースのコンポーネントを効率的に検出し、ディスパッチを設定し、stateの変更をChrome拡張機能で即座に確認できます。また、バックアップとして使用・記録することでデバッグも容易に。

WordPressサイトの作成とデプロイに便利な開発ツールをお探しなら、無料でインストール可能なDevKinstaをお試しください。

堅牢なReact Native

React Nativeとは、AndroidとiOSの両方に対応したハイブリッドおよびネイティブモバイルアプリケーションを開発できるフレームワークです。優れたシステム管理性能とパフォーマンスを実現します。

大規模なコミュニティと豊富なリソース

Reactは、巨大な開発者コミュニティによりメンテナンスされており、最新の要件を満たしながら、コーディングの問題を解決する改善が繰り返されています。

ReactはGitHubの人気リポジトリの1つで、16万以上の星評価を獲得しており、複数の主要コミュニティで推奨されています。また、Metaの開発チームによってサポートされているため、十分にテストされた安全なコンポーネントを使用することができます。

JSX

Reactでは、JavaScriptのコードで宣言的なHTML構文を使用することができます。ウェブブラウザがHTMLテキストをデコードし、JavaScriptで変更可能なDOMツリーを作成することで、UIが表示されます。

JSXを使用することで、DOMの操作が効率化できます。ReactやHTMLのコンポーネントをツリー構造に渡すことで、クリーンかつメンテナンスしやすいコードを記述できるようになります。

新機能のフック

フックはReact 16.8で導入されました。これによって、機能的なコンポーネントにさらなる機能を持たせることができます。フックはコンポーネント間のstateロジック管理を簡素化し、同等のロジックを1つのコンポーネントに集約することができるため、クラスやpropsなしで、コンポーネント間でのデータ移動が可能です。

おすすめのReact学習リソース

それでは、ここからはおすすめのReact学習リソースをご紹介していきます。残念ながら、すべてが日本語に対応しているわけではありませんが、ぜひ参考にしてみてください。

React.jsの公式サイト

何かを学ぶなら、その作者本人から学ぶのが筋というもの。

Reactjs.orgはReactの公式サイトで、Reactに関するドキュメント、リリースや非推奨のような重要情報を確認することができます。

特に開発者には、Reactの開発チームによるほぼすべてを網羅した公式ドキュメントが間違いなく有用になるはず。コーディングの知識があれば、ドキュメントを読みながら高度なスキルを習得し、Reactの機能を使いこなすことができるようになります。また、ドキュメントは日本語にも翻訳されています。

Reactはオープンソースであるため、ライセンスの購入は不要。誰でもコードの閲覧が可能で、要件に合わせて自由に変更することができます。

学習できる内容

• Reactの基礎知識
• 「Hello World」の例
• コンポーネントと要素のレンダリング
• 参照とコンテキスト
• パフォーマンス構築とフックの最適化
• AJAXリクエスト、ファイル構造、コンポーネントの状態に関するFAQ

公式サイトのリソースを閲覧した後は、React環境をインストールして、学習したことを実行するのみ。Reactを初めて使用する場合は、公式サイトのトップページにあるライブエディタ付きサンプルを活用して、コードの一部を変更し、その結果を確認しながら学ぶことができます。実用的なReactリソースで、アプリの構築方法と用途に合わせた使用方法を身につけてみてください。

価格：無料

Codecademy

Codecademyの「Learn React」コースでは、インタラクティブで動的なウェブアプリケーションの簡単な構築方法を学ぶことができます。Google、NASA、IBM、Facebookなどの世界的な大企業の社員がこのプラットフォームのコースを受講していると言われています。

このコースは、Reactフレームワークとその本質的な概念について理解を深めるのに便利です。なお、受講するには、JavaScriptについての深い知識と基本的なHTMLスキルが求められます。

学習できる内容

• Reactの基本構文JSXの使用方法
• React.jsアプリケーションの構成要素であるReactコンポーネントの構築方法
• コンポーネントを相互に作用させる方法
• コンポーネントの堅牢な機能であるフックの使い方
• 特定のコンポーネントのライフサイクルにおける特定の時点でアクションをフックする方法
• 状態のあるコンポーネントと状態のないコンポーネントを混在するためのプログラミングパターン
• その他の重要な基礎知識

このコースを受講してReactのスキルを磨けば、たとえば動物の画像を表示するインタラクティブサーフェス、認証フォーム、ランダムカラーセレクターなどを構築することができるようになります。受講時間は20時間、PRO版では修了証も取得することができます。

価格：無料。証明書を取得したければ、月額19.99ドルのPRO版が必要。

Scrimba

無料のReactコースをお探しなら、Scrimbaは注目の価値ありです。初級・中級レベルの開発者向けで、140以上のコーディングの課題を解決し、楽しい8つのプロジェクトを構築しながら、Reactの基礎を学ぶことができます。

Reactの最新機能を押さえながら、知識を柔軟に更新し、プロジェクトに応用する力が身につきます。

コース内容は、以下4つのテーマに分かれた151のインタラクティブなスクリーンキャストで構成されています。

• 情報サイトの構築（全32レッスン）
• Airbnbの複製（全27レッスン）
• Tenziゲームとノートアプリケーションの構築（全28レッスン）
• ミームジェネレーターの構築（全64レッスン）

学習できる内容

• ローカルセットアップ
• Reactを使用する理由
• ReactDOM.render()
• JSX
• コンポーネントの整理
• カスタムコンポーネント
• コンポーネントのマッピング
• 再利用可能なコンポーネント
• JSXの中のJS
• props
• propsとしてオブジェクトを渡す
• オブジェクトをpropsとして拡散
• propsのキー
• propsの破壊
• propsとstateの比較
• 配列のレンダリング
• 条件付きレンダリング
• useStateと配列の破壊
• 複雑な状態
• 状態の変更
• 状態のリファクタリング
• 統一状態
• ローカルstate
• Reactフォーム
• フォームの状態オブジェクト
• フォームの入力
• Reactでフォームを送信する方法
• APIコールの作り方
• ローカルストレージ
• useEffect
• useEffect内部の非同期関数
• 状態の遅延初期化

このコースでは、Reactの基本原則をもとに、静的サイト、ソロプロジェクトとしてのデジタル名刺、旅行記、メモアプリ、クイズなどを構築していきます。前提条件として、HTML、JavaScript、CSSの基礎知識が必要です。

価格：基本コースは無料。

Egghead.io

Egghead.ioは、Reactの基礎をしっかりと身につけたい初心者向けのコース「The Beginner’s Guide to React」を提供しています。このコースでは、Reactベースのウェブアプリケーションを開発するために必要なスキルを学ぶことができます。

何千人ものユーザーが、このコースを通してReactの基礎と使用方法を学んでおり、コースの内容はたびたび更新、最適化されています。

28のテーマで構成されたコースです。1つの<index.html>ファイルに集約されるので、気が散ることなくJavaScriptライブラリであるReactの学習に集中することができます。コースの受講時間は2時間35分です。

学習できる内容

• Reactの基礎
• DOMとVanilla JavaScript、createElement API、JSXを使ってユーザーインターフェースを作成する方法
• シンプルな空白のファイルから開発を始めて、徐々に複雑にしていく
• Reactで解決できる問題
• JSXの概要と効果的な使用方法
• JSXがどのようにJavaScriptの関数オブジェクトと呼び出しに変換されるのか
• フォームとリアクトコンポーネントの構築
• フックを使った状態管理
• 要素の並列レンダリング
• Reactアプリケーションの再レンダリング

コースの締めくくりには、本番環境に近い状態で開発するための環境を整える方法にも触れています。また、Netlifyなどのサービスにアプリケーションをデプロイする方法も学習可能です。

このコースの受講後は、JavaScriptに関する課題に直面しても、Reactを使って解決する方法を見つけることができるようになるはずです。

価格：無料

Epic React

熟練の開発者のように完成度の高いReactアプリケーションを構築するなら、Epic Reactのコースが役に立つはず。Reactアプリケーションの構築には、コーディング前に重要な判断を下す必要があり、優れたアプリの構築にはReactの深い理解が求められます。

このコースでは、クライアントや顧客、エンドユーザーの実際の意図に応えるReactベースのアプリを目指し、メンテナンスのしやすい、まとまりのあるコードベースの構築方法を学ぶことができます。プロジェクトの成功につながる正しい選択、リソースと手間の削減に有用です。

Epic Reactのコースは実践的です。実際の開発環境でコーディングの練習をすることができます。インタラクティブなワークショップとなっており、開発者のために数年にわたってオフラインで実際にテストされたものです。Epic Reactの自習型ワークショップには、Reactの基礎知識はもちろん、Reactアプリのアーキテクチャを構築するための講義まで含まれています。

学習できる内容

• Reactの基礎
• Reactのフックと高度なフック
• 高度なパターン
• Reactのパフォーマンス
• Reactアプリケーションのテスト方法
• Epic Reactアプリケーションの構築方法

コースは、ワークショップ付きの簡潔かつ的を射た19時間の動画レッスン、そしてプロによる解説を聞くことができる対話形式のレッスン10時間で構成されています。また特典として、コーディングを超えるReactの魅力について語られたインタビューも視聴可能です。

なお、このコースは中級または上級者向けです。深いJavaScriptとCSS、またはHTMLによるウェブ開発の知識、作業に取り組む熱意と時間の余裕が前提条件になります。

価格：3つのプランがあり、Basicプランは119ドルから。自分のペースで進められるインタラクティブな2つのワークショップ、キャプションとトランスクリプト、完全なソースコード、Discordコミュニティが利用可能。上位のプランは、それぞれ264ドルと599ドルから購入可能で、より多くの機能が付帯。

Udemy（ユーデミー）

Udemyは、Reactを含め様々な分野で何千もの解説動画やコースを提供する、大手オンライン学習プラットフォームです。Reactにまつわるコースも数百種類あり、学習とスキルの向上に役立ちます。

そのコース数の多さから、自分が求めているコースを見つけるのが大変と感じられるかもしれません。最新版の技術に対応していないものも見受けられます。以下に、コーディングの知識を持つユーザー向けのおすすめコースをいくつか厳選してご紹介します。

Modern React with Redux

Reactを学んでプログラムを構築したい人には、「Modern React with Redux」がおすすめです。フックを含め、ReactとReduxを使ったJavaScriptでのコーディング方法が解説されています。このコースを受講すれば、ウェブアプリケーションの開発が簡単になります。

このコースはStephen Grider氏によるもので、これまでに27万5,000人が受講しています。最終更新は本記事執筆時で2023年5月。英語でのコースですが、日本語を含む13ヶ国語の自動字幕が付いています。受講者には、フォルクスワーゲン、ナスダック、boxなどのトップ世界企業のプロフェッショナルも。

コースは31のテーマから成り、52時間20分にわたる574の講義で構成されています。

学習できる内容

• Reactを使用した動的なウェブアプリケーションの構築方法
• 高品質な製品の開発に必要なプログラミングスキル
• ReactとReduxの基礎知識
• Webpack、Babel、NPM、JavaScriptのES6/ES2015などのReactツールチェーン
• 再利用可能なコンポーネントの構築

以下のトピックが扱われています。

• Reactとセットアップの徹底解説
• JSXでコンテンツを構築する方法
• Propsを使ったインタラクション
• クラスベースのReactコンポーネントを使用したアプリケーションの構造化
• Reactのライフサイクルメソッドとstate
• イベントとフォームを使用した入力内容の処理
• レコードリストの構築
• Refを使用したDOMアクセス
• APIリクエストの作成方法
• フックとナビゲーション
• Reactアプリケーションをデプロイする方法
• ReactとReduxの連携方法
• Reduxの開発ツール
• その他多数

このコースは、コンピュータ（WindowsやMac）またはモバイル端末から視聴可能です。プログラマーや開発者に限らず、Reactの概念を理解したいエンジニアにも役立ちます。レッスンはダウンロード可能で、修了証明書も取得できます。

価格：109.99ドル

The Complete React Developer Course

Reactを徹底的に学習するなら、「The Complete React Developer Course」も検討に値します。Reactを基礎から応用まで隈なく学び、実際のウェブ開発での使用方法を身につけることができます。React、Redux、React-Router、Webpackなどを使って、Reactウェブアプリを構築、デプロイする方法も学習できます。

Andrew Mead氏のコースで、8万1,000人が購入しています。また、常に最新の内容を提供するために、コンテンツは定期的に更新されています。残念ながら日本語に対応していませんが、英語ほか多数の言語で視聴可能です。一度購入すると、期限なく視聴できます。

学習できる内容

• Reactアプリケーションの構築、起動、テスト
• ユーザーアカウントの概要と認証の設定
• 最新のReactツールやライブラリについて
• React、Redux、React-Routerの活用方法
• 高度なES6/ES7の使用方法
• Reactアプリケーションを本番環境にデプロイする方法

コースは以下を含め19セクション、計200レッスンで構成されています。

• Reactの概要と習得すべき理由
• Reactの環境構築
• Reactコンポーネントとステートレス機能コンポーネント
• サードパーティコンポーネントの使用方法
• Webpack、Redux、React-Router
• Reactのスタイリング
• ReactとReduxの併用
• Reactベースのアプリケーションのテスト
• アプリのデプロイ
• Firebase 101
• Firebaseの認証
• ReduxでFirebaseを使う
• 予算管理アプリのスタイリング
• フック、フラグメント、コンテキストなど

コースの受講時間は39時間11分で、Windows、Linux、macOSで視聴可能です。オブジェクト、配列、関数、コールバック関数など、コアとなるJavaScriptの知識を持つ開発者向けです。本番アプリケーションを難なく開発、テスト、デプロイできるプロのReact開発者の育成がこのコースの目的です。

コースの始まりからすぐにプログラミングの課題が与えられ、学習とプロジェクトの構築を同時進行していきます。全体として、以下2つのReactアプリケーションを作成することになります。

1. Indecision：Reactの基礎を含む意思決定アプリケーションで、Reactアプリの構築と実行に必要なスキルを学びます。
2. Budget：実際のアプリの機能を利用した支出管理アプリケーション。ユーザーアカウント、認証、テスト、ルーティング、データベースストレージ、フォームの検証などを設定します。

コースを進めるにあたって、不明点や疑問が生じても、すぐにサポートに問い合わせて対応してもらうことができます。

価格：99.99ドル。無期限アクセスおよび30日間の返金保証あり。

React Front To Back

「React Front To Back」は、フック、Redux、コンテキストAPI、フルスタックMERNなどのトピックを含むReact 16.8以上のバージョンを、実際のプロジェクトを開発しながら学習することができます。コーディングスキル初級・中級レベルの人におすすめです。

講師はBrad Traversy氏で、世界中で3万3,000人以上が受講しており、英語、ドイツ語、ポルトガル語で視聴可能です。

学習できる内容

• モダンReactとRedux
• コンテクストとuseContext、またはuseReducerフックを使ったFluxパターン
• MongoDB、Express.js、React.js、Node.js（MERN）を使ったフルスタックウェブ開発
• 3つのプロジェクトの構築

以下のようなトピックを含む13セクション、全91講義で構成され、受講時間は13時間57分です。

• Reactの基礎知識とセットアップ方法
• プロジェクト1（GitHub Finder）
• コンポーネント、props、state
• propsの受け渡し、イベント、React Routerなど
• コンテクストとフックへのリファクタリング
• プロジェクト2（MERNを使ったContact Keeper）とExpress Serverのセットアップ
• 連絡先、バックエンドユーザー、JWT認証
• ContactsのUIとクライアント側のセットアップ
• ReactとExpress認証
• 連絡先APIの統合とデプロイ
• プロジェクト3（ITLogger – Redux）─UIとコンポーネント
• ReduxによるStateの管理
• 技術者のStateとコンポーネント

React開発初心者から中級者まで、幅広く受講可能です。

このコースを受けるには、ES6（アロー関数やプロミス）を用いたJavaScriptの知識が前提条件となります。

コースの修了後は、修了証明書を取得できます。

価格：84.99ドル、無期限アクセスおよび30日間の返金保証あり。

その他、以下のコースもおすすめです。

• Complete React Developer in 2024（日本語字幕あり）
• React – The Complete Guide
• React Basic in Just 1 Hour

Coursera（コーセラ）

Udemy同様、CourseraもReactをはじめとする様々なテーマを扱った、質の高いオンラインコースを提供する大手プラットフォームです。プログラミングやデータサイエンスなど、様々な業界から集まった世界トップクラスの大学や組織の講師によるオンライン学位（学士号と博士号）を取得することができます。

CourseraのReactのコースには、以下のようなものがあります。

Frontend Development using React Specialization

「Frontend Development using React Specialization」は、8つの包括的なコースでフロントエンドウェブ開発、サーバーサイドウェブ開発、およびハイブリッドモバイルアプリケーション開発を学習することができます。

NIIT提供の専門コースで、本記事執筆時点で2,654名が受講済みです。

学習できる内容

• CSS3、Bootstrap、HTML5を使用したモバイルフレンドリーなページのスタイルと構造
• Reactを使ったシングルページアプリケーション（SPA）の効率的な開発、インタラクティブで直感的なユーザーインターフェースの作成
• ブラウザ上でページ内容を変更できるインタラクティブなウェブページの構築
• 優れたユーザー体験の提供を目指し、アクセスおよびカスタマイズが容易なReactアプリの強化

この専門講座を通じて、ベストプラクティスと設計原則に従いながら、堅牢でテスト可能、そしてレスポンシブな業界標準のSPAを構築できます。期間は7ヶ月で、柔軟なスケジュールが組まれています。修了後は、証明書が発行されます。

コースの内容は以下の通り。

Introduction to building Web Pages using HTML5 and CSS3（HTML5とCSS3を使用したウェブページ構築入門）：CSS3とHTML5を活用して、オーディエンスを惹きつけながら、事業を拡大する支えとなる魅力的なウェブページの作成方法を学びます。

Developing Responsive Web Pages Using HTML5 and CSS3（HTML5とCSS3を使用したレスポンシブなウェブページ開発）：CSS3とHTML5を活用したレスポンシブなウェブページの構築方法、画面の幅や解像度に合わせてウェブページのレイアウトや見た目を調整して、魅力的な外観を作る方法を学びます。

Building Interactive Web Pages Using Modern JavaScript（モダンなJavaScriptを使用したインタラクティブなウェブページの構築）：JavaScript、CSS3、HTML5を使った静的ページの構築方法、さまざまなデバイスでコンテンツを表示する方法を学びます。また、アニメーション、インタラクティブな地図、メニュー、スクロールするテキストなどのコンテンツを追加する方法も。

Building Interactive User Interfaces Using React Library（Reactライブラリを使用したインタラクティブなユーザーインターフェースの構築）：高速でナビゲート可能なビューとともに、シームレスで魅力的、かつレスポンシブなUIとUXを持つSPAの構築と構造化について学びます。

Building User Interfaces Using Functional React Components（機能的なReactコンポーネントを使用したユーザーインターフェースの構築）：ReactのフックとJavaScript関数を活用して、ステートフルで再利用可能なロジックを持つ、シンプルで読みやすいReactコンポーネントの開発方法を学びます。

Building High Quality User Experience Using Material UI（マテリアルUIを用いた優れたユーザー体験の構築）：UIを用いた優れたユーザー体験の構築について学びます。また、Material UIなどの様々なデザインシステムとの連携や、JavaScriptでのCSSの使用方法を学びながら、優れたReactアプリを作成します。

Building Navigational Workflows Using React（Reactを使ったナビゲーションのワークフローの構築）：ナビゲーションのワークフローを作成するためのReact Routerライブラリ、フォーム、Formikライブラリについて学びます。

The Capstone Project（キャップストーンプロジェクト）：講座を通して説明されるReactの概念を学ぶことができるプロジェクト。ベストプラクティスと設計原則に従って、与えられた課題に対して機能するソリューションを開発するのに役立ちます。

価格：77.79ドル

Advanced React

Coursera提供のもう1つのおすすめコースは、「Advanced React」。このコースは、Metaのメタフロントエンド開発者プロフェッショナル認定証に属し、Metaの講師が講義を担当しています。「4.7」という高評価を獲得しており、本記事執筆時点では3万2,147人が登録しています。

学習できる内容

• Reactの高度な機能や概念の使用方法、JSXの学習、アプリケーションの効率的なテスト方法
• 様々なReactコンポーネントの種類と特徴を調べ、いつ、どこで使用するかを学ぶ
• 高度なフックについて調べて自分で作成
• Reactを使用したフォームの構築
• コンポーネントの構成とともにレンダープロップ、高階コンポーネントなどの新たなパターンを探る
• Reactフレームワークの一般的なツール、テスト方法、および統合について
• APIデータを消費するウェブアプリケーションの開発
• 複数のコンポーネントでデータの更新が必要な場合に特に便利な、共有されている状態の上階層への移動
• フォームやリストコンポーネントの効率的なレンダリング
• コンテクストの活用
• リモートサーバーからの情報の取得
• フックを実装したウェブアプリケーションの使用
• カスタムフックの作成
• JSXを総合的に理解
• Reactコンポーネントのテスト
• ポートフォリオの作成

コースを受講すれば、便利なReactベースのアプリケーションの開発、新たなスキルの習得、生産性の向上、そしてキャリアアップが期待できます。課題の締め切りは柔軟に設定されており、約26時間で完了します。修了すると、証明書を取得することができます。

価格：無料

freeCodeCamp

無料の学習リソースに絞ってお探しなら、freeCodeCamp.orgは魅力的な選択肢の1つです。この非営利団体は、プログラミングとテクノロジーに関する何千ものコースと解説コンテンツをウェブサイトおよびYouTubeチャンネルで発信しています。

2014年以来、4万人以上の開発者がこのサイトを活用してスキルを磨き、Amazon、Google、Apple、Microsoftなどの有名企業での仕事を獲得しています。

Reactに関するコースは多数あり、この7時間のコースでは、Reactの概念を基礎から固め、中級、上級レベルまで理解を深めることができます。また、実際にアプリケーションを構築する方法も身につきます。

学習できる内容

• Reactとは
• JSX
• Reactルーター
• スタイル付きコンポーネント
• propsとstate
• CSS
• コンテキスト
• APIハンドリング
• タイプスクリプト
• フック
• 状態の永続化
• Netlifyへのデプロイメント
• その他

他にも、以下のコンテンツがおすすめです。

How to Use Props in React.js（React.jsでpropを使う方法）

Top 30 React Interview Questions and Concepts（採用面接で役立つReactに関する質問と概念30選）

How to Lazy Load Images in React（Reactで画像を遅延読み込みする方法）

価格：無料

PluralSight

PluralSightは、Reactを含め数千ものコースを提供するオンライン学習プラットフォーム。経験豊富で熟練した講師が担当し、真に価値のあるコースが揃っています。

PluralSightには、ReactとReduxを使ったアプリの構築方法を学ぶことができる講座があります。プログラミングとReactの基礎知識が中級程度の人向けです。スキルを吸収し、すぐにReactベースのアプリケーションを構築できるようになっています。

全16コース計38時間で、まずは1時間10分のコース「React」から始まります。「The Big Picture」で基礎を固め、その後、コンポーネントの設計、スタイル、レンダリング、テスト、state管理、アプリケーションの最適化などの学習に移ります。

学習できる内容

• Reactの基礎
• Reactの利用を始める
• Reactコンポーネントの設計
• Reactの状態を管理する方法とスタイル
• Reactコンポーネントのサーバーレンダリングとテスト
• Reactでフォームを実装する方法
• アプリのパフォーマンスを最適化する
• ReactとReduxでアプリを作成する
• フックの使用
• Reactフレームワークの選び方
• ReactでAPIを呼び出す
• 大規模データセットの管理
• TypeScriptでReactアプリケーションを構築する
• Reactのセキュリティ

価格：このコースを受講するには、個人向け月額約29ドルからのプランを購入する必要があります。役割やスキルの評価、学習パスの作成など、2,500のコースにアクセスできます。10日間の無料トライアルがあるので、まずは実際に試して自分に適しているかどうかを判断することができます。

AlterClass

React学習にもってこいなウェブサイトと言えば、AlterClassは見逃せません。Reactを理解し、活用して有用なアプリケーションを構築するのに必要なほぼすべてを学ぶことができます。

AlterClassには、無料と有料のコースがあり、インターネット環境とデバイスがあれば、誰でも受講することができます。

Build A Full-Stack App with Next.js, Supabase, and Prisma

これは無料コースで、React/Next.js、Supabase、Prismaなどの最新技術を使ってフルスタックアプリをゼロから作成する知識を習得できる内容になっています。

コースを担当するのは、ReactやJavaScriptなど多くの技術を専門的に指導しているソフトウェアエンジニアのGreg D’Angelo氏。過去数年にわたり、React、MongoDB、Node.jsの知識を活かして、さまざまな業界向けの大規模アプリケーションを構築しています。

学習できる内容

• Next.jsを使ったREST APIとReactアプリケーションの作成
• NextAuth.jsを用いたパスワードレス認証とOAuth認証の有効化
• APIルートとページのセキュリティ確保
• Prismaによるデータモデリング
• Supabaseによるリレーショナルデータベースとデータストレージでのデータ永続化
• Vercelでのデプロイ

このコースでは、ReactベースのフレームワークであるNext.jsを使用するため、フックを使ったReactアプリケーションの構築経験が前提条件として求められます。また、スムーズに学習を進めるには、JavaScriptの経験もある程度必要になります。

価格：無料

Educative

eラーニングプラットフォームのEducativeも注目の価値あり。さまざまな技術にまつわる数多くのコースがあります。インタラクティブなテキストベースのプラットフォームで、ブラウザで直接コードの実行が可能。つまり、ソフトウェアのインストールが不要で、ブラウザでそのままプログラミングを始めることができます。

Reactのスキルを磨きたい開発者向けに、コースや認定資格が豊富に揃っています。初級レベルから上級者向けの高度なコースまで幅広く提供されているため、お探しのコースがきっと見つかるはず。

以下、特におすすめのReact講座をいくつか見てみましょう。

React for Front-End Developers

「React for Front-End Developers」コースは、その名の通りフロントエンドの開発者向けで、優れたReactアプリケーションを構築するためのスキルを磨くことができます。15時間の4つのテーマに分かれており、185のレッスン、24のクイズ、538のコードスニペット、58のイラスト、176の実践練習が含まれます。

学習できる内容

• Reactの基礎
• Reactでのコーディングおよび実行
• ReactフロントエンドとFirebaseバックエンドの統合
• ReactとTypescriptの組み合わせ
• react-trackedを使用して、グローバルな状態を持つ軽量なウェブアプリケーションを作成

価格:：月額16.66ドル

Become a React Developer

「Become a React Developer」では、Reactの基礎と、ES6+、Typescript、JSXなどの関連技術に関するスキルと知識をつけることができます。さらに、FluxとReduxを使ってアプリケーションの状態を維持する方法も学びます。

コースは、60時間30分の4つのテーマで構成されており、329のレッスン、719の実践練習、68のクイズ、84の課題、1554のコードスニペット、402のイラストが含まれます。

学習できる内容

• Reactの基礎
• Reactのコード記述とリアルタイムでの実行
• ReactとTypescriptの組み合わせ
• ReactでのJSXの使用
• ES6+のJavaScriptの特徴
• アプリの状態を維持するためのReduxとFlux

価格：月額16.66ドル

Skillshare

「React for Beginners: Build an APP and Learn the Fundamentals」は、Skillshareの人気コース。Node.jsとReactのフルスタック開発者であるRyan Johnson氏が講師を務めています。

SkillShareは、各講座を好きなだけ受けることができます。講師陣は現在業界で活躍しているプロフェッショナルやリーダーの面々。Reactをコアから理解し、Reactを活用して優れたアプリを構築する方法を習得することができます。

受講時間は1時間程度。React初心者向けで、18のレッスンで2つのプロジェクトに取り組みます。無駄な教材で気が散ることがなく、Reactアプリの構築に必要なスキルを効率的に身につけることができます。

学習できる内容

• Reactのコンポーネントと要素
• ReactでのJSXの使用
• ライフサイクルとstate
• Reactにおけるフォーム
• ステートレスまたはダムコンポーネントの作成
• 初めてのReactアプリ開発
• 更新とレンダリング（特典動画）

このコースを受講するには、JavaScript、CSS、HTMLの基礎知識が求められます。また、JavaScript ES6+の知識もある程度保有しているのが好ましいです。

価格：基本コースは無料で、有料プランは月々19ドルから。無料トライアルでコースが自分に適しているかどうかを確かめることも可能です。

Reactforbeginners.com

Reactforbeginners.comは、Reactの学習とスキルアップのために活用したいウェブサイトです。このサイトでは、ReactとFirebaseでサイトコンポーネントと一緒にアプリケーションを構築する方法をステップバイステップで学べる有料のコースを提供しています。お昼を終えた午後の数時間でReactを理解できると謳っています。

このコースは、リアルタイムで動的なサイトコンポーネントやアプリケーションをすぐに構築し始められるよう、読みやすさとシンプルさに重点を置いています。カナダ出身のフルスタック開発者、講師、講演者である、このコースの制作者Wes Bos氏が、講義を行いながら完全なウェブアプリをゼロから構築していくのは見応えありです。

Wes Bos氏と共に魚市場用アプリケーション「Catch of the Day」を開発していきます。このアプリは、変動し続ける商品の数量と価格を表示し、注文フォームや在庫、商品のメニューを作成し、修正・更新することができるものです。

学習できる内容

• 完全なアプリまたはサイトの構築
• create-react-appの使用
• ReactコンポーネントとJSX
• アプリの状態維持
• コンポーネント間のインタラクション
• HTML5のLocalStorageとStateの使用
• React Router 4を使ったURLルーティング
• Reactアプリのデプロイ
• その他多数

フロントエンドのウェブ開発スキルを磨き、迅速かつ質の高いReactアプリを構築したい開発者にはぴったりのコースです。

価格：スターターコースは89ドル、チーム向けのプランは10名で400ドル（本記事執筆時点では200ドルに値下げ）からです。

YouTube

学習リソースは、ウェブサイトやeラーニングプラットフォームだけではありません。近年ではYouTubeチャンネルも学習に便利です。動画を見ながらの学習は、新たな技術や概念をインタラクティブに学ぶことができます。

Programming with Mosh

Programming with Moshは、人気プログラミング番組で、Reactを含むさまざまな技術に関する解説動画が豊富に投稿されています。「React for Beginners」は、Reactに初めて触れる開発者に役立つ内容です。

この解説動画では、Reactの紹介とその概念について、そして最後にReactアプリの開発方法を詳しく紹介しています。

学習できる内容

• 状態の変化
• ステートレス機能コンポーネント
• イベント引数
• マウント・アンマウントのフェーズ
• フック

Codevolution

CodevolutionもReact初心者におすすめしたいチャンネルです。Reactの基本からコンポーネント、フック、レンダリング、TypeScriptまで、Reactの概念が網羅されています。

今から初めてReactを学び始める人にとっては非常に有益で、このチャンネルの良い点は、理解しやすいように、継続的なレッスンではなく、テーマごとにセクションが分かれていることです。これによって、1つのトピックを十分に理解した上で、次のトピックに移ることができます。

JavaScript Mastery

JavaScript Masteryは、Material-UIの使用方法を学ぶのに便利な「React JS Full Course 2023」を提供しています。レッスンは1時間程で、基本情報やドキュメントの読み方、さらにこの知識をソースコードに応用する方法を学ぶことができます。他にも以下のトピックが含まれます。

• Material-UIコンポーネント
• コンポーネントAPI
• props
• コンポーネントをゼロから構築する方法

Edureka

Edurekaの「ReactJS Full Course in 7 Hours」もまた、React初心者を対象とした有益な解説動画です。豊富な例を用い、Reactの概念がわかりやすく解説されています。

この動画を視聴すれば、Reactの知識がしっかりと身につくはずです。また、レッスンの最後では実際のプロジェクトに取り組み、トレーニングを終えると、評価とともに証明書を取得できます。

書籍

YouTubeの解説動画やオンラインレッスン以外にも、書籍で学ぶことも可能です。読書が好きな方にとっては、良い選択肢になります。

Reactに関する書籍も、初心者から熟練した開発者まで、経験値ごとにさまざまな種類があります。以下、React学習に役立つおすすめの書籍をいくつかご紹介します。なお、今回はすべて英語の書籍となりますが、英語を読むことに抵抗のない方はぜひ参考にしてみてください。

The Road to React

Robin Wieruch氏のThe Road to Reactは、React学習に適した一冊です。フックを使ったReactの原理を網羅し、質の高い本格的なReactアプリを段階的に作成する方法が説明されています。また各章では、Reactアプリの構築にあたって、知っておくべき重要な新機能についても解説されています。

Reactの基礎に加えて、以下のトピックも深く掘り下げられています。

学習できる内容

• ReactをTypeScriptで使用する
• Reactアプリのテスト
• パフォーマンスの最適化
• 高度な機能の実装（サーバーサイドとクライアントサイドの検索など）
• Reactのレガシー
• スタイリングとメンテナンス
• Real World React
• Reactアプリのデプロイ

この本を読み切れば、機能的でデプロイ可能なアプリを構築することができるようになるはず。

Beginning React

Greg Lim氏著のBeginning Reactでは、Reactと関連技術について詳しく説明されています。Reactを使いこなすことを目的とし、実践的かつ楽しく学ぶことができる一冊です。

文章は長すぎず短すぎず、要点がしっかり押さえられており、各セクションは直感的に作り込まれています。全体として読みやすい本で、無理なくReactを学ぶことができます。例、イラスト、コードスニペットと解説が盛り込まれており、わかりやすいのも魅力です。

堅牢なReactベースのアプリケーション効率的に構築したい、React初心者におすすめです。

React.js Essentials

Artemij Fedosejev氏によるReact.js Essentialsは、拡張、デバッグ、管理が容易なReactアプリケーションの構築と設計のための手引きです。ウェブアプリケーションでパフォーマンスの高いユーザーインターフェースを構築する方法を学ぶことができます。

Reactのすべての概念が実践的かつステップバイステップで説明されているため、理解しやすくなっています。また、実際のプロジェクトでスキルを発揮できるよう、的確な例も紹介されています。さらに、短い期間でReactを習得できるよう、コードも豊富に掲載されています。

Fullstack React Complete

Anthony Accomazzo氏のFullstack React Completeもおすすめしたい優れた一冊です。包括的かつ最新情報を押さえたこの本は、スキルを磨いて優れたReactアプリを構築したい初心者におすすめです。

Reactの基礎知識をしっかりと学び、短期間で無理なくReactを習得することを目的としています。書面によるレッスンとは別に、実践練習用のコードや学んだことを活かして取り組むプロジェクトも用意されているため、スキルを磨くことができます。

Learn React Hooks

Learn React Hooksは、アプリ内でラッパーコンポーネントを使用せずに、簡潔で便利なReactアプリを構築する知識やスキルを磨ける本です。ウェブアプリケーションにおけるエフェクトやstateの管理方法を最適化することができます。

この本を読むと、コードの再構築も行いやすくなります。

学習できる内容

• Reactのフック、複雑なUIの構築、コードの適応性とシンプルさの維持
• フックアプリケーションの作成、副作用フックや状態フック
• 状態フックとその使用手順
• Reactプロジェクトに高度な機能を追加する副作用フック
• コンテクストとSuspense APIとフックの使用
• フックとRedux、MobXとの連携
• 現在のクラスコンポーネントの移動

まとめ

Reactは、ウェブアプリケーションで優れたユーザーインターフェースを構築するのに便利な、人気のJavaScriptライブラリです。Reactには、速度、再利用性、パフォーマンス、柔軟性などの面で数々のメリットがあります。

すでにコーディングの知識をお持ちで、スキルアップを考えている方は、今回ご紹介したオンラインコース、解説動画、書籍をぜひ活用してみてください。必ずや高度で有用なウェブアプリを構築する肥やしになるはずです。

すべてのリソースには、それぞれの良さがあります。学習できる内容や目的に適したものを見極めて、利用しましょう。