【完全保存版】React Hooksを完全に理解するHooksマスター講座【React18~19対応】
What you'll learn
- React Hooksの基礎と実装方法が学べます
- React Hooksとは何か？が学べます
- useState()の意味と実装方法が学べます
- Reactのstate管理と再レンダリングのタイミングが理解できます
- 状態更新関数の使い方が学べます
- React Strict Modeの理解と意味が理解できます
- オブジェクトと配列のstateの更新方法が分かります
- イミュータブル/ミュータブル操作の意味と違いが理解できます
- スプレッド構文を使ったシャローコピーについて学べます
- onClickにおける従来の関数とアロー関数の呼び出し方の違いが分かります
- useEffect()の意味と実装方法が学べます
- クリーンアップ関数の意味と実装方法が学べます
- 依存配列の意味とstateの指定ができます
- useEffect内で発生するstate更新の無限ループの注意点が学べます
- useEffectをカスタムフックスでラップする手法が学べます
- useSWRとTanstackQueryを使ったキャッシュデータフェッチングが学べます
- useRef()の意味と実装方法が学べます
- useRefを使って余計な再レンダリングを防ぐ手法が学べます
- useContext()の意味と実装方法が学べます
- Provider内で宣言した関数や値のメモ化が学べます
- memo()の意味と実装方法が学べます
- useCallback()の意味と実装方法が学べます
- React Developer Toolsの使い方が学べます
- useMemo()の意味と実装方法が学べます
- useOptimistic()の意味と実装方法が学べます
- 楽観的UI更新の実装方法が分かります
- Server Actionsを利用してuseOptimisticを使う方法が分かります
- 簡易SNSにおける楽観的UI更新を使うケースが分かります
- useTransition()の意味と実装方法が学べます
- UIノンブロッキングについて学べます
- Suspenseとfallbackについて学べます
- 段階的UIローディングの実装方法が分かります
- useDeferredValue()の意味と実装方法が学べます
- 検索結果が重い場合の遅延された値の利用方法が分かります
Requirements
- CSSの基礎知識(padding/margin/flex等)
- Javascriptの基礎知識(if/for文等)
- Reactの基礎知識(jsx/コンポーネントの理解等)
Description
本講座ではReact Hooksについてハンズオン形式で学ぶ講座となっています。useStateやuseEffectはもちろん、useCallbackやuseMemo, useOptimisticやuseTransition等の踏み込んだHooksまで解説しています。React19以降になれば安定版でのHooksも登場する予定ですので、それらHooksについても講座内では解説しています。また、講座では随時Hooksの内容は更新する予定です。
■ 本コースの対象者
これからReact Hooksを学ぼうと思っている方
実務の現場でReact開発をすることになった
Hooksについての理解が曖昧で自信がない方
Reactのレンダリングのタイミングが曖昧な方
Reactのパフォーマンスチューニングができるようになりたい方
React18以降になってHooksのキャッチアップが止まっている方
もっとHooksを使いこなせるようになりたい方
NextjsでHooksを利用する場面が増えた方
■ 本コースを受講する際の注意点
HTML/CSS/JavaScriptに関する基本的な知識があることを前提としています。
Reactの基礎（コンポーネント、JSX記法など）についての理解が必要です。
JavaScriptに関する実務経験があると、よりスムーズに講座を進めることができます。
自信のないHooksだけ学習していただいても結構です。実際の実務の現場でも扱えるようなHooksの紹介をしておりますので、すぐにご活用いただけます。ただし、experimentalやcanaryバージョンのHooksに関しては本番環境でのご利用を避けるようにしてください。React19になり安定版になればご利用いただけると思います。
Who this course is for:
- これからReact Hooksを学ぼうと思っている方
- 実務の現場でReact開発をすることになった
- Hooksについての理解が曖昧で自信がない方
- React18以降になってHooksのキャッチアップが止まっている方
- もっとHooksを使いこなせるようになりたい方
- NextjsでHooksを利用する場面が増えた方
Instructor
- 4.5 Instructor Rating
- 8,100 Reviews
- 29,965 Students
- 31 Courses
皆さんはじめまして。Shinと申します。
休みの日はプログラミングばかり触っているちょっと変わった人です。便利なアプリや好奇心をくすぐられるようなアプリを作るのが趣味です。
動画レクチャーは分かりやすいように作成するように心がけています。
どうぞよろしくお願いします。