カテゴリー
サインイン 新規登録
学習時間 10時間
難易度 初級
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

Reactの状態管理の全体像を学ぼう

Hooks API、Context API、Reduxなどのさまざまな状態管理の使い分けを学ぶ

5
最終更新 2024/1
Jiro

Reactの状態管理に特化して学習できる

本教材では、Reactの状態管理に焦点をおいてサンプルのアプリの実装などを見ながら学んでいきます。

状態管理はReactを使う上で外せません。

ひとえに状態管理といっても、

  1. Hooks APIでのローカルステートの管理
  2. Context APIでのグローバルステートの管理
  3. Reduxでのグローバルステートの管理
  4. クエリキャッシュによるステートの管理

など、以前の Redux 一強であった頃よりはアプリケーションの状態管理の方法も多様化しています。

これらの技術に馴染みのない方からするとこれらの

  • 使い分け方やメリット・デメリットがわからない。
  • それぞれの使い方や思想がわからない。

といったものがあるかと思います。

本教材では、状態管理に焦点を置いて、メリットデメリットや使い分け方やなど、の全体像が学べる教材になっています。

本教材が終えたらどのような状態になっているか

  • React.js での状態管理の全体像をコードベースで理解している
  • Hooks APIでのローカルステートの管理がわかる
  • Context APIでのグローバルステートの管理がわかる
  • Redux でのグローバルステートの管理がわかる
  • クエリキャッシュ(tansack-query)によるグローバルステートの管理がわかる

受講における必要条件

  • HTML/CSS の基礎知識
  • JavaScript の基礎知識
  • React.js の基礎知識
  • REST API との通信に必要な最低限の知識

これらをまだ書いたことがない、動かしてみたことのない方は一度 Progate や関連書籍、公式ドキュメント React, HTML/CSS, JavaScript 等に目を通してから学習を始めることをおすすめします。
これらの知識について補足や解説が必要と思われる部分に関しては適宜解説を行っていきます。

この教材の対象者

  • Reactは学んだが状態管理についての理解が曖昧な学習者
  • ローカルステートとグローバルステートの違いがわからない
  • Redux を学んだがまだ理解ができているか不安
  • Hooks API + Context API での実装を学びたい
  • 現場での実践的な React + 状態管理ライブラリ での実装を知りたい

本教材では状態管理ライブラリの概念的な解説に止まらず、実際のコードを用いながら各状態管理の方法論について解説を行っていきますので、上記のようなモチベーションのある方はぜひ学習を進めてみてください。

学ばないこと

  • HTML/CSS の基礎的な内容
  • CSS の再利用性を念頭においた CSS 設計
  • JavaScript の基礎的な文法

本教材の対応バージョン

  • React 16.8 以上
  • Node.js 18.x 以上

カリキュラム

Section 0 はじめに
  • 0-1 Reactの状態管理の全体像を学ぼう
  • 0-2 サンプルアプリ・インストールの説明
Section 1 状態管理とは
Section 2 Hooks APIによる状態管理
  • 2-1 Hooks APIとは
  • 2-2 ECアプリでの実装例
  • 2-3 カスタムフックでの状態とロジックのカプセル化
  • 2-4 まとめ

講師のプロフィール

教材のレビュー

5.0
1件の評価
100%
0%
0%
0%
0%
庄田雄貴 3ヶ月以上前
状態の説明が初学者に非常に分かりやすかったです。 最初のuseStateに関する説明で分割代入を用いている説明など、初めてReactを触る人には分かりやすいです。