0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

ReactJS Academy で動的なユーザーインターフェースを構築する ReactJS をマスターしましょう。

🤖 AI 搭載📚 88 コース👥 100,000+ ユーザー⭐ 4.9 評価
コース概要

React で実際のインターフェースを構築する

React は、単一ページアプリケーションや Next.js サイトからクロスプラットフォームのモバイルおよびデスクトップアプリケーションまで、今日のほとんどの本番環境 UI がどのように構築されているかを定義する JavaScript ライブラリです。このトラックは完全な分野をカバーしています。コンポーネントアーキテクチャ、状態管理、データ取得、パフォーマンス、テスト、デプロイメントです。これは React が実際にどのように機能するか — reconciler、fiber モデル、hooks のセマンティクス — 単なる表面的な API ではなく、それに基づいています。

学習内容

JSX、props、state、および制御コンポーネントから始まり、その後 useEffect、useRef、useReducer に進みます。実践的なコースでは React Router v6 を使ったルーティング、React Hook Form を使ったフォーム処理、React Query と SWR を使ったサーバー状態、Redux Toolkit、Zustand、Jotai を使ったグローバル状態をカバーしています。React で TypeScript を使用し、統合テストと E2E テストを作成し、Storybook でデザインシステムを構築し、WebSocket 上でリアルタイム UI を処理し、tRPC で型安全な API をデプロイします。このパスには Next.js App Router、サーバーコンポーネント、サーバーアクション、および NextAuth.js による認証も含まれています。

学習パス

95 のコースが A1 から C1 まで実行されます。A1 と A2 のコースは React の基礎、JSX レンダリング、CSS アニメーション、ローカルストレージの永続化、およびダークモードを確立します。B1 のコースは context パターン、i18n、React Spring、Framer Motion、dnd-kit によるドラッグ&ドロップ、および TanStack Table による複雑なデータテーブルへの自信を強化します。B2 のコースはレンダリングとメモ化、Suspense、コード分割、React 開発者向けの React Native、Vercel と AWS へのデプロイ、およびデスクトップアプリ向けの Electron に取り組みます。C1 レベルは高度なトピックで終了します。マイクロフロントエンドアーキテクチャ、SSR とハイドレーション詳細ガイド、Module Federation、Astro によるアイランドアーキテクチャ、WebAssembly 統合、Cloudflare Workers によるエッジレンダリング、およびフロントエンド観測可能性のための OpenTelemetry。

仕組み

各コースは短い、焦点を絞ったレッスンに分割され、組み込みコードエディターでリアルタイムフィードバックを使って完了します。概念またはテストの失敗で立ち往生している場合は、AI チューターがいつでも利用できます。トラックを順番に進めるか、現在の経験に合ったレベルにジャンプできます。

学習を始める →

学び方

🎯
インタラクティブレッスン
リアルタイムフィードバック付きの実践的なコード演習
🤖
AIチューター
わからないときは、AIが即座にサポート
💻
組み込みエディタ
ブラウザで直接コードを書いて実行
🏆
認定資格
コース完了時に認定資格を取得
カリキュラム

88コース

React Academyラーニングパスのすべてのコース

01

React入門:概念とセットアップ

A13レッスン

Reactの基礎から始めます。コンポーネント、宣言的UI、差分検出によってDOMを効率的に更新する仕組みを学びます。その後、Viteなどでプロジェクトをセットアップし、開発サーバーを起動して最初のコンポーネントを描画します。

02

JSXとレンダリングの基礎

A13レッスンPRO

JSXのルールを学びます。式と属性、フラグメントの返却、keyを使ったリストの描画、簡単な条件分岐、スタイル指定の方法(CSS modules、インラインスタイル、classヘルパー)を扱います。

03

React DevToolsとデバッグ

A24レッスンPRO

React DevToolsのブラウザー拡張機能を使いこなします。コンポーネントツリーの確認、レンダーのプロファイリング、stateとpropsの効果的なデバッグを行います。

04

ReactでのCSSアニメーションとトランジション

A24レッスンPRO

