Your cart is empty.
Keep shopping【完全保存版】React Hooksを完全に理解するHooksマスター講座【React18~19対応】
Highest Rated
2,620 students
【完全保存版】React Hooksを完全に理解するHooksマスター講座【React18~19対応】
Hooksを制するものはReactを制します。レンダリングのタイミング/状態管理/キャッシュ/メモ化/パフォーマンスチューニング/楽観的UI更新/UIノンブロッキングetc...本講座でさらなるReactへの理解を深めることができます。
Created byShin Code
Last updated 4/2024
Japanese
Japanese [Auto],
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()の意味と実装方法が学べます
- 検索結果が重い場合の遅延された値の利用方法が分かります
Explore related topics
Course content
11 sections • 74 lectures • 5h 27m total length
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を利用する場面が増えた方