
目次(全10章)
- 01Reactとは何か — UIを宣言的に組み立てる約4分
- 02JSXとコンポーネント — 描画の仕組みからpropsまで約13分
- 03Reactのレンダー・マウント・再レンダー・アンマウントの違い約8分
- 04useState — stateの仕組みと参照の罠約9分
- 05useRef — 再レンダーの外で値を持つ約6分
- 06useEffect — 副作用と外部同期約8分
- 07依存配列を正しく書く — exhaustive-depsの読み方約6分
- 08useMemo — 計算結果のメモ化約6分
- 09useCallback — 関数のメモ化と子コンポーネント最適化約11分
- 10Hooksの使い分け — 判断フローと横断比較約6分
この本で学べること
ReactはMeta(旧Facebook)が開発したUIライブラリで、コンポーネントベースの設計思想により、再利用性の高いUI部品を組み合わせて効率的にアプリケーションを構築できます。本書では、Reactの考え方(宣言的UI・単方向データフロー)から、JSX・コンポーネント・Props・Hooks(useState, useEffect, useContext, useRef, useMemo, useCallback)までを、Next.jsなどのフレームワークに進む前の土台として整理します。
なぜ学ぶべきか
Reactは世界中のフロントエンド開発現場で最も広く採用されているUIライブラリです。Next.js、Remix、Gatsby、React Nativeなど、Reactベースのエコシステムは非常に豊富で、Reactを習得することがモダンなWeb開発キャリアの出発点になります。コンポーネント指向の考え方は他のフレームワークにも応用でき、学習投資のリターンが大きい技術です。
前提知識
JavaScriptの基礎(変数、関数、配列操作、オブジェクト)を理解していることが前提です。ES6以降の文法(アロー関数、分割代入、スプレッド構文)に触れたことがあるとスムーズに読み進められます。
学習トピック
Reactの考え方・JSX
宣言的UIとは何か、なぜコンポーネント指向なのかという設計思想から、JSXの文法と表現力を学びます。
コンポーネントとProps
関数コンポーネントの定義方法、Propsによるデータの受け渡し、childrenパターン、条件付きレンダリングを理解します。
Hooks(useState / useEffect)
Reactの状態管理の基本であるuseStateと、副作用処理のuseEffectを使いこなすための基礎を固めます。
パフォーマンスとメモ化
useMemo・useCallback・React.memoによるレンダリング最適化の考え方と、いつ使うべきかの判断基準を学びます。
こんな方におすすめ
- JavaScriptの基礎を終えてReactに入門したい方
- Next.jsを使う前にReactの基本を押さえたい方
- クラスコンポーネントからHooksへ移行したい方
- コンポーネント設計の基礎を体系的に学びたい方