CSSトランジションとキーフレームを使って、Reactで滑らかな入場・退出・状態変更アニメーションを作成します。アニメーションライブラリは必要ありません。

05

StateのリフトアップとProp Drillingの解決策

A24レッスンPRO

stateをリフトアップして兄弟コンポーネント間で共有し、prop drillingが解決すべき問題になるタイミングを理解します。

06

ローカルストレージと状態の永続化

A24レッスンPRO

localStorageを使ってページの再読み込み後もReactの状態を保持し、タブ間同期を処理し、用途に適したブラウザストレージAPIを選択します。

07

React によるダークモード

A24レッスンPRO

CSS カスタムプロパティ、React context、prefers-color-scheme メディアクエリを使って、誤ったテーマのちらつきを防ぐ堅牢なダークモードシステムを構築します。

08

Propsとコンポジション

A23レッスンPRO

props でデータを渡し、分割代入で簡単な デフォルト値 を設定し、 children でUIを組み立てます。再利用可能なプレゼンテーションコンポーネントでは、継承よりコンポジションを優先します。

09

状態とイベントの基礎

A23レッスンPRO

useState とイベント処理をマスターします。状態を正しく更新し、onClick/onChangeを扱い、制御された入力の準備を整えます。

10

フォームとバリデーション(入門)

A23レッスンPRO

複数の入力項目を持つ 制御されたフォーム をReactで構築し、基本的なバリデーションを適用して、送信をスムーズに処理する方法を学びます。

11

ルーティングの基礎

A23レッスンPRO

クライアントサイドルーティングを理解します。SPAでページ全体を再読み込みせずにビューを切り替える方法、基本的なパスとパラメーター、アクティブなナビゲーション状態を学びます。

12

useRefとDOM

A23レッスンPRO

useRef をマスターします。再レンダーを発生させずにレンダー間で値を保持し、DOMノードへアクセスし、安全にタイマーを管理する方法を学びます。

13

Lintとコーディング規約

A23レッスンPRO

ESLint とReact向けルールでコードをクリーンに保ち、 Prettier で自動フォーマットします。スクリプトを追加し、問題をすばやく修正します。

14

制御コンポーネントと非制御コンポーネント

A22レッスンPRO

制御された入力と非制御の入力をマスターします。それぞれを選ぶ場面、基本的なrefパターン、安全なデフォルト値を学びます。

15

React Strict Modeとベストプラクティス

B14レッスンPRO

StrictModeの役割と表示される警告、Reactアプリを保守しやすくするコーディング規約を学びます。

16

ReactのPortalとモーダル

B14レッスンPRO

React Portalsを使って親のDOM階層の外にコンテンツを描画し、モーダル、ツールチップ、オーバーレイを構築します。

17

React Children APIとスロットパターン

B14レッスンPRO

props.childrenとReact.Childrenユーティリティを扱い、柔軟なスロットベースのコンポーネントAPIを実装します。

18

非制御コンポーネントとファイルアップロード

B14レッスンPRO

useRefで非制御入力を扱い、ファイル入力の値を読み取り、Reactでファイルアップロードのフローを処理します。

19

React Contextのパターンとパフォーマンス

B14レッスンPRO

メモ化、Contextの分割、セレクターパターンを使って再レンダーを最小限に抑えるContextプロバイダーを設計します。

20

Reactの国際化(i18n)

B14レッスンPRO

react-i18nextを使ってReactアプリに多言語対応を追加し、翻訳ファイルを管理してロケールを切り替えます。

21

React でのブラウザー API

B14レッスンPRO

Clipboard、Geolocation、Notifications、IntersectionObserver などの強力なブラウザー API を、適切なクリーンアップと権限処理とともに React コンポーネントへ統合します。

22

React におけるデバウンスとスロットリング

B14レッスンPRO

検索、スクロール、リサイズのイベントに対応する再利用可能な React フックとしてデバウンスとスロットリングのパターンを実装し、過剰な再レンダリングや API 呼び出しを防ぎます。

23

フォームのオートコンプリートとタイプアヘッド検索

B14レッスンPRO

React の state と refs を使い、ライブラリなしで、アクセシブルでキーボード操作に対応したオートコンプリートとタイプアヘッドコンポーネントを一から構築します。

24

React Hook Formによるフォーム管理

B14レッスンPRO

React Hook Formを使って、高性能で柔軟なフォームを構築します。登録、バリデーション、エラー表示、スキーマ連携を扱います。

25

Zustandによる状態管理

B14レッスンPRO

ZustandでReactアプリのグローバルstateを管理します。ストア、アクション、セレクター、永続化、DevTools連携を扱います。

26

React Router v6の高度なパターン

B14レッスンPRO

ネストしたレイアウト、ローダー、アクション、保護されたルート、検索パラメーターによるstate管理で、基本的なルート設定からステップアップします。

27

ReactでのTypeScript:コンポーネントとフックの型付け

B14レッスンPRO

ReactプロジェクトにTypeScriptを導入し、props、イベント、フック、Context、ジェネリックコンポーネントに自信を持って型を付けます。

28

TanStack Table:複雑なデータテーブル

B14レッスンPRO

TanStack Table の強力なヘッドレスアーキテクチャを使って、並べ替え、フィルタリング、ページネーション、行選択に対応した本番品質のデータテーブルを構築します。

29

Jotai:アトミックな状態管理

B14レッスンPRO

Jotai の最小構成のアトミックモデルで React の状態を管理します。値の導出、非同期処理、React Suspense との完全な統合に対応する、組み合わせ可能な atom を扱います。

30

SWR:Vercel のデータ取得

B14レッスンPRO

SWR の stale-while-revalidate 戦略を使い、自動再検証、ミューテーション、オフライン対応を備えた高速で信頼性の高いデータ取得を実現します。

31

dnd-kit:アクセシブルなドラッグ&ドロップ

B14レッスンPRO

dnd-kit を使って、アクセシブルでタッチ操作にも対応した React のドラッグ&ドロップインターフェースを構築します。並べ替え可能なリスト、カンバンボード、複数コンテナー間のドラッグ操作を扱います。

32

React Spring:物理ベースのアニメーション

B14レッスンPRO

react-spring を使って、単純な値の遷移から複雑なジェスチャー駆動のインタラクションまで、ばねの物理法則に基づく滑らかな React アニメーションを作成します。

33

React における Server-Sent Events とポーリング

B14レッスンPRO

Server-Sent Events とポーリング戦略を使って React にリアルタイムデータフィードを実装し、用途ごとの WebSockets とのトレードオフを理解します。

34

useEffectを深く理解する

B13レッスンPRO

useEffect を理解します。レンダーとの違い、実行されるタイミング、依存配列による制御、安全なクリーンアップの書き方を学びます。

35

データ取得のパターン

B13レッスンPRO

堅牢なデータUIを設計します。 読み込み中 、 エラー 、 空 、 成功 の状態を、分かりやすいフィードバックと軽量なスケルトンUIで扱います。

36

ContextとuseReducer

B13レッスンPRO

遠く離れたコンポーネント間で Context を使って状態を共有し、propsのバケツリレーを避けます。Providerを設定し、 useContext で値を読み取る方法を学びます。

37

カスタムフック

B13レッスンPRO

再利用可能なロジックを カスタムフック に切り出します。明確なパラメーターを定義し、安定した値やアクションを返し、エフェクトをクリーンに保つ方法を学びます。

38

アクセシビリティの基礎

B13レッスンPRO

誰もが使いやすいUIを構築します。適切なセマンティクス、分かりやすいラベルとロールを使い、スムーズな操作のためにキーボードフォーカスを管理します。

39

Framer Motionによるアニメーション

B14レッスンPRO

Framer MotionでReactアプリに滑らかなアニメーションとトランジションを追加します。motionコンポーネント、variants、ジェスチャー、レイアウトアニメーションを扱います。

40

エラーバウンダリーと堅牢性

B13レッスンPRO

Error Boundaryでレンダー時のエラーを捕捉し、安全なフォールバックを表示して、アプリの他の部分の応答性を保つ方法を学びます。

41

ReactとTypeScript(任意)

B13レッスンPRO

Reactコンポーネントに軽量な型を追加します。propsから始め、再利用可能なジェネリクスを切り出して、UIコードを安全で分かりやすく保ちます。

42

プロジェクト構成と規約

B13レッスンPRO

Reactアプリを整理します。機能単位のフォルダー構成、小さなUIプリミティブと複合コンポーネントの使い分け、フックとテストの近接配置、明確なリファクタリングルールを学びます。

43

react-windowによる仮想化リスト

B24レッスンPRO

react-windowでDOM出力を仮想化し、ビューポートに表示されている項目だけを描画することで、パフォーマンスを低下させずに数千件のリスト項目を表示します。

44

Reactの非同期パターン:Promiseと並行処理

B24レッスンPRO

useEffect、useTransition、useDeferredValue、Suspenseを使い、Reactで非同期処理を慣用的に扱います。

45

Reactのパターン:Render PropsとHOC

B24レッスンPRO

Hooksが取って代わる前から使われてきた、コード再利用の定番パターンとしてRender Propsと高階コンポーネントを理解します。

46

useLayoutEffect と useEffect の比較

B24レッスンPRO

DOM のコミットに対してそれぞれが実行されるタイミングを含め、useEffect と useLayoutEffect の微妙ですが重要な違いを理解し、正しく使い分けます。

47

Redux ToolkitとRTK Query

B24レッスンPRO

Redux Toolkitのスライスとthunk、サーバーstateのキャッシュと同期を行うRTK Queryで、複雑なアプリのstateを管理します。

48

Server ComponentsとReact 19の機能

B24レッスンPRO

React Server Components、use()フック、Actionsなど、アプリ内のデータフローを変えるReact 19のAPIを理解します。

49

React Query:サーバーstate管理

B24レッスンPRO

TanStack Queryでサーバーstateを管理します。データ取得、キャッシュ、バックグラウンドでの再取得、ミューテーション、ページネーションを扱います。

50

Reactのテスト:結合テストとE2E

B24レッスンPRO

React Testing Libraryで結合テストを、Playwrightでエンドツーエンドテストを記述し、実際のユーザーフローを検証します。

51

コンポーネントデザインシステムとStorybook

B24レッスンPRO

CSF3のstoriesとアドオンを備えたStorybookを使い、React UIコンポーネントを分離してドキュメント化、開発、テストします。

52

WebSocketsとReactによるリアルタイムUI

B24レッスンPRO

WebSocketsやSocket.IOなどのライブラリを使って、チャット、通知、ダッシュボード向けのリアルタイム更新UIをReactで構築します。

53

tRPC:エンドツーエンドの型安全な API

B24レッスンPRO

tRPC を使い、スキーマやコード生成なしで完全に型安全な API を構築します。React フロントエンドと Node.js バックエンドの型も自動的に共有できます。

54

Apollo Client と React

B24レッスンPRO

Apollo Client で GraphQL を React アプリケーションに統合し、クエリ、ミューテーション、キャッシュ、サーバーデータとの UI 同期を扱います。

55

楽観的 UI とミューテーションパターン

B24レッスンPRO

サーバーの確認を待たずに結果を即座に表示する、高速で応答性の高い UI を構築します。失敗時の適切なロールバックと、競合解決の戦略も扱います。

56

React コンポーネントライブラリの公開

B24レッスンPRO

ESM/CJS のデュアル出力、peer dependencies、ツリーシェイキング、自動バージョニングに対応しながら、再利用可能な React コンポーネントライブラリを npm にパッケージ化して公開します。

57

レンダリングとメモ化

B23レッスンPRO

Reactの レンダー フェーズと コミット フェーズの違い、コンポーネントが更新されるタイミング、メモ化が役立つ場面を理解します。

58

トランジションとSuspense(基礎)

B23レッスンPRO

useTransition を使って並行UIの基礎を学びます。入力中の操作感を保ち、処理待ちを示し、緊急性の低い更新を遅延させます。

59

コード分割とアセット戦略

B23レッスンPRO

画面やウィジェットをコード分割し、必要なものだけを読み込みます。 React.lazy と Suspense を使い、体感速度の高いアプリを提供する方法を学びます。

60

Reactコンポーネントのテスト

B23レッスンPRO

Vitest/Jest と React Testing Library でテストを設定します。コンポーネントをレンダーし、ロールやラベルで検索し、jsdom環境で実行する方法を学びます。

61

Next.js App Routerの基礎

B24レッスンPRO

Next.js 14以降のApp RouterでフルスタックWebアプリを構築します。ファイルベースルーティング、レイアウト、Server Components、メタデータを扱います。

62

Next.jsのデータ取得とキャッシュ

B24レッスンPRO

fetchのオプション、unstable_cache、オンデマンド再検証を使って、Next.js App Routerでデータを取得、キャッシュ、再検証します。

63

NextAuth.jsによるNext.jsの認証

B24レッスンPRO

Auth.js(NextAuth v5)を使ってNext.jsアプリに認証を追加します。OAuthプロバイダー、認証情報、セッション、ルート保護を扱います。

64

React開発者向けReact Nativeの基礎

B24レッスンPRO

Reactの知識をモバイル開発に応用し、React Nativeのプリミティブ、スタイリング、ナビゲーション、ネイティブデバイスAPIを学びます。

65

Reactアプリのデプロイ:Vercel、AWS、Docker

B24レッスンPRO

Vercel、AWS S3/CloudFront、DockerコンテナとCI/CDパイプラインを使って、ReactとNext.jsアプリを本番環境にデプロイします。

66

React Server Actions:フォームとミューテーション

B24レッスンPRO

React 19 の Server Actions と Next.js のフォームアクションを使ってサーバー側でミューテーションを処理し、プログレッシブエンハンスメントに対応した一般的なフォームパターンで API ルートを不要にします。

67

React アプリケーションのセキュリティ

B24レッスンPRO

Content Security Policy、シークレット管理、安全なレンダリングに関する実践的な手法で、React アプリケーションを XSS、CSRF、その他の脆弱性から強化します。

68

React 向けデザイントークンシステム

B24レッスンPRO

トークンの定義から CSS 変数、Tailwind 統合、Style Dictionary までを扱い、複数テーマに対応する React コンポーネントライブラリを支えるスケーラブルなデザイントークンシステムを構築します。

69

Electron.js:React によるデスクトップアプリ

B24レッスンPRO

React フロントエンドを備えた Electron でクロスプラットフォームのデスクトップアプリケーションを構築し、IPC 通信、ネイティブ API、配布用パッケージングを扱います。

70

複合コンポーネント

B23レッスンPRO

複合コンポーネントを構築します。親がContextを提供し、子がそれを利用する柔軟なAPIの設計を学びます。

71

大規模フォーム(Vanillaまたは軽量ヘルパー)

B23レッスンPRO

フィールド配列、動的なセクション、シンプルなバリデーションフローなど、小さく堅牢な部品で大規模なフォームを構築します。

72

高度なルーティング

B23レッスンPRO

基礎から一歩進み、ネストしたレイアウト、概念としてのルートローダー、スムーズなナビゲーションのためのシンプルなプリフェッチの考え方を学びます。

73

サーバー状態とUI状態

B23レッスンPRO

サーバーキャッシュに属するものとローカルなUI状態を区別します。データの取得や更新を行い、関心事を混在させない方法を学びます。

74

モーダル・トースト・オーバーレイのパターン

B23レッスンPRO

アクセシブルなオーバーレイを作成します。ポータルでレンダーし、フォーカスを内部に維持し、Escapeキーや背景のクリックですばやく閉じられるようにします。

75

ビルド、分析、リリース

B23レッスンPRO

アプリを本番環境向けに準備します。開発用と本番用のビルド、ソースマップ、シンプルな環境変数、安心してリリースするための小さなチェックを学びます。

76

useImperativeHandleとforwardRef

C14レッスンPRO

宣言的なパターンでは不十分な場面に備え、forwardRefとuseImperativeHandleを使ってカスタムコンポーネントのインスタンス値を親へ公開する、命令型React APIを習得します。

77

useSyncExternalStore:外部ストアの購読

C14レッスンPRO

React 18のuseSyncExternalStoreフックを学び、ブラウザAPIやグローバルストア、サードパーティライブラリなどの外部状態ソースとReactコンポーネントを同期する正しい方法を身につけます。

78

Reactによるマイクロフロントエンドアーキテクチャ

C14レッスンPRO

Module Federationとsingle-spaを使い、大規模なReactフロントエンドを独立してデプロイできるマイクロフロントエンドに分割します。

79

React SSRとハイドレーション詳解

C14レッスンPRO

サーバーサイドレンダリングの仕組み、ハイドレーション、選択的ハイドレーション、ReactのrenderToPipeableStreamによるHTMLストリーミングを理解します。

80

React向け高度なTypeScriptパターン

C14レッスンPRO

判別可能なユニオン、mapped types、conditional types、型安全なコンポーネントAPIで、ReactとTypeScriptのスキルを高めます。

81

Webパフォーマンス:Core Web VitalsとReact

C14レッスンPRO

プロファイリングツール、バンドル分析、的を絞った最適化で、ReactアプリのCore Web Vitals(LCP、INP、CLS)を測定・改善します。

82

ReactプロジェクトのモノレポとNx

C14レッスンPRO

スマートなタスクスケジューリングと変更箇所ベースのCIを備えたNxを使い、モノレポで複数のReactアプリと共有ライブラリを管理します。

83

Astro と React による Islands Architecture

C14レッスンPRO

Islands Architecture を採用してページ全体のハイドレーションを避け、Astro を使って必要なインタラクティブ React コンポーネントだけを選択的にハイドレーションします。

84

React と WebAssembly の統合

C14レッスンPRO

Rust WASM モジュールから共有メモリ、ワーカースレッドまでを扱い、計算量の多い処理のために WebAssembly モジュールを React アプリケーションへ統合します。

85

エッジレンダリング:Cloudflare Workers と React

C14レッスンPRO

Cloudflare Workers、ストリーミング SSR、エッジネイティブなキャッシュ戦略を使い、サブミリ秒のレイテンシで React アプリケーションをエッジから配信します。

86

React フロントエンドのオブザーバビリティ向け OpenTelemetry

C14レッスンPRO

OpenTelemetry を React アプリケーションに組み込み、トレースの収集、実ユーザーパフォーマンスの測定、フロントエンドイベントとバックエンドスパンの相関付けを行います。

87

React のストリーミングとプログレッシブローディング

C14レッスンPRO

React 18 のストリーミング SSR と Suspense を使って HTML を段階的にブラウザーへ配信し、すべてのデータの読み込みを待たずに体感パフォーマンスを向上させます。

88

React での Module Federation

C14レッスンPRO

Webpack Module Federation を実装して React のマイクロフロントエンドを独立して構築・デプロイし、リモートアプリケーション間で依存関係、状態、ルーティングを共有します。

よくある質問

よくある質問

React Academyコースは無料ですか?

はい。React Academyコースは無料で始められ、インタラクティブレッスンをすべて無料で完了できます。オプションのPRO登録で、高度なAIツールと共有可能な認定資格がアンロックされます。

JSXを学ぶのに事前経験は必要ですか?

いいえ。コースは基礎から始まり、より高度なトピックへと進むので、JSXの事前経験がなくても始められます。

CoddyKitでJSXをどのように学びますか?

実践しながら学びます。短いインタラクティブレッスンは、わかりやすい説明と、リアルタイムで実行される実践的なコード演習が組み合わさっており、24時間対応のAIチューターがわからないときにいつでもサポートします。

React Academyを完了すると認定資格がもらえますか?

はい。PRO学習者は試験を受けて、React Academyコースの完了を証明する共有可能な認定資格を取得できます(認証コード付き)。

スマートフォンでJSXを学べますか?

はい。CoddyKitはウェブとネイティブiOS・Androidアプリで利用でき、どのデバイスでもJSXを学習でき、進捗がすべてのデバイスで同期されます。

React Academyを今すぐ始める

AI搭載レッスンでプログラミングをマスターする数千人の学習者に参加しましょう。

無料で始める →すべてのコースを見る